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

大野晋一（編集部）
2008/01/17 18:00

iPod touchの新機能のひとつにWebclipがある。ホームスクリーンにWebサイトのショートカットをおけるというものだ。ここではそのアイコンの作り方を紹介しよう。

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

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

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

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

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

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

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

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
アプリケーション CSS Chrome Webサービス iPod touch Apple Webデザイン Mozilla Linux Windows 7 Database データベース Flash Windows Vista Mac OS X iPhone Java リファレンス Opera ソフトウェア開発 OS Windows Firefox 3 Off Topic WebKit Tips UI 仮想化 マイクロソフト プログラミング言語 iPhone 3G RIA Windows XP インストール Firefox Safari 脆弱性 PHP セキュリティ Microsoft ブラウザ HTML 小技 JavaScript Internet Explorer 開発環境 オープンソース Google Ajax モバイル
  • 話題のタグを見る »