lifeLOG + REPOsitory: iPhone 対応してみる

今日はスタイルをいじる日。引用のためのスタイルだとか、ブログタイトルの下にあるナビゲーションメニューを整えたりだとか。勢い余って、iPhone で見たときにそれっぽく見えるようにしてみた。まずは、これが始めの第一歩。

デバイスごとに見かけを変えるしかけ

iPhone 対応にするには、大きく 2 つの作業が必要になる。ひとつは、iPhone 特有の Viewport を適切に設定することだ。これには JavaScript でユーザエージェントを判定した後、iPhone (あるいは iPod touch) の場合は meta 要素を使って viewport を設定する。もうひとつは、iPhone とその他(Mac や PC、等)でスタイルを切り替えられるようにすること。これには、メディアクエリーという CSS 3 の機能を使う。

Viewport の設定

(「iPhoneサイト制作ハンドブック」p.95)
Mobile Safari には、一般的な PC の Web ブラウザのような、サイズを変えらえるウィンドウがありません。Mobile Safari でコンテンツを配置するのに使われるのは、仮想的な表示領域である「Viewport」です。

Mobile Safari の表示と Viewport の関係は、スクリーンの背後にある Viewport の "風景" を、スクリーンのサイズに切り抜かれた "窓" を通して見ているようなイメージです。この "窓" のサイズは変えられませんが、Viewport の "風景" は、大きくなったり小さくなったり、拡大率が変わったりします。

iPhone の Safari で一般の(ie iPhone 対応になっていない)ページを開くと、ダブルクリックやピンチ操作で表示部分を拡大したり、縮小したりできる。あれはこの Viewport が変わっているのだ。コンテンツのレイアウトを iPhone 用に定義するのであれば、Viewport の拡大や縮小は不要。よって、今回、やるべきことは Viewport をサイズ、倍率ともに固定してしまうことだ。

属性	設定値
width	device-width
user-scalable	no
initial-scale	1
maximum-scale	1

他のデバイスでは意味のない定義だから、iPhone かどうかの判別をした上で meta 要素を挿入する (あっても邪魔にはならないと思うけどね)。これはは以下の JavaScript コードで行う。長い行は "\" で折り返してある。

(iPhone 判定)
 1: var is_iphone = navigator.userAgent.indexOf("iPhone", 0);
 2: var is_ipod = navigator.userAgent.indexOf("iPod", 0);
 3: if ((is_iphone & is_ipod) > -1) {
 4:  document.write('<meta name="viewport" \
                     content="width=device-width, \
                     user-scalable=no, initial-scale=1, \
                     maximum-scale=1" />');
}

これを script タグで囲って、テンプレートの head 要素内に置く。title 要素の前とか、すぐ後ろとか、その辺り。

メディアクエリー

お手本にした「ハンドブック」では、外部 CSS を切り替える方法が載っている。残念ながらこの方法をそのまま Blogger のテンプレートに使うことはできない。しかし、同様のことを CSS 内部で記述することもできる。

Blogger のテンプレート内にあるスタイルシートの記述を、こんな感じに変更する。

(CSS style definitions in Blogger's template)
 1: @media screen and (max-device-width: 480px) { /* for iPhone */
 2:     body {
 3:         text-align: center;
 4:         :
 5:     }
 6:     :
 7:     #header-with-image {
 8:         display: none;
 9:     }
10:     :
11:     #sidebar-wrapper {
12:         display: none;
13:     }
14:     :
15: }
16: 
17: @media screen and (min-device-width: 481px) { /* for Mac and PC */
18:     body {
19:         :
20:     }
21:     :
22:     #header-without-image {
23:         display: none;
24:     }
25:     :
26: }

「ハンドブック」にもあるように(p.92)、iPhone のメディアタイプは Mac (や PC) と同じく「screen」。このため、メディアタイプに「max-device-width」というメディア特性による絞り込みを付けてある。Mac (や PC) の方では「min-device-width」だ。480 px という値は iPhone のスクリーンを横向きにしたときのサイズだ。ちなみに縦向きだと 320px。「ハンドブック」にも書いてあるが、将来、より画素数の多い、iPhone が登場したときには、この対応は修正しなければならない。ま、来年の夏ぐらいまでは大丈夫だろう。

iPhone 向けのスタイルの内容だが、ほとんどは不要なレイアウト要素に対して「display: none;」を指定することだ。具体的にはサイドバーなど。また、同様のことを Mac/PC 用のスタイルでも行えば、iPhone にだけ表示するような要素も置ける。↑の例では、iPhone のときには背景画像つきのヘッダは表示せず、代わりにテキストのみのヘッダを表示させる。一方、Mac/PC のときにはその逆。それをスタイルシートのみで行っている。

ただ、このメディアクエリーは CSS3 で検討中の仕様だから、古いブラウザでは適切に処理されない可能性がある。今回、確認したのは以下のブラウザだ。

Firefox 3.5.3 (Mac)
Safari 4.0.4 (Mac; 64 bit mode)
iPhone Safari (iPhone OS 3.1.2)

iPhone 対応のサイトにするための注意点

Viewport の設定とスタイルによる不要なレイアウトを非表示にするだけで、ぐっと見やすくなる。ただいくつか注意点が残っている。今回、気付いたものを記録しておく。

画像のサイズ

iPhone は縦向きのときに 320 px の幅となる。これを越えるサイズの画像を貼りつけてしまうと横スクロールするように表示される。Viewport の設定が活きない。画像のサイズは 320 を越えないように。実際にはマージンのこともあるあら、もう少し小さめにするべきだ。

pre 要素のサイズ

「override: auto」を指定していないと画像の場合と同じく横スクロールする。もっとも「auto」にしたら横方向からハミ出た部分は見えなくなる。iPhone ではスクロールバーは出ないからだ。その場合は、横向きにすれば 1.5 倍になる。これで見えなければ、どうやっても見えない。まあ、iPhone は万能のデバイスってわけじゃないからね。こんなときは、すっぱりあきらめよう。

この先は・・・

今回の対応は、サイドバーを非表示としメインコンテンツの表示を優先させただけ。そのうち、ナビメニューを表示させるとか(これは CSS だけでできそう)、トップを開くとコンテンツの一覧が表示されるようにするとか(JavaScript に加えて Blogger のテンプレートにも手を入れる必要がありそう)、そういうこともやってみたい。