モバイルデバイス向けのWebページを開発する方法

インターネットへのアクセスはその多くがPCブラウザから行われているが、モバイルデバイスからのアクセスも増え続けており、統計に現れるほどの割合に増えている。そしてデバイスそのものの高速化、通信環境の強化、早いサイクルでのデバイスの買い替えなど、PC以上に激しく変わっている。数年前はcHTMLやi-HTML、WMLなどのサブセット規格に準拠して作成する必要があったが、現在では様変わりしている。

Opera Softwareの開発者であるAndreas Bovens氏がOpera's Developer Relations Team - Screencast: "Mobile web development techniques"において、モバイルデバイス向けのWebコンテンツ開発方法を紹介している。現在の状況を踏まえ、モバイルデバイスに対応したWebコンテンツを開発する3つの方法が紹介されている。紹介されている方法は次のとおり。

1. なにもしない

特別なことはなにもしない。デスクトップ向けのコンテンツを制作すればいい。最近のデバイスはデスクトップ向けに開発されたコンテンツをそのまま閲覧できる。iPhoneであればダブルタップして最適なサイズまでズームが実行されるし、困らない。リキッドレイアウトやセミリキッドレイアウトを採用するなどするといい。

2. モバイルサイトを別に制作する

UserAgentで切り分けてモバイルデバイスからのアクセスはモバイル版サイトへ飛ばすようにする。ただし、UserAgentの値は詐称可能で、さらに判断を間違うことにもあるため、リンクでPC版とモバイル版を常に切り替えられるようにしておく。クッキーを使うことで状態を保存しておき、次にアクセスがあった場合にはユーザが望む方を閲覧できるようにしておく。

また、モバイルサイト版ではviewportメタタグを指定して、モバイルデバイスに適した表示が実現されるようにしておく。たとえばiPhoneの場合、デスクトップ向けのコンテンツを表示するとデスクトップと同じように表示しようとするため、最終的にデバイスの幅に合わせてコンテンツ全体を小さくした状態で表示される。タブルタップなりズームなどで表示変更すればいいわけだが、最初が小さくなり、字が読めない状況になる。

viewportメタタグを指定すると、その指定した幅に合わせてコンテンツがレンダリングされるようになる。たとえばviewportメタタグを指定しない場合は850px幅をベースにレンダリングされているものが、320pxと指定すればこの幅に調整してレンダリングが実施される。content="width=device-width"として自動的にデバイスの幅を使うようにすれば、さまざまなデバイスに対応できる。ただし、High DPIなデバイスに対してはまた別のテクニックで対処する必要がある。

3. どのデバイスからも綺麗に見えるコンテンツを制作する

viewportメタタグとCSSメディアクエリを使って、デバイスの画面サイズに応じて自動的にレイアウトを変更するコンテンツを開発する。CSSメディアクエリで画面サイズごとに適用する内容を変えることができるため、これとviewportメタタグを組み合わせればいい。

Mobile web development techniquesに掲載されている動画の10分40秒から11分50秒までを見ると、メディアクエリがどういった動きをするものかがよくわかる。ブラウザの幅を変更するということは、iPhoneやiPadなどのデバイスを縦にしたり横にしたりする操作にも該当する。メディアクエリによる切り分けはiPhoneやiPadのようにデバイスの縦横が切り替わるデバイスに対しても適用できる方法で、効果が高い。

Andreas Bovens氏は特に3つめの方法が優れているとし、新しくサイトを構築するなどフルスクラッチから作業できる場合には使ってみて欲しいとしている。その場合、作業開始からモバイルということを強く意識すること、なにごともシンプルにするように努めること、HTTPリクエストは減らすことを考えること、などをアドバイスしている。