KOBO*PAPER vol.6    2008.09.03

space.png

Webクリップとは

main_homescreen20080609.jpgiPhoneのウェブブラウザ「Safari」のブックマーク機能のひとつで、ホーム画面にウェブサイトへのショートカットを置くことができます。これをタップすると、Webページやページ内の特定部分に素早くアクセスすることができます。
iPhoneでWebクリップを作成すると、通常は表示中のページを縮小した画像がボタンとして作成されますが、Webクリップ機能に対応したアイコンを設置しているサイトの場合は、そのアイコンがホーム画面に登録されます。

アイコン画像の作成

apple-touch-icon.png1:57 x 57 pixelで画像を作成します。
2:画像はPNG形式で保存します。

iPhone上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。角も丸く削られ、統一されたボタンのデザインにされます。
注意点として、一番上の1pixelの列は、自動的にハイライトが入り、完全に白く飛んでしまいます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。

KURASHINO*KOBOでは上のようなアイコンを作成しました。

画像をアップロード

HPのお勧め方法

サーバのroot(ルート)ディレクトリ(一番上のindex.htmlなどと同じ階層)に、ファイル名を「apple-touch-icon.png」としてアップロードします。
それ意外にやる事はありません。画像が存在していれば、iPhoneが自動的に認識してアイコンを生成します。

サイト全体で、同じWebクリップアイコンが適用されます。

Blogのお勧め方法

HTMLの<head>をカスタマイズできれば、Webクリップを設置できます。
画像をアップロード後、ウェブページの<head>~</head>内に、<link rel="apple-touch-icon" href="任意の名前.png"/>の一行を追加します。
画像の場所、名前は任意に設定できます。また、場所を相対パスで指定するなら「images/xxxxx.png」絶対パスで指定するなら「http://www.~」と書きます。

記述してあるページにのみ、Webクリップアイコンが使われます。ですから一つのドメインの中で、コーナー毎にアイコンを使い分けられます。

iPhoneで登録

kobologo-01.png1:Safariで、任意のWebサイトを開く
2:画面下の「+」ボタンをタップ
3:「ホーム画面に追加」をタップ

うまくいっていれば、製作したアイコン画像が表示されます。簡単に出来ますので是非お試しください。

おまけ(サイト幅の指定)

iPhoneでWebサイトを開くと、自動的に980px幅のサイトとして最適な拡大率に調整表示されますが、980pxよりも幅の狭いサイトは縮小されてしまいます。Bindの標準幅は825pxなので、両脇に黒い帯が表示されてしまいます。
そこで、<meta name="viewport" content="width=825" />を「ページ設定」の「スクリプト入力」に入力すれば、余白が無く表示されます。表示後にダブルタップやピンチ操作で、拡大率を変更することも可能です。

全ページに入力しなければならないので、ページ数の多い方は大変かもしれません。