2007/10/05
ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法
viewport を設定して iPhone/iPod touch に対応しよう
ぼちぼち iPod touch が届き始めましたね。
Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性1を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。
方法は簡単です。
<meta name="viewport" content="width=1024" />
head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。
ちなみに、上記の width=1024 となっている viewport の設定は Apple のホームページで使っているもの。（xhtml を使ってないためか、正確には最後のスラッシュがない形になってますが。）
なお、実のところ、viewport なんて設定しなくても iPhone/iPod touch からほとんどのウェブページは見ることができます。わずかながらレイアウトが崩れる場合や、重い JavaScript のためにエラーが出てしまうページはあるでしょうが。
なお、viewport 以上のより細かいカスタマイズをするには、iPhone/iPod touch 専用の CSS を用意したり、さらには、User Agent を見て、専用ページに振ってしまう方法もあります。
以下、自分のウェブサイトに合わせて、どのように viewport を設定すべきか考えてみます。
viewport は仮想的なウインドウのサイズ
Safari on iPhone/iPod touch が通常のウェブブラウザと違うのは、ウインドウを持たないことです。そこで、この viewport という概念が出てきます。
viewport というのは仮想的なウインドウのサイズだと思えばいいでしょう。デフォルトでは、980 ピクセル幅となっています。viewport の値は最小 200 ピクセルから、最大 10,000 ピクセルを取ることができます。
何も設定されていない素のウェッブサイトを Safari on iPhone/iPod touch で見た場合、980 ピクセル幅のウインドウでブラウズした状態になるわけです。
Safari on iPhone/iPod touch は、ページがディスプレイ幅より大きいとき、ページの横幅に合わせて縮小した表示して、（横幅）全体を表示しようとします。iPhone/iPod touch の液晶ディスプレイは 320 x 480（縦持ち時）です。では、viewport の幅を 960px に設定してページを閲覧するとどうなるでしょうか。
幅が 320px しかないディスプレイで、3倍の幅の 960px のものを表示するわけですから、ページは 1/3 に縮小されたサイズで表示されます。
最適な viewport の width 値を決める
viewport の概念をつかんだところで、自分のウェブサイトに最適な viewport の幅を決めてみます。ここでは、iPhone/iPod touch 用の CSS は特別に用意しないという前提で考えます。
viewport 幅を決めるのに必要なもの
Safari 3（利用不可能であれば他のウェブブラウザでも）
Windows ユーザの方は Apple Developer Connection（要会員登録・無料）から、より新しい日本語表示に対応した Windows 版 Safari 3 Public Beta がダウンロードできます。
ブラウザのウインドウ幅を測るツール
私は MouLocX を使いました。Mac OS X での同種のフリーウェアは、OSX Freewares あたりから探しましょう。
Firefox のアドオンで MeasureIt というのもあるようです。
Windows の場合、Vector だと「定規」で検索するといろいろ出てきますね。
viewport 幅を決める手順
調整したいウェブページを開きます。
ウインドウ幅を縮めていき、水平スクロールバーの現れないぎりぎりの幅にします。
その時のウインドウ幅を計測します。
これだけです。
そして次に、その値を width に設定します。当ブログは 780px くらいで水平スクロールバーが現れるので、以下のような設定にしてあります。
<meta name="viewport" content="width=780" />
もちろん、この viewport の設定は必須ではありません。width のデフォルト値は 980px なので、何も設定しない場合は、980px 相当のウインドウで開いたときの表示になります。
ただ、980 より小さい値を設定すれば、文字がその分大きく表示されるので、ユーザがダブルタップやピンチオープンなどの動作で表示を拡大しなくも、文字が読める可能性が高まります。
水平スクロールバーが表示される幅は、各々の CSS での設定や table など各要素の width によって決まってきていると思います。上記で測定した幅より小さく viewport を設定したとしても、あなたのウェブサイトはその幅では表示できないので、Safari for iPhoe/iPod touch は、自動的にスクロールバーの出ない横幅まで縮小して表示します。例えば、このブログで width=320 と iPhone/iPod touch のディスプレイ幅に合わせた設定をしようとしても、意味がないわけです。
上記で測定したウインドウ幅が 980px より大きい場合は、敢えて設定する必要もないと思います。例えば、1100px 程度で水平スクロールバーが表示されるなら、viewport の設定を特にしなくても、iPhone/iPod touch のディスプレイに 1100px がちょうど収まるように自動的に縮小されて表示されます。
ちなみに Apple のサイトは現在のところ、1000px くらいで水平スクロールバーが表示されます。何も viewport を設定しなくてもよいはずですが、最初の方で述べたように Apple では
<meta name="viewport" content="width=1024" />
と、1024px 相当の幅のウインドウで表示させたように viewport を設定しています。
JavaScript でウインドウ幅を測定（追記）
他の目的のために作った Bookmarklet 「Show All Width/Height」を公開しておきます。
デスクトップユーティリティで幅を測るより、こちらのほうがスマートですね。このリンクをブックマークに登録してご利用ください。
なお、Safari 用に作っているので、他のブラウザでは値が表示されない部分があると思います。
Safari の場合、ウインドウの横幅を縮めていき、水平スクロールバーが表示された状態で、このブックマークレットを使います。そこで表示された scrollWidth の値を目安に、viewport の width を設定すればいいでしょう。
おまけ：1280px 以上の viewport 幅を設定したい場合
思い切って viewport を width=3200 などに設定したらどうなるでしょうか。320/3200 = 1/10 ですから、10分の1 の大きさで表示されるはずです。しかし、実際には以下の設定をしても、1/10 では表示されず、1280px 幅 (1/4) 程度の表示になり、残りの 3200-1280 = 1920px はスクロールしないと見れない状態で表示されます。なぜでしょう？
<meta name="viewport" content="width=3200" />
それは viewport 属性には、width 以外にも minimum-scale などのデフォルト値が存在するからです。
minimum-scale のデフォルト値は 0.25 です。つまり、特に指定しない限り 0.25 (1/4) 倍の表示が、最小の縮小率となっています。
ディスプレイ幅が 320px なので、0.25 倍ということは、320/0.25 = 1280px が表示できる最大のピクセル幅となります。余った 1920px 分はスクロールして見ることになります。
Safari on iPhone/iPod touch ではスクロールバーは出ませんが、フリック（指ではじく）動作でスクロールが可能です。フリックすると、一瞬スクロールバーも表示されます。
もし、何らかの理由で viewport の width を 1280 以上に設定したい場合は、合わせて minimum-scale も設定してやらないといけないわけです。先ほどの width=3200 の例でいくと、
<meta name="viewport" content="width=3200, minimum-scale=0.1" />
のように、少なくとも minimum-scale は 0.1 以下にしなければなりません。
viewport の width 設定のまとめ
一応まとめてみると、viewport の width の値は
- 基本は水平スクロールバーが表示される境界の値
- ただし、980px 以上 1280px 以下の場合は、設定してもしなくても同じ
- 1280px 以上を設定する場合は、
minimum-scaleも合わせて設定する必要あり - 320px 以下の場合は
width=320。ディスプレイ幅の 320px 以下に設定する意味はない
ということになるでしょうか。
もっと細かく表示させる大きさをコントロールしたかったら、iPhone/iPod touch 用の CSS を用意してやることになります。気が向いたら、そのうち書いてみます。
以上が現時点での私の理解ですが、勘違い、誤字脱字等ありましたら、ご指摘くださると助かります。
iPhone/iPod touch の viewport の概念の補足
まだ少しわかりにくいようなので、 viewport の概念を補足する記事を書きました。
Comment
No Comments