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

モバイル デバイス用のウェブページやアプリケーションの開発には、デスクトップ ウェブブラウザ用のウェブページの開発とは異なり、さまざまな課題があります。Android などのモバイル デバイス向けに最も効果的なウェブ アプリケーションを提供するための方法を以下に示します。

  1. 専用のモバイル版ウェブサイトにモバイル デバイスをリダイレクトします。サーバーサイドのリダイレクトを使用してこれを行う方法はいくつかあります。一般的な方法の 1 つは、ウェブブラウザから提供された User Agent 文字列を「スニッフィング」することです。モバイル版のサイトを提供するかどうかを判断するには、User Agent で「mobile」という文字列を探します。
  2. モバイル デバイス向けに HTML5 を使用します。モバイルサイトで最も一般的なマークアップ言語は HTML5 です。この規格はモバイル ファーストの開発を促進し、さまざまなデバイスでのウェブサイトの動作を保証します。従来のウェブ言語とは異なり、HTML5 ではよりシンプルな <DOCTYPE> と charset の宣言が使用されます。 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. ビューポートのメタデータを使用して、ウェブページのサイズを適切に調整します。ドキュメントの <head> で、メタデータを提供します。メタデータは、ブラウザのビューポートでウェブページをレンダリングする方法を指定します。たとえば、ビューポートのメタデータで、ブラウザのビューポートの高さと幅、最初のページのスケール、ターゲット画面の密度を指定できます。

    次の例は、ビューポートのメタデータを設定する方法を示しています。

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

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

  4. 縦長のレイアウトを使用します。ユーザーがページを移動している間、左右にスクロールしないで済むようにします。ユーザーにとって上下にスクロールするほうが簡単であり、ページがシンプルになります。
  5. レイアウトの高さと幅を match_parent に設定します。WebView オブジェクトの高さと幅を match_parent に設定すると、アプリのビューサイズが適切に調整されます。高さを wrap_content に設定すると、サイズ設定が適切でなくなるため、設定しないことをおすすめします。同様に、レイアウト幅を wrap_content とする設定はサポートされていないため、WebView は代わりに親の幅を使用します。このような動作であるため、WebView オブジェクトの親レイアウト オブジェクトの高さと幅が wrap_content に設定されていないことを確認することも重要です。
  6. 複数のファイル リクエストを回避します。通常、モバイル デバイスの接続速度はデスクトップ パソコンよりも遅いため、ページの読み込みをできるだけ速くする必要があります。これを高速化する方法の 1 つとして、スタイルシートやスクリプト ファイルなどの余分なファイルを <head> に読み込まないようにすることが挙げられます。また、アプリに固有の最適化案について詳しくは、Google の PageSpeed Insights でモバイル分析を実施することをおすすめします。
  7. ファビコンの自動ダウンロードが不要な場合は無効にします。 デフォルトでは、ナビゲーション時にサイトにアクセスするたびに、WebView がファビコンを自動的にダウンロードします。WebView は、ダウンロードした各ファビコンのコピーを 2 つ（Java とネイティブ メモリに 1 つずつ）保持するため、ファビコンのダウンロードを無効にすると、メモリ（WebView インスタンスあたり約 8 KB）を節約し、帯域幅の使用量を削減できます。アプリでファビコンを使用または表示しない場合は、Jetpack Webkit ライブラリの WebSettingsCompat.setDownloadFaviconsEnabled() を使用して自動ダウンロードを無効にします。

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. 保存された状態を管理し、トランザクションの上限を回避します。saveState(Bundle) を使用してライフサイクル イベント中に WebView の状態を保存する場合は、WebViewCompat.saveState() を使用してペイロード サイズの上限を適用し、Android の 1 MB の savedInstanceState 上限を超えないようにします。詳しくは、WebView の状態を効率的に管理するをご覧ください。
  9. 投機的読み込み API を使用して、ネットワーク接続とページの読み込みを最適化します。ナビゲーションのレイテンシを短縮するには、Jetpack Webkit API を使用して、ネットワーク接続とコンテンツを事前に準備します。Profile.addQuicHints を呼び出して、QUIC 経由の HTTP/3 のサポートを事前に入力し、WebView が最初の接続で QUIC をすぐに使用できるようにします。また、Profile.preconnect を使用して、ネットワーク ソケットを事前にウォームアップします。リンク先の URL がわかっている場合や、リンク先の URL がわかっている可能性が高い場合は、Profile.prefetchUrlAsync または WebViewCompat.prerenderUrlAsync を使用して、バックグラウンドでページをフェッチまたはレンダリングします。詳しくは、WebView での投機的読み込みをご覧ください。
  10. ファビコンの自動ダウンロードが不要な場合は無効にします。 デフォルトでは、ナビゲーション時にサイトにアクセスするたびに、WebView がファビコンを自動的にダウンロードします。WebView は、ダウンロードした各ファビコンのコピーを 2 つ（Java とネイティブ メモリに 1 つずつ）保持するため、ファビコンのダウンロードを無効にすると、メモリ（WebView インスタンスあたり約 8 KB）を節約し、帯域幅の使用量を削減できます。アプリでファビコンを使用または表示しない場合は、Jetpack Webkit ライブラリの WebSettingsCompat.setDownloadFaviconsEnabled() を使用して自動ダウンロードを無効にします。

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. 保存された状態を管理し、トランザクションの上限を回避します。saveState(Bundle) を使用してライフサイクル イベント中に WebView の状態を保存する場合は、WebViewCompat.saveState() を使用してペイロード サイズの上限を適用し、Android の 1 MB の savedInstanceState 上限を超えないようにします。詳しくは、WebView の状態を効率的に管理するをご覧ください。

参考情報