2009年06月24日
iPhoneとViewPortとXHTML Mobile DOCTYPEと.mobiドメイン
iPhoneのMobile Safariは、通常ウェブページを横幅980ピクセルとして描画する。iPhoneの実際の画面幅は320ピクセルだから、おおよそ1/3に縮小して表示しているわけだ。
いまどきのウェブページは概ね800ピクセル以上の横幅を想定したデザインになっているので、殆どの場合はこれで快適なのだけど、一方それ以下の横幅のページを表示すると、結構残念な感じになる。特にケータイサイトは、通常240ピクセル幅を想定したデザインで、それが980ピクセル幅の領域に描画されるわけだから、かなり間の抜けた表示になる。当然文字も小さく読みづらいので、それではとピンチインで表示を拡大しても、ケータイサイトでは一般的にブロックの横幅が指定されず、こうしたブロックは980ピクセルの横幅いっぱいに描画されるので、今度は文章を追うのに横にスクロールする必要が生じる。
サイト側でMobile Safariの描画領域を指定する手段として、よく知られているのはViewPortの記述だ。例えば以下のようなMETA要素をHTMLに記述しておくと、Mobile Safariはデバイスの画面幅（device-width）で、つまりiPhoneなら320ピクセルでページを描画してくれる。
<meta name="viewport" content="width=device-width"/>
このcontent属性の値を「width=240」にすれば240ピクセル幅で描画され、カンマ区切りで「user-scalable=no」を追加すれば、ピンチイン/アウトなどのユーザ操作による表示の拡大縮小もできなくなる。
さてそれで、ここからが本題。
開発中のとあるサイトにiPhoneでアクセスさせてもらったところ、すべてのページがもれなく320ピクセル幅で描画されていた。このサイトのターゲットは携帯電話だけというわけではないそうなのだけど、今のところは携帯電話での利用が主なので、デザインもケータイサイト風だ。それでも320ピクセル幅で描画されるということは、iPhoneでのアクセスも想定してViewPort指定を書いてるのだろうと思ったら、開発者に聞いてみたところ、そんなものは書いてないと言う。確かにHTMLソースを眺めてみても、そんなものは書かれていない。それなのに320ピクセル幅で表示される。
これは不思議だなと思ってたのだけど、たまたま別件でググってたら回答を見つけた。
以下は、Apple Developer Connection - Web Apps Dev Center - Designing Contentの、“Web標準および実証済みのデザインプラクティスを使用する”より。
注：iPhone版Safariでは、プロキシにおいても、クライアント上でも、コードの変換は一切行いません。ページは設計されたとおりにレンダリングされます。また、WML（ワイヤレスマークアップ言語）もレンダリングされません。XHTML mobileプロファイルの文書タイプおよび.mobiドメインのサイトはサポートされています。
重要なのは最後の一文。これだけではなんのことなのか、なにが「サポートされて」いるのかよくわからないのだけど、これを目にして、例のサイトが.mobiドメインでホストされていることを思い出した。
また、jQueryの開発者として知られるJohn Resigさんの、iPhone Tech Talkと題された2007年のブログ記事には、Boston iPhone Tech Talkで聞いた話として、以下が記されている。こっちはもうちょっとわかりやすい。
Pages that are marked up with XHTML Mobile or are on a .mobi domain are handled specially (they're shown unmodified - assuming that the developer has already optimized the page for a mobile device appropriately).
あいにく.mobiドメインは持ち合わせてないので、「XHTML mobileプロファイルの文書タイプ」のほうを試してみることにした。XHTML Mobile ProfileのDOCTYPE宣言を記述したHTMLにiPhoneでアクセスしてみる。結果は案の定320ピクセル幅で描画され、一方それ以外のDOCTYPEのものは980ピクセル幅で描画された。
おそらく.mobiドメインのページも、これと同様の扱いを受けるのだろう。例のサイトのDOCTYPEはXHTML Transitionalだったので、このサイトの描画が、DOCTYPEではなくドメインによって決定されているのは間違いない。また、どうやらDOCTYPEよりもドメインのほうが優先されるらしい。
上のものとは別のアップルのページ、Safari Web Content Guide: Creating Compatible Web Contentには、上と同じ記述に続けて、XHTML Mobile ProfileのDOCTYPE宣言として以下が掲載されている。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
XHTML Mobile ProfileのDOCTYPE宣言は何度か変更になっているのだけど、上の通りでなければいけないかというと、少なくともDTDのURIは、この動作には無関係のようで、これの有無で表示が変わることはなかった。
GoogleモバイルにはViewPortが書かれているものと書かれていないものがあり、それでもMobile Safariで一律320ピクセル幅で描画されるのは、すべてのページでDOCTYPE宣言がXHTML Mobile Profileで統一されているからなのだということにも合点がいったのだけど、そのGoogleモバイルのDOCTYPE宣言では、DTDのURIはwapforum.orgドメインのものになっている。もちろんこれでも、Mobile Safariの動作には影響はない。
ちなみにドコモのi-XHTMLのDOCTYPE宣言はダメだった（笑）
そもそも諸外国では、モバイルサイトのDOCTYPE宣言は（WMLでなければ）XHTML Mobile Profileが当たり前に選択される。一方この国では、XHTML Mobile ProfileのDOCTYPEを提示しているのはauだけで、ドコモもソフトバンクも独自のDOCTYPEを推奨している。しかもいずれも、実際はDOCTYPEなど関知していないので、どのようなDOCTYPEを出力しても、表示にはまったく影響がない。それでも日本のケータイサイトの多くは、クライアントに応じてDOCTYPEの出力を切り分けていて、iPhoneからのアクセスは、スタンダードのウェブブラウザと同等に扱われ、HTML/XHTMLのDOCTYPEが出力されている。
ということで、もしあなたがケータイサイトのオペレーションに関わっていて、そのサイトがiPhoneでアクセスされても問題ないものなら、以下のいずれかを採用することで、iPhoneでも本来のように（980ピクセル幅で描画されないように）表示させることができます。
- ViewPortを記述する
- DOCTYPE宣言にXHTML Mobile Profileのものを採用する
- .mobiドメインでホストする
逆に.mobiドメインのサイトで、iPhoneで320ピクセル幅以外で描画させたい場合はViewPortを記述する必要があります。例えばiPhoneやPCのウェブブラウザに対して、「ケータイでアクセスしてね」的なページを表示させる場合に、ViewPortがないと、.mobiドメインのサイトのページは、iPhoneでは320ピクセル幅で表示されてしまうので、それに収まるデザインならばいいけど、そうでなければこれは必須ですね。
Category: ウェブ制作
Posted 2009年06月24日 00:42
トラックバック
このエントリーのトラックバックURL:
http://www.rcdtokyo.com/mt/mt-rcdtokyo5428-tb.cgi/834
