firefox を最新版 ( ver.50 ) にアップデート後、Bookmark Favicon Changer で設定したブックマークレットのアイコン（ファビコン）が初期化された！

「Firefox 50」が安定版に。拡張機能のパフォーマンス改善や脆弱性の修正が行われる http://forest.watch.impress.co.jp/docs/news/1030197.html 「Firefox 50」正式版がリリース、キーボードショートカットの更新やページ内検索機能を強化 http://gigazine.net/news/20161116-firefox-50/ firefox がとうとう バージョン「50」 になりました！ いろいろ強化・修正されたみたいで、 特に、 という修正が入り、個人的に非常に高まっております！ border-radius とは角丸を表現する CSS で、 最近の Web サイトでは使わない方が珍しいくらい多用しているプロパティの一つです。 丸くした箇所に沿って線を引いたりなども多用しますが、たまにその線を点線や破線にすることもあります。 しかし角丸指定と点線や破線を同時に使うと、直線になってしまうというバグが firefox ではずーっと残っていて ( 2007年ごろから ) デザインを再現するには画像などで対応するしかなく、大変だったのですが、今回の新しいバージョンでは指定した通りになるようになった！ということです。 border-radius: 50%; などという円になる表現で点線や破線を指定した際が特にクリティカルなバグで、すべて直線になってしまいデザインを再現しにくいのが悩みでしたが、新しいバージョンが世の中に浸透していけばもっと楽しく・簡単に実装ができそうです！ 以上、嬉しい前置きでした。 さて、私はコーディング作業や確認作業、調べ物など、ブックマークレットを多用しており、これが無いと仕事に支障がでます…。 常時、ブラウザの右上に設置しており、ワンクリックで即座に動作させるようにしております。 ( https 化してある Web サイト上で、たまに動作しないのが辛いところ…。 ) 右上はこんな感じに。 テキスト（ブックマークの名前）を空にし、アイコンのみにすることで、限られたブラウザのスペースを節約しております！

• をクリックするとポップアップを表示し、日本語を入力すると Google 翻訳で英語に。
• をクリックするとポップアップを表示し、英語を入力すると Google 翻訳で日本語に。

といった使い方をしています。 ただしこれはアイコンがあるから、簡単に見分けがつくわけで… アイコンが無いと、下記の様な感じになります。 これは大変ですね。 というわけで、アイコンを設定できるアドオンが存在します。 Bookmark Favicon Changer
https://sites.google.com/site/sonthakit/bookmarkfaviconchanger こちらを使うと右クリックからのコンテキストメニューで、アイコンを簡単に変更したり保存したりができます。 バージョン「50」より以前まではこちらでまったく問題ありませんでした。 バージョンアップ直後は問題なかったのですが、「追加のツールと機能」のカスタマイズを行うと、アイコンが初期化されてしまい、以後変更ができなくなってしまいました。 いろいろ検証した結果、

• http や https から始まる URL には今まで通り問題ない
• javascript: から始まる URL には適用されない

ということがわかりました。 そこでハック的な考えで、 一度別の URL に変えてアイコンを設定し、また URL を戻すと上手くいくのでは…？ ということで実践しましたが、適用直後は想像通り上手くいきました。 が、やはり「追加のツールと機能」のカスタマイズを行うと、初期化されてしまい、無駄な作業の連続でした…。 かなり右往左往しましたが、ユーザースタイルシート というのを思い出し、 Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/ こちらのユーザースタイルシートを管理できるアドオンを導入し、なんとかならないか挑戦しました。 実はユーザースタイルシートは Web サイトの調整だけでなく、ブラウザの外観も操作することができるのです！ ユーザースタイルシート自体は Google Chrome にも存在します。 DOM Inspector
https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/ さらにこちらの DOM Inspector というアドオンで外観の要素 ( CSS を付与する箇所 ) を特定し、いざアイコン設定のスタイリングです。 toolbarbutton という要素 ( タグ ) にスタイルを付与していきます。 下準備として、名前を空にしていたブックマークレット達に、「bookmarklet_〇〇」といった形式で名前を付けてあげます。 〇〇は任意です。 先ほどの Google 翻訳だったら bookmarklet_google-translate-ja-to-en などの様に。 こうすることで追加したスタイルが toolbarbutton 全域に適用されるのを防ぐ書き方がをすることができます。

/* HTML */
<toolbarbutton label="bookmarklet_〇〇"></toolbarbutton>

/* CSS */
toolbarbutton[label^="bookmarklet_"] {
  background: no-repeat center center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
  font-size: 0;
  overflow: hidden;
  text-indent: 100%;
  transition: background-color .175s, background-size .175s;
  white-space: nowrap;
}
toolbarbutton[label^="bookmarklet_"]:hover {;
  background-color: #fff !important;
  background-size: 13px 13px !important;
}
toolbarbutton[label^="bookmarklet_"] .toolbarbutton-icon {
  visibility: hidden;
}

この CSS で、toolbarbutton の label ( 名前 ) 属性の値の先頭に bookmarklet_ を含んでいる要素だけにスタイルを付与することができます。 background にはデフォルトのスタイルがいくつか入っていて綺麗に打ち消すのが手間なので !important で強制してあげます。 目指すのはアイコンのみの省スペースかつ分かりやすい表示で、テキスト ( 名前 ) は不要なので、テキストを消す処理も忘れずに入れます。 また、デフォルトのアイコンが toolbarbutton-icon というクラス名で子要素に存在するので、こちらも邪魔になるので非表示にします。 その際に display: none; に使用して要素を消してしまうと、画像の高さを横幅が失われて、幅が小さくなってしまうので、非表示専用のプロパティ「visibility」を活用します。 ここまでをベースとして、各々にアイコンを設定していきます。 アイコンは base64 形式にすると、画像としてどこかにアップロードする手間が不要でおすすめです。 変換には様々な手段がありますが、 画像をbase64エンコードするツール
https://syncer.jp/base64-encoder こちらの Web サービスが動作も良く、気の利いたコピー機能を提供してくださるのでおすすめです！ 最後に、やっとやりたかったアイコンの設定です。

/* Google 翻訳にて、日本語を英語に */
toolbarbutton[label="bookmarklet_google-translate-ja-to-en"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABcElEQVQ4jZ2SMWtUURCFn6ygiYmViorCIgtbLNy9c757eTzX4qUI5A/cJlXAEFIIFomgkiZNLFLkB6RYsNBCe8FWsBEEbS1EQhCSQCqxsLG5C9vE9+LAaQbOx5yZKbz3XeAX8AP4nnUs6Uld1xeLpvLedyW97ff785OepJWzAFVVzQALzrkb/wUAZs3sqZltDwaDuaIpAvB1qj/RUfY8O/cEdV1fNrMtSbvOuSsTwCdgPRtXgP2zAKPRaB5YjjHenGS6BbwCVqcAL4DllFKn8QoppU5ZlleLorgwPWZVVTON5jblve+a2UNJj2KM98xsHdjx3ndb/QkwBj7kPX3OV/mW+9daTRFCqCUtAe/NbANYbR2hLMs7wGHWH+AE+ClprW2EB8Cb/HAH3vv7wKaZ7QCzbQBjSS9z9t/AqaTXwDjGeLcRMBwOTdJzSe8kreUn2wshLPZ6vUv/NJvZbUkfgd0QgqWUOmZ2HXgMfHHOlX8B3QSQeDjyLakAAAAASUVORK5CYII=' ) !important;
}

/* Google 翻訳にて、英語をに日本語 */
toolbarbutton[label="bookmarklet_google-translate-en-to-ja"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYElEQVQ4jb2Tv0ubYRDHX0ocCsVJsEiHDEqHhOTu+7m3ISLhAf8AF3ETbKfS2UIHh9LBoYV27vS21EXc3XQJdHFzcFHwJ+ggLu3SodDlTQkhRTPYg1uO5z58v8/dZSmliplVJX1y9/mIeAq8i4hlM6tmtwUwARTAoaRtYF/SMdAFilsBfaBXpZLvkt4Cc/96GxF1d39Zq9Ue9QqLwBVwCvwGroGLZrP5bBig1WqNS3ov6WOWUqoAq8CqmVWBS0DAlqSlRqPxRNIBcNyXZ8BP4ObvH0TEN+Bc0i/gCNgAina7/XBQgaRpSZ8jYiEDxty9A3yQtCvpOfAFWMvzfHaYhTzPH5uZAWOZJIAd4E05tgdmNgOsA2fuPnXnSdxblJ5XBrNer0/eFbAiaTMiXvSaga67d0YBvE4pVXo1oBgJ4O7rkqbNrFruy9aoCvaAr+XdFMDh/7Ug6QY46VvnH+7e+QMGaIYRE1OajgAAAABJRU5ErkJggg==' ) !important;
}

base64 形式に変換したアイコンを background-image で背景画像として設定します。 これで完成です！。 さて、今回の難関であった、アイコン初期化されないように維持できるかですが…。 「追加のツールと機能」のカスタマイズを開いたり、動かしたりしても全く問題ありませんでした！嬉しい！ 実はバージョン「50」以前の Bookmark Favicon Changer を使用時でも、稀に初期化されてしまう現象に遭遇しており、何度か設定しなおしたことがありました。 その度にクリックでアイコンをひとつひとつ登録していく操作が面倒くさいと思っていたのですが、今回の件でまとめて解決したので、悩まされましたが最終的に満足いく結果になりました。よかったです。 最後に私の右上の完成はこんな感じです。なぜか最近恒例の GIF。 無駄に、 transition ( 変形を滑らかにするプロパティ ) をつけて楽しめるようにしました！ 以上です。みなさんも、よき firefox & ブックマークレット ライフを！！

ちょっと古くなりましたが、過去に紹介したアドオンとブックマークレットの記事

• 手軽に使える便利な firefox のアドオン！
  /blog/7450
• 手軽に使える便利なブックマークレット！
  /blog/7662