「実践編」であった第9回～第11回では、日報アプリケーションを題材に、業務アプリケーションでよくみられる機能をHTML5を使って実装する方法について説明してきました。

　今回からは「解説編」です。実装編の中で使用しなかったHTML5の要素技術や説明しきれなかった内容について、詳しく説明します。「実践編」では、Webアプリケーションの構成に従い、以下の順で進めました。

  • 画面の構造を定義する（HTML）
  • 画面のレイアウトを定義する（CSS）
  • 画面の操作や、処理を定義する（JavaScript）

　「解説編」でも基本はこの構造に従って進めます。なお、実装を進めていくに当たり、ひな型となるソースコードをこちらのサイトで配布しています。ここからダウンロードし、任意の場所で展開してください（実践編と同じファイルです）。展開したフォルダーのitpro/report/explanation以下に今回用のひな型ファイルが置いてありますので、このファイルを編集して動作を確認してください。サーバーの環境構築は、以下の記事を参考にしてください。

参考記事：手軽にHTML5/JavaScript開発を始めるための環境構築法

完成版のアプリケーションの画面
[画像のクリックで拡大表示]
完成版のアプリケーションの画面
[画像のクリックで拡大表示]
完成版のアプリケーションの画面

画面の構造を定義する

　実装編では、HTML5の新たなコンポーネントである、「HTML5 Forms」「HTML Media Capture」を利用して画面を定義しました。「HTML5 Forms」では、Webブラウザー標準の機能として高機能な入力コンポーネントが用意されており、「HTML Media Capture」では、カメラなどスマートフォンやタブレットのデバイスの機能が利用できるようになったことを説明しました。ここでは、実装編で説明しきれなかった「HTML5 Forms」の機能について説明します。

HTML5 Formsを使った画面の例
HTML5 Formsを使った画面の例
[画像のクリックで拡大表示]