2008/03/13 (Thu)
せっかく我が家にiPhoneがやってきたので、テストがてらちょっとだけ遊んでみた。cssでサイトのレイアウトを振り分ける、というところまでは面倒なのでしてないけど、
1. サイトの表示幅の変更
2. ウェブクリップ用のアイコン作成
という簡単なふたつをフォトログに導入。以下メモ代わり。iPod TouchのSafariも対応。
1. サイトの表示幅の変更
iPhoneのデフォルト表示幅は980ピクセル。この幅が画面幅になって表示される。私のフォトログは幅が450ピクセルなので、iPhoneで見ると画面の半分ほどにちょこんと表示される。これをiPhone用のメタタグを使って、450ピクセルが表示幅になるように変更。（サイトのheadタグ内に挿入）
<meta name="viewport" content="width = 450" />
←こんな感じ。
ポラロイド署名運動のバナーの表示がちょっとおかしいけど、気にしない、気にしない…
2. ウェブクリップ用のアイコン作成
前回のアップデートで可能になったiPhoneの機能の一つが、サイトのブックマークをフロントのアイコンに追加するウェブクリップブックマーク。私のサイトをブックマークしてフロントに置いてくれる人がいるとは思えませんが、お仕事用のテストということで。（笑）
手順は簡単で、57×57ピクセルのアイコン用のPNG画像を “apple-touch-icon.png” という名前でサイトのルートディレクトリーにアップロードするだけ。Favicon（ファビコン）と同じ要領です。
ファイル名を指定する場合はサイト、またはページのheadタグ内に
<link rel="apple-touch-icon" href="/xx.png" /> と指定。
←こんな感じ。
アイカタに無理矢理ブックマークしてもらう。アイコンのつやつや感はiPhoneがつけてくれます。
その他のiPhone/iPod Touch用の詳しい情報は↓
Apple Web Apps Dev Center - Designing Content
日本語のページ、前はあったんだけどなくなっちゃったみたいです。
