モバイルウェブ開発

このページでは、モバイル端末で適切に機能するウェブサイトを設計するために必要となる、主要な一部のテクニックの概要を説明します。 Mozilla の Firefox OS プロジェクトに関する情報を探している場合は、 Firefox OS のページを参照してください。または、 Android 版 Firefox に興味があるかもしれません。

モバイル端末向けの設計ブラウザー間の互換性の 2 つの節に整理しました。また、 Jason Grlicky によるウェブ開発者向けのモバイルへの親和性のガイドも参照してください。

モバイル端末向けの設計

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

小さな画面での作業

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

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

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

タッチ画面での操作

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

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

画像の最適化

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

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

モバイル API

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

クロスブラウザー開発

クロスブラウザーコードを書く

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

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

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

ユーザーエージェントの推測に注意

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

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

複数のブラウザーでのテスト

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