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ログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 4日前
  • 5日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Apple Leopard SOA Ruby 入門 Ruby on Rails ブラウザ Off Topic Microsoft Webデザイン MySQL Google Mozilla C/C++ Firefox 3 XHTML まとめ server Adobe PHP Eclipse IDE 小技 Firefox iPod touch Mac OS X Flash Apache JavaScript Safari Webアプリケーション開発 Tips 開発環境 ライブラリ Python オープンソース CSS フレームワーク 仮想化 iPhone Windows Database Java HTML Ajax PostgreSQL RIA イロハ Linux リファレンス
  • 話題のタグを見る »