やられた。ブログ・ネタを、クリボウさんに取られてしまった。しかも、ぼくの用意してた内容を上行く質で! このまま自分のネタを書かずに終わるのも勿体ないので、まずクリボウさんの方法を軽く紹介してから、ぼくのやり方を書いてみる。
やりたい事
まず、firefox でブックマーク・ツールバーのブックマークやブックマークレットに、好みの favicon を使いたいというのがあった。で、そのやり方を次の記事で紹介した。
結果はこんな感じ:
bookmark も bookmarklet も favicon 表示でスッキリ。この方法の欠点は、favicon の用意が必要なこと。好みの favicon があればいいけど、なければ自分で作るしからない。けれど、それは手間。
そこで PNG や GIF などの画像を favicon に使おう、というのが今回の記事の目的。
例えば、上の画像で言うと、左から 3 つ目の icon (はてなブックマーク登録用の bookmarklet) には favicon じゃなくてはてなの提供してる画像
を使ってる。こういう事がしたいわけ。
クリボウさんの方法 (オススメ)
詳しい事はクリボウさんのページを見てもらうことにして、簡単にやり方をば。
- 利用したい画像を firefox で開く (ex. 画像を右クリックして「画像の URL をコピー」、firefox のアドレス・バーに URL を貼り付けして RET)
- ブックマークに登録 (メニューから「ブックマーク」>「このページをブックマーク」、作成先には「ブックマークツールバー」を選ぶ)
- 登録したブックマークをクリック (firefox に画像を登録させるため)
- ブックマークを右クリックして「プロパティ」を選択。URL の部分を、bookmark したいページの URL か bookmarklet の本体 (javascript コード) に置き換える。
クリボウさんの説明を引用すると
これは、Firefox で画像をブックマークすると、その画像自体が 16x16 ピクセルに縮小されて、ファビコンになるという仕組みを利用したもの。
とのこと。firefox の中だけで作業が完結する。便利。更に、登録する画像はアニメーション GIF でも構わない。
ぼくの方法
ぼくの方法は data scheme を利用する。画像 foo.gif を ICON にする方法は次の通り。
- 画像 foo.gif をダウンロード (手元にある画像を使うなら、ダウンロードの必要なし)
- foo.gif を base64 でエンコードして foo.txt という名前で保存。
- firefox profile の bookmarks.html で該当するブックマーク (ブックマークレット) の ICON="" を data schme で指定 (foo.txt の内容を挿入)
base64 で foo.gif を foo.txt にエンコードする方法は、いくつかある。Linux なら、次のどれかが使えるはず。
- cat foo.gif | base64 -e > foo.txt
- cat foo.gif | openssl enc -e -base64 > foo.txt
- cat foo.gif | nkf -MB > foo.txt
- cat foo.gif | perl -MMIME::Base64 -ne 'print encode_base64($_)' > foo.txt
bookmarks.html については 「Firefox のブックマーク・ツールバーをファビコンでスマートに」を読んでもらうとして、data scheme は次のように指定する。
<a href="http://foo.com" ICON="data:image/gif;base64,foo.txt の中身を貼り付け"></a>
今回の例は GIF 画像。PNG を使う場合は、data:img/gif を data:img/png にする。
この方法でアニメーション GIF は上手くいくかな? 試してないので分からない。
こんな手間をかけてたら、もっと楽な方法があるってんだもの。ホントやられたって感じ ;)
完全に同じことをしようとしていたんですね…。失礼いたしました。
ReplyDelete画像を直接 Firefox で見たときに、アドレスバーにアイコンが表示されていたので、もしや？と思ってやってみたら、ブックマークのファビコンにできてしまいました。
@aka さんのエントリを読んで、ブックマークとファビコンとが、実際にどのように bookmarks.html に登録されるのかがよく分かり、こちらこそ勉強になりました。
その仕組みをつかうと、ブックマークとファビコンとを、いっせいにうりゃっと関連付けるような、ローカルアプリもできそうですね。…需要があるかはともかく。
他に bookmarks.html の方からファビコンを復元するということも出来ますね。それこそ利用価値がないか…うーん。
色々と想像（妄想？）がふくらんでしまいました。有益な情報ありがとうございました。
まずクリボウさんにお礼を。とてもスマートな方法を教えて頂き、ありがとうございます。それと、クリボウさんの記事がなければ、この記事はネタ帳の中で肥やしになっていたかもしれません ;) そういう意味でも、サンクスです。「失礼」などありませんよ!
ReplyDeleteこのアイコンがらみは、色々とアイデア (妄想?) が浮かびますよね。また、何か面白いことを見付けたら、お互い記事にしましょう ;)