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にログインしてコメントする

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