前回は開発を始めるにあたって必要な考え方や、基本となる技術について説明をしました。今回は、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材として、第1回~第5回で紹介してきたHTML5の機能や開発のためのツールをどう使っていくか、順を追って説明していきます。

今回までの連載記事の一覧

 特に、企業システムにおいては、日々の業務の中で入力されていくデータを蓄積し、その中から様々な観点で情報の抽出、比較、視覚化を行っています。本連載でもこの構造に従い、第9回からの連載では入力中心の画面を、その後の連載では検索やデータの表示を中心とする画面をそれぞれ題材として説明していきます。

従業員の日報登録アプリを作る

 今回対象とするサンプルアプリケーションのお題は、従業員の日報登録のアプリケーションです。

完成版のアプリケーションの画面(左:PC、右:スマートフォン)
[画像のクリックで拡大表示]
完成版のアプリケーションの画面(左:PC、右:スマートフォン)
[画像のクリックで拡大表示]
完成版のアプリケーションの画面(左:PC、右:スマートフォン)

 このアプリケーションでは、日々の業務内容を時間や作業内容とともに登録します。外回りなどのときには、スマートフォンやタブレットから登録できるようにします。

 日報の登録には、HTML5で登場した入力フォームのコンポーネントを使用し、入力された内容はJavaScriptで検証します。登録内容はAjaxでサーバーへ送信します。

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

 また、カメラとの連携や、取得した画像のプレビューを表示し、サーバーへ送信する機能も設けます。PCとモバイル両者に対応するために、画面サイズによって見た目を変えられるように、レスポンシブWebデザインを使います。完成版のサンプルアプリケーションはこちらで確認できます。