|
HTML5＋CSS3 |
Webアプリケーション編
|
| Lesson 02 | Webアプリケーションの作成(1) Todoアプリ(前編) |
|||
| 制作・文 | 外村和仁（ピクセルグリッド） |
| ここでは、HTML5の機能を使ったWebアプリケーションを紹介する。また、HTML5を使ったデモ的なアプリケーションや、機能をサポートしていないブラウザに対しては別の手法で代替えするフォールバックという方法で対応している例もある。 |
Todoアプリの仕様
HTML5 を使ったアプリケーションの実例として、簡単なTodo アプリを実装する。今回サンプルとしてつくるTodoアプリは簡略化のため、【1】のような仕様に限定して実装する。これに加えて、HTML5 を使って【2】のような機能を実装する。
WebStorageを使うことで、サーバに情報を保存する必要がないのでサーバサイドのプログラミングが不要になる。また、Application Cache を使うことでオフラインでも利用できる機能を実装しよう。
【1】Todoアプリの仕様
【2】HTML5の機能
ベースとなるHTMLの作成
まず始めに【3】のようなHTML ファイルを用意し、index.html という名前で保存する。今回のJavaScript のサンプルはjQuery を使って記述するので、jQueryとメインの処理を記述するmain.js を読み込む。スタイルはmain.cssというファイルに記述するのでこちらも合わせてhead内で読み込んでおこう。
【3】
フォームの作成
それではこのファイル内に、まず必要最低限の要素を追加する。必要な要素はTodo と追加するフォームとTodo を表示するリスト、それとアプリケーションのタイトルがあれば十分だろう【4】。これをbody 内に記述しよう。HTMLでのポイントはinput 要素にしている、HTML5 Forms の「placeholder 属性」と「required 属性」だ。placeholder属性はテキストボックスに何も指定していない状態のとき、指定した属性値がグレイで表示され、何を入力するればいいのかというような情報をユーザーに伝えることができる。required 属性は指定すると、入力値が空の場合に実行しようとするとメッセージを表示してくれるようになる【5】。JavaScript でこのような処理を実装することも可能だが、HTMLの属性指定だけでこれができるというのは作業の効率化につながるだろう。
【4】
【5】メッセージの表示
Todoの追加機能の実装
次にmain.js に処理を実装していこう。まずはWebStorageやApplication Cache のことは一旦忘れてTodoの基本機能を実装していく。最初に実装するのはTodo の追加だ【6】。【6】（1） の関数はTodo のテキストを受け取ってリストに追加する関数だ。jQuery を使ったことがあるならばあまり難しい処理ではないだろう。
次に【6】（2）の部分はフォームを送信するときの処理だ。フォームを送信するとテキストボックスに入っている文字列を【6】（1）の関数に渡すことでTodo を追加している。これでフォームを送信するとTodoが追加されるようになった【7】。
【6】
【7】Todoの追加機能の実装例
Todoの完了状態の変更機能の実装
Todo の追加は実装できたので、次に完了状態に変更できる仕組みを作ろう。 【6】（1）の関数の中を変更する【8】。checkbox の要素をつくり、クリックされたとき、checkbox がチェックされている状態ならリストアイテムの要素にcomplete というclass 属性を追加する処理を加えた。class 属性が追加されるだけでは視覚的にわかりにくいので、CSS で完了したことがわかるようなスタイルにしておこう。main.css に【9】を追加する。
これで完了された要素はグレイで打ち消し線が入ったdel 要素のような見た目になる【10】。
【8】
【9】
【10】Todoの完了状態の変更機能の実装例
＞＞目次に戻る
