Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

ウェブアプリに関するおすすめの方法

モバイル デバイス用のウェブページやウェブ アプリケーションの開発には、一般的なデスクトップ ウェブブラウザ用のウェブページの開発とは異なり、さまざまな課題があります。以下の関連リソースもご覧ください。

簡単に作業を開始できるように、Android などのモバイル デバイス向けに最も効果的なウェブ アプリケーションを提供するうえで従うべきおすすめの方法を以下に示します。

  1. 専用のモバイル版ウェブサイトにモバイル デバイスをリダイレクトする

    サーバー側のリダイレクトを使用して、モバイル版ウェブサイトにリクエストをリダイレクトする方法はいくつかあります。ほとんどの場合、これを行うには、ウェブブラウザから提供された User Agent 文字列を「スニッフィング」します。モバイル版のサイトを提供するかどうかを判断するには、User Agent で「mobile」という文字列を探します。

  2. 注: フルサイズのウェブサイトが提供される大画面の Android デバイスの場合(タブレットなど)、User Agent に「mobile」という文字列は含まれませんが、残りの User Agent 文字列はほとんど同じです。そのため、User Agent に「mobile」文字列が存在するかどうかに基づいて、モバイル版ウェブサイトを配信することが重要です。

  3. モバイル デバイス向けに HTML5 DOCTYPE を使用する

    モバイルサイトで最も一般的なマークアップ言語は HTML5 です。この規格はモバイル ファーストの開発を促進し、さまざまなデバイスでのウェブサイトの動作を保証します。従来のウェブ言語とは異なり、HTML5 ではよりシンプルな <DOCTYPE>charset の宣言が必要です。

        <!DOCTYPE html>
        ...
        <meta charset="UTF-8">
        
  4. ビューポートのメタデータを使用して、ウェブページのサイズを適切に調整する

    ドキュメントの <head> で、メタデータを提供する必要があります。メタデータは、ブラウザのビューポートでウェブページをレンダリングする方法を指定します。たとえば、ビューポートのメタデータで、ブラウザのビューポートの高さと幅、最初のウェブページのスケール、さらにはターゲット画面の密度を指定できます。

    例:

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        

    Android デバイスでビューポートのメタデータを使用する方法については、ウェブアプリからの画面のターゲット設定をご覧ください。

  5. 縦長のレイアウトを使用する

    ユーザーがウェブページを移動している間、左右にスクロールしないで済むようにします。ユーザーにとって上下にスクロールするほうが簡単であり、ウェブページがシンプルになります。

  6. レイアウトの高さと幅を match_parent に設定する

    WebView オブジェクトの高さと幅を match_parent に設定すると、アプリのビューサイズが適切に調整されます。高さを wrap_content に設定すると、サイズ設定が適切でなくなるため、Android 4.4(API レベル 19)以下を対象とするアプリでは、下位互換性を維持するために HTML ビューポート メタタグが無視されます。同様に、レイアウト幅を wrap_content とする設定はサポートされていないため、WebView は代わりに親の幅を使用します。このような動作であるため、WebView オブジェクトの親レイアウト オブジェクトの高さと幅が wrap_content に設定されていないことを確認することも重要です。

  7. 複数のファイル リクエストを回避する

    通常、モバイル デバイスの接続速度はデスクトップ パソコンよりもはるかに遅いため、ウェブページの読み込みをできるだけ速くする必要があります。これを高速化する方法の 1 つとして、スタイルシートやスクリプト ファイルなどの余分なファイルを <head> に読み込まないようにすることが挙げられます。モバイル デバイスでのページの読み込みを最適化するには、Google の PageSpeed Insights でモバイル分析を実施することをおすすめします。アプリのパフォーマンスを最適化する場合は、PageSpeed Insights のルールをご覧ください。

優れたモバイルウェブ アプリケーションの作成方法について詳しくは、W3C の Mobile Web Best Practices をご覧ください。ウェブサイトの速度を改善するその他のガイダンス(モバイルおよびデスクトップ用)については、速度に関する Google のチュートリアル(ウェブの高速化)をご覧ください。