第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が定義しているスタイルを使用して、入力内容が不正であることを分かりやすくしてみます。

入力内容の間違いの表示
[画像のクリックで拡大表示]

この先は会員の登録が必要です。有料会員(月額プラン)は申し込み初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら