2014年10月8日水曜日

TiddlyWikiにファビコンを追加する

TiddlyWiki

お気に入りメモツールの TiddlyWiki は、お気に入りのブラウザ Firefox を起動すれば何時でも使えるように「タブをピン留め」して使っています。 Firefox ではタブをピン留めするとファビコンだけの表示になります。

( 追記:Dec 22, 2014
  現在は最新版の TiddlyWiki5 と区別するため、 TiddlyWiki Classic と呼ばれています。
  http://classic.tiddlywiki.com/ )

ファビコンが無い場合、Google Chrome や IE では代替のファビコンが表示されるようですが、Firefox ではファビコンの無いものは表示してくれません。そのような訳でファビコンの無い TiddlyWiki は「のっぺらぼう」でなんだか寂しいです。



TiddlyWiki にファビコンを追加しよう

この方法は Firefox だけで使えます

ファビコンを指定する link 要素は head 要素の中に記述することになっているので、追加する場合は TiddlyWiki の HTML を直接編集するか、ファビコン表示用のマクロを書かなければなりません。ところが Firefox で TiddlyWiki を使う場合は、以下の方法でファビコンを追加することができます。

  1. favicon.ico を作る
  2. TiddlyWiki のカレントフォルダに favicon.ico を保存
  3. 「MainMenu」tiddler にコードを追加

コードを追加する tiddler は「MainMenu」tiddler で無くても良く、起動時に常に読み込まれる tiddler なら問題ないと思います。それでは手順を説明します



マルチアイコン favicon.ico を作る

元になる画像を作る

ImageMagickconvertコマンドを使い、テキストデータから画像ファイルfavicon.pngを作ります。今回は「TW」の文字を使って画像を生成します。

Windows のコマンドプロンプトで実行

convert -font Consolas -pointsize 48 ^
    -interline-spacing -35 ^
    -kerning -2 -crop 56x52+0+0 ^
    -background lightblue -fill black ^
    -bordercolor black -border 1 ^
    label:"T\n W" ^
    favicon.png

元画像からマルチアイコンを作る

次に、出来上がった画像ファイルfavicon.pngを元にして、マルチアイコンファイルfavicon.icoを生成します。

convert favicon.png ^
    -bordercolor white -border 0 ^
    ^( -clone 0 -resize 16x16 ^) ^
    ^( -clone 0 -resize 32x32 ^) ^
    ^( -clone 0 -resize 48x48 ^) ^
    ^( -clone 0 -resize 64x64 ^) ^
    -delete 0 -alpha off -colors 256 favicon.ico

これでfavicon.icoができあがりました。



TiddlyWiki のカレントフォルダに favicon.ico を保存

ファビコンを追加したい TiddlyWiki のカレントフォルダに favicon.ico ファイルを保存します。



「MainMenu」tiddler にコードを追加

TiddlyWiki の「MainMenu」tiddler に、次のコードを追加します。

<html>
<link rel="shortcut icon" href="./favicon.ico">
</html>

これで完了です、TiddlyWiki のファビコンが表示されています



もうひとつの方法:データURIスキームを使う

この場合は tiddler への追記だけでOKです。この方法の良い所は、参照用のfavicon.icoファイルをカレントフォルダに設置しなくて済むことです。

link の中に、予め Base64エンコードしたfavicon.icoを、テキストデータとして記述します。

こんなかんじです

<html>
<link href="ここにエンコード済みテキストデータを挿入" rel="shortcut icon" type="image/png">
</html>


画像ファイルを Base64エンコードするには

Firefox のインスペクタを使います。

  1. アドレスバーにabout:blankを入力。
  2. 開いたページにfavicon.icoファイルをドロップすると、ページにファイルの画像が表示されます。
  3. Firefox のインスペクタを起動 Ctrl+Shift+C
  4. favicon.ico画像を選択。
  5. インスペクタのfavicon.icoの行のコンテキストメニューから「画像のデータURIをコピー」を選択。
  6. エディタにペーストすると Base64エンコード済みのテキストデータが得られます。

得られた画像のテキストデータを上記のコードに挿入すると、このようになります。

<html>
<link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADIklEQVQ4jXWTX0xTdxzFf5mPC2wlkxlRprK9DIJbMrPgRpxLnC+LybLF8AAyspk9sIcpGoYKtmXQqUXEODPHjKUq0N723rb38r/Iyv49LGFsgGBLaQFbCoWKGboMk3320KzaLHs4j+eTk/P9HvHRyXoudg9jlvsxK/2ck/swKwM0ubyYbBqGNgmj1YnR6khJb5Ew2TQqagwIvUWiWb3FFzcUzjp6MCsDmDpV6m/IXP1+lJ7IGlr4HtrsakpqKIE3vo7JpiEqG8+TV7CTTbnbyHhWx1MbNpCz40WeyXqO8urTdM3dxzY2i3T7bkr28TnUUAK9RUIYrU608D28S39RXl3H81tfQA0lUAKLOKei2CfmcU5F0yRNzOOZWcFodSCMVgeemWX6Y39SdvwU2TlbcQfjOCYjuKbj9EbX0syOyQiyP8ZQ4m+MVmcS4A4u07fwkLJjSYArsIQ7GOfK0C9UNV9JM7uml2gdHqH22w70FvvjBH1PJFD8MXoif3Cq9SaZuiw6fw8j+2PYxsL0RNb4/KtrbH+5gPrr8v8AAotos6ucdfai25iN5edxPKEV3ME4vdEHfHbuEvm7ijgjdT8BWHjIoeO1ZG/JxRVYRA0luNT3Ixm6LFp9I3T8NkPDTReD8UccrmvklTffwqz0p5dYWnWSjZu34JpOdnDtpzGezsjk6g+jHGm6jBACdzBOeXUdRfvf5bxn8F/ACr3RB3xc20BefiGu6SWUwCLtvwbJ1GXR0uVj38FShBAY2iRKq07w9vslXNC+SwK02VUckxHs43N0jM7gnIoi31lAmphn8/Y8KhubeW3vPt4pKWPPgQ947/CnHKj4hIvdw48B0u27yHcWUPyx1Nlkf4yC13ez84097C85RKtvhJwdL1G4u5gPq08nE+gtEmoogX18LvmqE/Opd/WEVni1eC9CCI61fIM3vk5hUTFCCI40XcasDCBMNg1vfB01lPjPYAaXH3Gw8ij5u4qwjYXx3YcTX1vZlLuNli4fF7QhREWNAZNNQ2+R0iZrtDowtDloaHfzpb2L+usyhjaJhnY3pk6VM1I3FTUG/gEHGNeMoFv3zwAAAABJRU5ErkJggg==" rel="shortcut icon" type="image/png">
</html>

このコードを、TiddlyWikiの「MainMenu」tiddler に追加すれば完了です。



さらにもうひとつの方法: MarkupPreHead tiddler を使う

さらにもうひとつ TiddlyWiki の MarkupPreHead tiddler を使う方法がありました。この tiddler に書き込むと TiddlyWiki HTML ファイルの<head>要素の中に、書き込まれた内容が挿入されるようになっています。

MarkupPreHead は shadow tiddler なので tiddlerリストの Shadowed タブの中に表示されます。

MarkupPreHead tiddler を開いて追記します。

<link rel="shortcut icon" href="./favicon.ico">

データURIスキームを使う場合も同じ箇所に挿入すればOKです。

TiddlyWiki を保存して再読み込みすると MarkupPreHead tiddler に書き込んだ内容が TiddlyWikiHTML ファイルの<head>要素に挿入されます。Firefox のインスペクタで確認すると、このように挿入されていることがわかります。

これでファビコンが表示できるようになりました。

この方法では Firefox と Google Chrome でファビコンの表示ができましたが、 IE はダメでした。



オリジナルのファビコンを作りたい

もっと簡単にファビコンをデザインしたい場合は、オンラインで作れるウェブサービスが幾つかあります。例えばこんな所favicon.ico Generator

あなたのTiddlyWikiに、オリジナルファビコンを作ってみてはいかがですか。

Firefox & TiddlyWiki で楽しいメモ環境をつくりましょう!

0 件のコメント :