iPhone/iPod touch用のWebClipアイコンの作り方
0
0
ついにMacworldで，薄型のMacBook「MacBook Air」が発表されました。拡張端子の大幅な省略[1]や本体にバッテリを内蔵したことは、人によって評価が分かれる部分でしょうね。[2]今回SSD搭載というモデルを出してきたわけですが、SSDの価格も下がっていくでしょうからむしろこれからが楽しみなラップトップなのかもしれません。
また、同MacWorldで2月のSDK公開に先駆けてiPod touchにiPhoneのソフトウェアが有償でインストールできるというソフトウェア・アップグレードが発表されました。僕もアップグレードして早速Mailの便利さに感動してます:-D
ホーム画面にあなたのWebサイトのブックマークを
今回の新しいアップデートからホーム画面のカスタマイズが可能となり、ホーム画面に任意のWebサイトのブックマーク(これをWebClipというそうです)を置けるようになりました。
このアイコンは何も指定していしないとサイトのスクリーンショットになりますが、自分で作った画像を表示させることも可能です。
WebClip Bookmark Icon の設定方法
てことで簡単な追加のしかたです。
57 x 57 pixelのpng画像60 x 60 pixelのpng画像を用意する- この画像をサイトのルートディレクトリ[3]に置く、または以下のHTMLコードを記述する
- あたらしいファームウェア(v1.1.3) にしたiPhone/iPod touchからWebサイトにアクセスしてSafari下部の「+」アイコンをタップ、「ホーム画面に追加」を選択する
- 指定したWebClip Bookmark Iconがホーム画面にポコンと表示されます:-)
HTMLコード
指定の仕方はFaviconに似ています。Favicon同様、サイトのルートディレクトリに置くとこのコードは書かなくてもいいようです。
レンタルブログなどでルートディレクトリに置けない場合や、ページごとに個別に指定したい場合などはHTMLのhead要素の中に以下のように記述します。
<link rel="apple-touch-icon" href="/apple-touch-icon.png(画像のパス)" />
サンプル画像
わかりやすいように2pxのボーダーと背景色を設定しています。
ついでにこのサイトのWebClipアイコンを紹介しておきます。ちなみにホーム画面のアイコンたちのようなツヤツヤな効果は自動で付くのでこんな簡単なアイコンでも実際はそれなりの見栄えがします。笑
参考文献
詳しくは知りたい方は、iPhoneに関するアップルのドキュメンテーション「iPhone Dev Center」の「Create a WebClip Bookmark Icon」の項を参照してみてください。これ以外でも様々な仕様があってiPhone/iPod touch対応サイトを作りたい方には貴重な情報源だと思いますよ:-)
ちなみに次回の記事もiPhone/iPod touchに関する内容です。
0
