iPod touch用Webclipアイコンの作り方

大野晋一（編集部）
2008-01-17 18:00:00
iPod touchの新機能のひとつにWebclipがある。ホームスクリーンにWebサイトのショートカットをおけるというものだ。ここではそのアイコンの作り方を紹介しよう。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　MacworldでアップグレードされたiPhone/iPod touchの新機能のひとつにWebclipがある。ホームスクリーンにWebサイトのショートカットをおけるというものだ。

　画面上にWebショートカットを置くなんて日本の携帯電話なら普通に出来ますが？ などということなかれ。このWebclip、専用のアイコンを用意すれば、ユーザーのホームスクリーンをハデに彩ることも出来るのだ。ブラウザで長らく使われてきたfaviconのサイズを大きくしたものと考えればよい。

　builderでは既にiPod touchに最適化されたWebサイトの作り方を解説しているが、今後はアイコンも忘れずに作っておきたい。

　Webサイトの提供者には次の2つの方法が用意されている

  • 「apple-touch-icon.png」というファイル名のアイコンをWebサイトのルートフォルダ（サーバのではない！）に置いておく
  • HTMLのタグ内に
    という記述を行う。/pathToCustomIcon.pngはアイコンを置いたパスを記述しよう

　アイコンはサイズ57ピクセル四方のPNGファイルが望ましい。サイズが異なると端末側でリサイズされる。また、ホームスクリーンに置かれる際に、自動的につやつやな見た目に加工される。また、アイコンがない場合は自動的にWebページの縮小版がアイコンとなる。

　Appleからの公式な情報はiPhone Dev Centerで入手できる。サイトにアクセスし、「Create a WebClip Bookmark Icon」の項を参照されたい。

  • コメント（1件）
#1 anonymous   2010-04-18 22:48:32
Create a WebClip Bookmark Icon のリンク先が変わっていました。
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-CH6-SW31
  • 新着記事
  • 特集
  • ブログ