モバイル版 Web アプリケーションを開発するための準備として、jQuery Mobile ベースの実験アプリケーションを作成し、問題点を洗い出す。
対象は、Web ブラウザ上で動作してシステムのクライアント側となる部分 (HTML, CSS, JavaScript) のみとし、サーバー側は範囲外とする。
対象の Web ブラウザは iPhone の標準ブラウザのみとする。ただし、開発時における動作確認の効率化のため、PC のブラウザでもひととおり動作するようにする。
- iPhone の Safari 5.1? 以降
- PC の Google Chrome (開発用)
スマートフォンは PC と比べて処理が遅く、また、通信回線の容量も少ないため、下記の対策を行う。
- ページのファイルサイズを小さくする (HTML だけでなく、裏の JavaScript や CSS も)
- ブラウザのキャッシュが使われるようにする (HTML の静的ファイル化、動的データの条件付き GET 対応)
- ユーザーの操作に対して非同期で、ページ全体でなく一部のみを書き換える (Ajax 方式)
クライアント-サーバー間を疎結合とし、クライアント側の開発をサーバー側から独立して行うことができるようにする。Web サービス API のみに依存し、サーバー側実装には依存しない。
表示内容の動的な組み立てと、ページ遷移の制御を、クライアント側の JavaScript が主体となって行う。
つまり、サーバー側主体による動的 HTML 方式ではなく、クライアント側主体にイベント駆動で Ajax 通信を行う方式であり、 非 Ajax のアプリケーションでサーバー側のプログラムが担っていた機能のうち、MVC の M (Model) はサーバー側に残すが、それ以外の V (View) と C (Controller) のほとんどをクライアント側に移すイメージとなる。
具体的には、ページの静的構造と動的要素を分離し、静的構造を HTML ファイルで定義、その中の動的要素を JavaScript により書き換えていく。動的データのアクセスには下記の2種類がある。
クライアント-サーバー間の通信のうち、動的データの受送信を Ajax により非同期で行う。API には REST スタイルを採用し、応答データの書式は JSON 形式とする。
サーバー側プログラムが存在しない段階でも、通信を含む機能の動作が確認できるように、モックライブラリである jquery.mockjax.js を使用してサーバー応答をシミュレートする。
(可能であれば、) 性能対策として、ブラウザのキャッシュを活用するため、HTTP の条件付き GET に対応する。
- サーバー側において、応答データ自体とともに当該データの最終更新日時を取得し、HTTP の応答ヘッダーに Last-Modified を付加
- クライアント側において、同一 URL の2回め以降の要求時には、HTTP の要求ヘッダーに If-Modified-Since を付加 (ブラウザによる自動処理)
- サーバー側において、応答データの作成前に当該データの最終更新日時を取得し、変化がなければ 304 Not Modified ステータスを応答
データではなくプログラムが変化した場合にもキャッシュを破棄する必要がある。URL に API のバージョン番号を含める ?
永続保存が必要なデータのうち、ユーザー単位であって他ユーザーとの共有がないものは、ブラウザの Local Storage に保存する。
- 一覧の検索/並べ替え設定
- 前回ログインユーザー?