Lesson 05 Webアプリケーションの作成(1) Todoアプリ(後編) - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Webアプリケーション編

2011.10.20 THU

HTML5＋CSS3
次世代Webコーディングの
超・最新動向

Webアプリケーション編

	Lesson 05			Webアプリケーションの作成(1) Todoアプリ(後編)
	制作・文			外村和仁（ピクセルグリッド）

ここでは、HTML5の機能を使ったWebアプリケーションを紹介する。また、HTML5を使ったデモ的なアプリケーションや、機能をサポートしていないブラウザに対しては別の手法で代替えするフォールバックという方法で対応している例もある。

※前編はこちら

Todoの削除機能の実装

次はTodo を削除できる機能だ。これも同じように新しく要素を追加しよう【1】。

まずは削除ボタンの要素をspan 要素で作成する【1】（1）。削除ボタンが押されたときには確認のダイアログを表示するようにしよう【1】（2）。また、削除ボタンには【2】のスタイルをあてておく。これでTodo の削除機能が実装された【3】。

「追加」、「完了状態の変更」、「削除」というTodoの基本的な機能は実装されて、見た目は簡素ではあるがTodoとしては機能している。

しかしこのままでは、リロードすると登録したTodoがすべて消えてしまうという残念なアプリケーションになってしまう。リロードしたりブラウザを閉じたり、PC を再起動したりしても登録したTodo が消えないように、WebStorageを使ってデータを保存する機能を追加しよう。

【1】

【1】

【2】

【3】Todoの削除機能の実装例

localStorageでデータの保存と
復元の処理を実装する

WebStorageには、ブラウザやタブを閉じるとデータが消える「sessionStorage」とブラウザを閉じてもデータが消えない「localStorage」の二つがあるが、今回はブラウザを閉じてもデータは消えてほしくないので「localStorage」を使うことにする。

まず、現在のTodo を保存する処理を考えよう。保存するデータは現在表示されているTodo のテキストと完了の状態を保存しておけばよさそうだ。そこで【4】のような関数で状態をlocalStorageに保存することにしよう。

この関数が実行されると、リストの中の要素の状態を配列にしてlocalStorage に保存する。注意しないといけないのは最後の行の、保存する際にJSON.stringify という関数で配列をJSON の文字列にしているところだ。WebStorage はJavaScript の配列やオブジェクトなどの要素を直接保存することができないので、このようにJSONなどの文字列データにして保存する必要がある。取り出すときはJSON.parseという関数を使えば、JSON 文字列をJavaScript の配列やオブジェクトに戻すことができる。

次に、この関数を呼び出すタイミングを考えよう。Todo を保存するタイミングはTodo のリストが更新されたタイミングだ。今回の機能でTodo のリストが更新されるタイミングは全部で3箇所ある。Todo が追加されたとき、完了の状態を変更したとき、Todo を削除したときだ。それぞれのタイミングでリストの状態を保存すればいい【5】。

しかしデータが保存されただけでは何も変わらないので、ページが読み込まれたときにこのデータを元にリストを復元する処理を加えよう【6】。この処理は、保存したlocalStorage のデータを取り出し、一件ずつaddTodo 関数を使ってリストを追加している。ここで、addTodo 関数に完了かどうかの状態を渡して判定する処理を入れる必要がある【7】。引数が増えているところに注意しよう。

これでリストを復元する処理も実装できたので、JavaScript の処理は以上となる。なお、Google Chromeであれば、localStorage に保存されているデータの一覧や削除、編集などはデベロッパーツールのResources タブから可能で、これは開発中はとても便利なので一度使ってみるといいだろう【8】。

【4】

【4】

【5】

【6】

【7】

【8】localStorageに保存されているデータの一覧や削除、編集

Application Cacheで
オフライン対応

次に、Application Cache を使ってオフラインでも動くアプリケーションにしてみよう。

まずはHTML のhtml 属性に【9】のように指定する。

ここで指定したファイルがキャッシュマニフェストになるので、cache.manifest というファイルをindex.htmlと同じ階層につくり、【10】のように記述する。

今回使っているファイルは4種類だけなので、これですべてのファイルをキャッシュし、オフラインのときでも動作するアプリケーションになる。version1というコメントアウトされた行は、HTMLやJavaScriptのファイルを更新したときに、ここのversion の数字を書き変えることでキャッシュマニフェストを更新し、ブラウザに新しいファイルを取得させるために用意している。

また、キャッシュマニフェストは「text-cache-manifest」というMIMETypeで配信する必要があるため、サーバ側で特に設定されていなければ、【11】のような.htaccess ファイルを置く必要があるかもしれない。

Application Cache はキャッシュマニフェストを更新しないとファイルが更新されないので、開発時に有効にしていると効率が悪いので開発時はApplication Cache は無効にしておいたほうがいいだろう。

Google Chromeの場合はWebStorageと同じように、デベロッパーツールのResources タブからApplication Cache のデータが参照できる【12】。また、アドレスバーに「about:appcacheinternals」と入力することでApplication Cache の一覧や削除ができる【13】ということも覚えておくといいだろう。

今回の実装はここまでだが、日付を登録したり並び順を変更できたりという機能を追加するとTodoアプリとしてかなり実用的なものになるだろう。

【9】