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

モバイル デバイス向けのウェブページとアプリケーションの開発には、デスクトップ ウェブブラウザ向けのウェブページを開発するのとは異なる課題があります。Android やその他のモバイル デバイス向けの効果的なウェブ アプリケーションを提供するには、以下を参考にしてください。

  1. モバイル デバイスを、ウェブサイト専用のモバイル版にリダイレクトします。サーバー側のリダイレクトを使用して、いくつかの方法があります。一般的な方法の一つは、ウェブブラウザによって提供されるユーザー エージェント文字列を「盗聴」する方法です。サイトのモバイル版を配信するかどうかを判断するには、ユーザー エージェントで「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. 複数のファイル リクエストを避ける。通常、モバイル デバイスはデスクトップ パソコンよりも接続速度が遅いため、ページの読み込みはできるだけ速くしてください。<head> でスタイルシートやスクリプト ファイルなどの余分なファイルを読み込まないようにすることも、処理を高速化する方法の 1 つです。また、Google の PageSpeed Insights を利用したモバイル解析により、アプリに固有の最適化に関する詳しい推奨事項を得ることもできます。

参考情報