お気に入りに登録ボタンが使えなくなった@Firefox

ブログに設置してあったお気に入りに登録のボタンをなにげに押してみたら上手く動かなくなってました。

確かに前は動いたはずなのに。。。

設置してあったボタン
Firefox23からの変更？
Firefoxでブックマークする方法

設置してあったボタン

設置してあったボタンはこんな感じ。

javascript部分が

source/javascripts/utils.js

jQuery(function () {
  $(".add_bookmark").click(function () {
  if ( ! $(this).data('page_title') || ! $(this).data('page_url') ){
    return addBookmark(document.title, location.href)
  }else{
    return addBookmark($(this).data('page_title'), $(this).data('page_url'))
  }
  });

  function addBookmark(title, url) {
    var metaKey = (navigator.appVersion.indexOf('Mac') != -1) ? 'CMD' : 'CTRL';
    if(navigator.userAgent.indexOf("MSIE") > -1){
      //Internet Explorer
      window.external.AddFavorite(title,url);
    }else if(navigator.userAgent.indexOf("Firefox") > -1){
      //Firefox
      alert("サイドバーではなく、通常のブックマークにする場合、\n\"このブックマークはサイドバーに読み込む\"のチェックを外して下さい。");
      window.sidebar.addPanel(title,url,'');
    }else if(navigator.userAgent.indexOf("Opera") > -1){
      //Opera
      window.open(url,'sidebar','title='+title);
    }else if(navigator.userAgent.indexOf("Flock") > -1){
      //Flock
      window.sidebar.addPanel(title,url,'');
    }else if(navigator.userAgent.indexOf("Chrome") > -1){
      //Chrome
      alert("Push "+metaKey+"-D to add favorite!");
    }else if(navigator.userAgent.indexOf("Safari") > -1){
      //Safari
      alert("Push "+metaKey+"-D to add favorite!");
    }else if(navigator.userAgent.indexOf("Lunascape") > -1){
      //Lunascape
      alert("Push "+metaKey+"-G to add favorite!");
    }else{
      //other
      alert("Please use the browser's bookmark function!");
    }
  }
});

こんな感じ。ブラウザチェックして適当な関数を呼ぶように。小さなjavascriptの関数とかは source/javascripts/utils.jsに書いて source/_include/custom/head.html等に

<script src="/javascripts/utils.js"></script>

として読み込んでます。

ボタンはsass内でcustom/_styles.css等に

sass/custom/_styles.scss

.link_btn {
  background-color:$nav-bg;
  padding:2px;
  padding-left:5px;
  padding-right:5px;
  position:relative;
  text-decoration:none;
  //color:$nav-bg;
  border: solid 2px darken($nav-bg, 15);
  border-radius: 10px;
}

.link_btn:active {
  padding-bottom:1px;
  padding-left:5px;
  padding-right:5px;
  padding-top:3px;
  top:1px;
}

.link_btn::before {
  background-color:$nav-bg;
  content:"";
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  padding:1px;
  left:-1px;
  top:-1px;
  z-index:-1;
  border-radius: 10px;
}

li.bookmark {
    width: 130px;
    height: 21px;
    line-height: 15px;
}

こんな感じの物を作って、 source/_includes/post/sharing.html内に

    <li class="bookmark">
      {% if index %}
      <input class="link_btn add_bookmark" type="button" value="{{site.favorite}}" data-page_title="{{post.title}} - {{site.title}}" data-page_url="{{site.url}}{{post.url}}"/>
      {% else %}
      <input class="link_btn add_bookmark" type="button" value="{{site.favorite}}" data-page_title="{{page.title}} - {{site.title}}" data-page_url="{{site.url}}{{page.url}}"/>
      {% endif %}
    </li>

といった感じで追加しておきます。

これで今まではFirefoxではサイドバーのチェックを外す警告の後にブックマークのメニューが出てきてたんですが、何故か出て来なくなった。。。

Firefox23からの変更？

上の関数は割りとどこでも見られる物なので、適当に同じようなボタンを設置してあるページを探して押してみたところやっぱり機能してませんでした。アドオンとかを外しても駄目。

で、ちょっと探してたら ~~Firefox 23 サイト互換性情報~~ のページに、

Ref: サイドバーパネル追加機能が削除されました

との記述が。どうもざっくり削除されたようです。

適当に検索しても英語のページでも全然情報がひっかからないので、こういうお気に入りボタンを設置してる人はいるものの、普段使ってる人ってのは実際にはほとんど居ない感じなんでしょうか？ (自分で設置しても自分で押すことは滅多に無いので、一度テストしたら二度と押さないから気付かないかもしれませんが。。。)

という訳で、とりあえずブラウザのせいだと思うので、諦めて、他に方法も良くわからないので、Chrome等と同じように自分でショートカットを押して下さい、と表示することに:

//Firefox
-alert("サイドバーではなく、通常のブックマークにする場合、\n\"このブックマークはサイドバーに読み込む\"のチェックを外して下さい。");
-window.sidebar.addPanel(title,url,'');
alert("Push "+metaKey+"-D to add favorite!");

多分、全く使われてないのでいっそ削除してしまってもいいんですが、なんとなく見栄え的に取っておきたいと言うことで暫くこのまま放置。。。

Firefoxでブックマークする方法

ついでに、Firefoxでのブックマークに関していくつか。

上に書いたように、Ctrl-dで現在のページをブックマーク出来ますが、これを含めて

Ctrl-d: このページをブックマーク
Ctrl-Shift-d: 全てのタブをブックマーク
Ctrl-b: ブックマークサイドバーを表示/非表示
Ctrl-Shift-b: 全てのブックマークを表示

等があります。(Macの場合はCtrlの代わりにCmdで。)

ただ、FirefoxにはVimperator を入れてるので、これによってキーマップが変わってます。 Vimperatorを入れてる場合はaまたは:bmarkコマンドでブックマークを。コマンドの場合は引数でタイトル等の指定も可能。(:h bmarkでチェック)

ショートカットも便利なんですが、普段ブックマークする時は ~~Add Bookmark Here~~ と言うアドオンを使ってます。このアドオンを入れると、ブックマーク一覧の中に Add Bookmark Hereというボタンが出てきて、各フォルダを見ながら直接その場にブックマークを入れることが出来て便利です。

もう一つ、ブックマーク関連のアドオンで、 ~~MyBookmarks~~ というのも結構便利です。これは単に自分のブックマーク一覧のページを作ってくれて、 about:mybookmarksと言うアドレスで表示出来るようになります。

Vimperatorとの組み合わせで