HTML5＋CSS3を使って、iPhone/Android向けにローカルで使える予定表アプリケーションを作りましょう。デザインは図4および図5のサンプルをベースにします。パソコンのWebブラウザで動作を確認する場合には、Google ChromeまたはApple Safariを使ってください。
予定表アプリケーションで用意するユーザーインタフェース画面は、次の二つです。
- 既に登録されている予定の一覧（リスト）表示
- 新規に予定を登録するための入力フォーム
遅い通信回線で快適に使えるようにするための工夫
スマートフォン向けアプリケーションということで、ポイントを押さえておきましょう。一つ目は、通信回線速度が遅く、CPU処理能力が低いスマートフォンで快適に使えるようにするための工夫です。
まずは、アプリケーション実行中に発生するWebページの新たな読み込み（以降、「ページ遷移」と呼びます）が起こらないようにすることで、通信回線速度の遅さやWebページの再描画に起因するレスポンスの悪さを避けます。目指すところは、すべての機能を一つのHTMLドキュメントに実装することです。そのためにWebページの内容を動的に書き換えるAjaxの技術を使います。
今回のアプリケーションでは予定一覧と入力フォームを一つのWebページに同居させます。ただし、スマートフォンの小さな画面に予定一覧と入力フォームを常時表示させておくのは適切ではありません。必要がないときには入力フォームを表示しないことで、小さな画面を有効に利用しましょう。入力フォームの表示/非表示はCSSで実装します。
入力フォームから登録した予定データは、すぐに予定一覧に日付順に表示します。これはJavaScriptを使って動的にWebページの内容を書き換えることで行います。
次に、予定表アプリケーションで扱うデータを、クライアントサイドに保存することで、ネットワークを介したデータのやり取りを抑制します。Webアプリケーションで扱うデータを保存する際には一般的に、PHPなどで記述したサーバーサイドプログラムを使います。ただし、この場合、データはサーバーサイドに保存されますので、データを書き込んだり読み込んだりするときにネットワーク経由でサーバーに接続しなければなりません。
HTML5は新たに、クライアントサイドにデータを保存するためのAPIであるWeb Storageを備えるようになります。今回のアプリケーションではこれを使います。Web Storageについては後述しますが、これまでWebブラウザにデータを保存する際の常套手段であったcookie（クッキー）を使うより、大容量のデータを確実に保存できます。Web StorageのAPIはJavaScriptから利用します。クライアントサイドだけで処理が完結するので、通信やページ遷移が発生しません。
