モバイルウェブ開発

モバイル端末は、デスクトップパソコンやノートパソコンと比較して、ハードウェアの特性がまったく異なります。画面は通常、明らかに小さくなりますが、ユーザーが端末を回転させると、画面の向きがポートレートモードとランドスケープモードの間で自動的に切り替わります。通常、ユーザー入力用のタッチスクリーンがあります。位置情報や画面の向きなどの API は、デスクトップでは未対応であったりあまり有用でなかったりしますので、これらの API はモバイルユーザーに、サイトと対話するための新しい方法を提供します。

レスポンシブウェブデザインは、ウェブサイトのレイアウトを表示する環境 — 特に、大きさと画面の向き — の変化に合わせることができる一連の技術を表す用語です。これには次のような技術が含まれています。

• 流動的 CSS レイアウトにより、ブラウザーの大きさが変化したときにページを円滑に合わせる
• メディアクエリーを使用して、端末の画面の幅と高さにふさわしい CSS の規則を条件付きで含める

viewport メタタグで、ブラウザーに対してユーザーの端末の適切な表示倍率でサイトを表示するよう指示します。

タッチ画面を使うには、 DOM タッチイベントの作業をする必要があります。 CSS の :hover 擬似クラスを使用することはできないでしょうし、指はマウスポインターより太いという事実を考慮して、クリック可能なアイテムをボタンのようにデザインする必要があるでしょう。この記事、 designing for touch screens を参照してください。

pointer または any-pointer メディアクエリーを使用して、タッチ可能な端末で異なる CSS を読み込むことができます。

端末の帯域幅が低かったり高価だったりするユーザーを支援するために、デバイスの画面サイズと解像度に適した画像をロードして画像を最適化することができます。 CSS でこれを行うには、画面の高さ、幅、ピクセル比でクエリーを行います。

CSS プロパティを使用して、画像を使用せずにグラデーションや影などの視覚効果を実装することもできます。

最後に、端末の向きや位置情報など、モバイル端末が提供する新しい可能性の利点を活用することができます。

様々なモバイル端末で受け入れられ動作するウェブサイトを作成するには、以下のことが必要です。

• ベンダー接頭辞のついた CSS プロパティなど、ブラウザーに依存した機能を使用することを避けるようにしてください。
• これらの機能に対応していないブラウザーでは、コンテンツが使用できる限り、ベンダー接頭辞付きの代替手段を提供しないでください。-webkit-border-radius のようなベンダー接頭辞つきプロパティは、現代の標準に対応していない古いブラウザーではパフォーマンスに悪影響を及ぼします。
• パフォーマンスを損なわないように代替手段を用いて新機能を使用するには、現在のブラウザーを対象としたスタイルを設定し、 @supports 機能クエリーを使用して、最新の CSS を対応するブラウザーのために使用するようにしましょう。

この Gecko 固有のプロパティの一覧と、この WebKit 固有のプロパティの一覧、そして Peter Beverloo の table of vendor-specific properties を確認してください。

以上のような手法を使用して、ウェブサイトが画面の大きさやタッチ画面などといった特定の端末特性を検出し、それに適応することが望ましい形です。しかし、これは非現実的である場合があり、ウェブサイトがブラウザーのユーザーエージェント文字列を解析して、デスクトップ、タブレット、携帯電話を区別し、端末ごとに異なるコンテンツを提供することに手を出しがちです。

これを行う場合は、アルゴリズムが正しく、特定のブラウザーのユーザーエージェント文字列を理解していないために、間違った種類のコンテンツをデバイスに提供していないことを確認してください。ユーザーエージェント文字列を使用して端末の種類を決定するガイドを参照してください。

ウェブサイトを複数のブラウザーでテストしてください。これは複数のプラットフォームでテストをするということです。 — 少なくとも iOS と Android です。

• iPhone のモバイル Safari をテストするには、 iOS シミュレーターを使用します
• Opera や Firefox は Android SDK でテストします。これらの詳しい操作方法は、 running Firefox for Android using the Android emulator を参照してください。