iPhone/iPod touch用のWebClipアイコンの作り方

画像 : WebClip Bookmark Icon

ついにMacworldで,薄型のMacBook「MacBook Air」が発表されました。拡張端子の大幅な省略[1]や本体にバッテリを内蔵したことは、人によって評価が分かれる部分でしょうね。[2]今回SSD搭載というモデルを出してきたわけですが、SSDの価格も下がっていくでしょうからむしろこれからが楽しみなラップトップなのかもしれません。

また、同MacWorldで2月のSDK公開に先駆けてiPod touchにiPhoneのソフトウェアが有償でインストールできるというソフトウェア・アップグレードが発表されました。僕もアップグレードして早速Mailの便利さに感動してます:-D

ホーム画面にあなたのWebサイトのブックマークを

今回の新しいアップデートからホーム画面のカスタマイズが可能となり、ホーム画面に任意のWebサイトのブックマーク(これをWebClipというそうです)を置けるようになりました。

このアイコンは何も指定していしないとサイトのスクリーンショットになりますが、自分で作った画像を表示させることも可能です。

WebClip Bookmark Icon の設定方法

てことで簡単な追加のしかたです。

  1. 57 x 57 pixelのpng画像60 x 60 pixelのpng画像を用意する
  2. この画像をサイトのルートディレクトリ[3]に置く、または以下のHTMLコードを記述する
  3. あたらしいファームウェア(v1.1.3) にしたiPhone/iPod touchからWebサイトにアクセスしてSafari下部の「+」アイコンをタップ、「ホーム画面に追加」を選択する
  4. 指定したWebClip Bookmark Iconがホーム画面にポコンと表示されます:-)

HTMLコード

指定の仕方はFaviconに似ています。Favicon同様、サイトのルートディレクトリに置くとこのコードは書かなくてもいいようです。

レンタルブログなどでルートディレクトリに置けない場合や、ページごとに個別に指定したい場合などはHTMLのhead要素の中に以下のように記述します。

<link rel="apple-touch-icon" href="/apple-touch-icon.png(画像のパス)" />

サンプル画像

わかりやすいように2pxのボーダーと背景色を設定しています。

画像 : WebClip Bookmark Icon

ついでにこのサイトのWebClipアイコンを紹介しておきます。ちなみにホーム画面のアイコンたちのようなツヤツヤな効果は自動で付くのでこんな簡単なアイコンでも実際はそれなりの見栄えがします。笑

参考文献

詳しくは知りたい方は、iPhoneに関するアップルのドキュメンテーション「iPhone Dev Center」の「Create a WebClip Bookmark Icon」の項を参照してみてください。これ以外でも様々な仕様があってiPhone/iPod touch対応サイトを作りたい方には貴重な情報源だと思いますよ:-)

ちなみに次回の記事もiPhone/iPod touchに関する内容です。

  1. 特にFireWireとEthernetが省かれたのが衝撃でした [back]
  2. ちなみに僕には値段が高くて手が出ませんorz [back]
  3. このサイトの場合はhttp://versionfive.jp/apple-touch-icon.png となりますね [back]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA