Lionaroid技術ブログ

Androidやドローンに関する技術的な記事やiRacingなどのシミュレータに関する記事

Webアプリのベストプラクティス

原文(Best Practices for Web Apps - android developer's)はこちら

モバイル端末向けのWebページとWebアプリの開発は、典型的なデスクトップWebブラウザ向けの開発と比べて、異なるチャレンジをしなければなりません。
開発を始めるにあたり、Androidやその他のモバイル端末向けのWebアプリケーションを最も効果的に適用するために、従うべきプラクティスのリストを下記に示します。

1. Webサイトのモバイル専用バージョンにモバイル端末をリダイレクトする

サーバサイドのリダイレクトを利用した、Webサイトのモバイルバージョンへリクエストをリダイレクトする方法がいくつかあります。大抵はWebブラウザから提供されたユーザーエージェントを"検知"することでこれを行います。
サイトがモバイルバージョンを提供するかどうかを決めるには、ユーザーエージェント中に"mobile"文字列があるかどうかを見るだけです("mobile"は様々なモバイル端末に適していることを示します)。
必要であれば、ユーザーエージェント文字列中の特定のOSを識別することも可能です("Android 2.1"のように)。

2. モバイル端末に適切なマークアップDOCTYPEを使う

モバイルWebサイトで最も共通的に使われているマークアップ言語は、XHTMLベーシックです。このスタンダードな言語はモバイル端末上で、Webサイトをうまく動作させる具体的なマークアップとして保証されています。
例えば、先のマークアップ言語はモバイル端末上でパフォーマンスのでない、HTMLフレームやネストされたテーブルは許可されていません。また、DOCTYPEと共に、必ずドキュメントの適切な文字エンコーディングを宣言して下さい(UTF-8のように)。
例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

また、必ず、宣言されたDOCTYPEに対してWebページのマークアップが有効になるようにして下さい。http://validator.w3.orgで提供されているようなバリデータ(検証機構)を利用しましょう。

3. Webページのリサイズに適したビューポートメタデータを使う

ドキュメントの中で、Webページを描画するためのブラウザのビューポートをどのように扱うかを記した、具体的なメタデータを提供すべきです。
例えば、ビューポートメタデータでは、初期Webページのスケールとターゲットの画面解像度に合わせた、ブラウザのビューポートの高さや幅を指定できます。
例:

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

Androidの端末向けビューポートメタデータの使用方法の詳しい情報は、Targeting Screens from Web Appsを参照して下さい。

4. 複数のファイルリクエストを避ける

モバイル端末は一般的にデスクトップコンピュータに比べて接続速度がかなり遅いため、Webページは可能な限り早く読み込みされるように作らなければなりません。スピードアップの一つの方法として、スタイルシートや内のスクリプトファイルのような、外部ファイルの読み込みを避けることが挙げられます。
代わりに、内で直接CSSJavaScriptを記述します(もしくは、ページが完全に読み込まれるまで必要の無いスクリプトをの終わりに記述します)。
あるいは、Minifyのようなツールを利用した圧縮によって、ファイルのサイズやスピードを最適化すべきです。

5. 縦方向のリニアレイアウト(LinearLayout)を使う

Webページをナビゲートするにあたり、ユーザに左右のスクロールをさせることを避けなければなりません。上下にスクロールする方がユーザにとっても簡単ですし、Webページもシンプルにできます。

素晴らしいモバイルWebアプリを作成するさらなるガイドについては、W3CMobile Web Best Practicesを参照して下さい。(モバイルとデスクトップの)Webサイトのスピードアップに関するその他のガイダンスについては、Yahooガイドの Exceptional PerformanceGoogleLet's make the web faster内のスピードに関するチュートリアルを御覧下さい。