« ブログをいじって遊ぶ | Main | ブログに favicon を設置してみた »

2008年03月08日

iPod Touch 用の Webclip を設置した

image iPod Touch のファームウェが1.1.3になって Webclip が使えるようになったらしい。とても便利なのでなんとかわたしもそれを使いたくなった。ここ数日情報を集めていたが，わたしでもなんとか出来そうなので，昨日から実行に取りかかった。

例によってスキル不足から試行錯誤の連続でやるしかない。時間ばかり掛かってしまって，終いには頭がもうろうとしてくる。(汗)　あとで考えると「あれっ、これはどうしたんだっけ？」と自問自答することたびたび。なのでまだ記憶に新しいうちにメモしておこうと思う。

●Pages を使って【篠の風】の 篠 の一字を使ったアイコンを作る。字の背景は薄い緑にした。
●[apple+shift+4]のショートカットでほぼ真四角に切り取る。デスクトップに自動的に [.png] 形式で保存される。（この時に書体の上の空白部分を下のそれよりも若干狭くした方が，iPod Touch のボタンになった時のバランスが良い）
●フリーソフトの ImageWell.app を使い、60x60 pix にサイズを揃え、アイコンの名称を [apple-touch-icon.png] として保存する。
●そのファイルをブログのルートディレクトリ（わたしの場合はidisk/Sites/t/apple-touch-icon.png) に置く。
●ネットの情報ではこれだけでうまくいくと書いてあるのだが，わたしの場合はiPod Touch に反映されなかった。そこで念のためにと次の行程を付け加えた。
●わたしの使っている Thingamablog のフロントページを開き ＜head＞と＜/head＞の間に
＜link rel="apple-touch-icon" href="http://idisk.mac.com/okobay/Sites/t/apple-touch-icon.png" /＞
と加えてみる。しかしこれでも結果はNG。昨夜（3月7日）はふて腐れてここまでで寝てしまった。(汗)

一夜明けて今日は3月8日・土曜日である。時間だけは十分にある。(^_^)

●思いついて.Macとは違うサーバ lolipop で試してみることにした。Thingamablog のフロントページに書き込んだ
＜link rel="apple-touch-icon" href="http://idisk.mac.com/okobay/Sites/t/apple-touch-icon.png" /＞
を消して
＜link rel="apple-touch-icon" href="http://okobay.ciao.jp/image/apple-touch-icon.png" /＞
を加える。
●上記のディレクトリにapple-touch-icon.pngファイルをアップロードする。
●これでなんとか成功！iPhone か iPod Touch をお持ちの方，試してみていただけると嬉しいです。(^_^)

（追記）
設置成功のあとThe W3C Markup Validation Serviceで検証してみるとエラーが出る。これは
＜link rel="apple-touch-icon" href="http://okobay.ciao.jp/image/apple-touch-icon.png"＞
としていたためで，どうやら最後は [ /＞] としなくては駄目らしい。また一つ利口になった。