第9回からは、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材に、HTML5の機能や開発ツールの使い方を解説しています。
Webアプリケーションは
- 画面の構造を定義する
- 画面のレイアウトを定義する
- 画面の操作や、処理を定義する
から構成されます。「実装編」の3回目である今回は、「画面の操作や、処理を定義する」を取り扱います。
前回の記事
JavaScriptを使って画面に機能を追加する
JavaScriptでHTMLやCSSを操作することで、動的に画面の内容を変えられます。また、File API、SVG、Canvasなど、HTML5の多くの機能はJavaScriptのAPIの形で提供されています。そのため、従来に比べてより高機能で表現力が豊かな画面をJavaScriptを使って作れるようになっています。
前回までで日報アプリケーションの画面のレイアウトを整えました。今回は、JavaScriptを使って、アプリケーションに機能を追加していきます。
ここでは、業務アプリケーションでよくみられる例として、以下の機能を日報アプリケーションに追加します。
- 入力内容の検証
- サーバーへ日報を登録
- インジケータでの通信状況の通知、画面のブロック
- 画像の添付、プレビューの表示
なお、第7回で触れたように、複雑なアプリケーションになるに従い、アプリケーションフレームワークを適用することでコードの書き方を統一することは有効です。本アプリケーションのフレームワークとしてはhifive（http://www.htmlhifive.com/）を適用することにしますので、hifiveの書き方に従って、以降はコーディングを行っていきます。HTMLやCSSと同様、JavaScriptも雛形ファイルをindex.jsとして作成していますので、このファイルに実装を追加していきます。
<!-- hifive -->
<link rel="stylesheet" href="../../res/lib/hifive/h5.css" />
<script src="../../res/lib/hifive/ejs-h5mod.js" type="text/javascript"></script>
<script src="../../res/lib/hifive/h5.dev.js" type="text/javascript"></script>
コード例：hifiveの読み込み（index.html 11行目）
<!-- app -->
<link rel="stylesheet" href="css/index.css" />
<script src="js/util.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
コード例：JavaScriptファイルの読み込み（index.html 15行目）
入力内容の検証をしてみよう
入力値の検証はユーザーに間違いを伝えてユーザビリティをあげるだけでなく、システムとして整合性を保つために重要な処理です。HTML5 Formsを使用すると、JavaScriptを使用しなくても検証やエラーの表示ができます。
しかし、実際のシステムでは、もっと複雑な検証をしたり、エラー時の見た目をカスタマイズしたりするため、JavaScriptで検証内容を記述することが多いです。特に今回は、前回使用したBootstrapが定義しているスタイルを使用して、入力内容が不正であることを分かりやすくしてみます。
