サイトの Web クリップアイコンをカスタマイズしてみた

Jan 17

Apple, Gadget, Hardware, Software, Weblog Add comments

先日公開された iPhone / iPod touch ファームウェア 1.1.3 で提供された新機能「Web クリップ（Webclip）」ですが、早速、iPhone / iPod touch 用表示に対応しているこのブログと、別に対応してないけど自分の tumblr. に Web クリップアイコンを適用してみました。

適用はめっさカンタンです

まず、Home に表示するボタンの元になる PNG 画像（57 x 57 px）を作成します。（ボタンの角丸やグロス（上半分の光沢）処理は、iPhone / iPod touch が自動的にやってくれます）

その画像を “apple-touch-icon.png” という名前で保存し、サイトの root ディレクトリへアップロードするだけ。　iPhone / iPod touch の Safari が自動的に画像を認識し、Web クリップの際にボタンとして表示してくれます。

tumblr. のように root ディレクトリへアクセスできない場合は、ボタン画像は公開可能な任意のサイト上へアップロードし、tumblr. の Theme を Custom HTML に切り替え、<head> 内へ

<link rel=”apple-touch-icon” href=”http://任意のサイト/customIcon.png”/>

と記述すれば OK です。

webclip_002

ただし、この方法で Web クリップのボタン画像を指定してしまうと、ページ上の任意の場所でクリップボタンを作成することが出来なくなり、強制的に設定した画像でボタンが作成されます。　まぁ指定しなかったとしても、一度クリップしたボタンはリアルタイム更新されないので、一見わかりにくいボタン画像になるよりも任意のアイコンで一目瞭然に出来るというわけです。

このほかにも、ボタン画像が設定されていないサイトにも任意のアイコンを設定する方法があるようです。　興味のある方はお試しあれ。

参考リンク：iPhone Dev Center – Apple Developer Connection