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

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