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

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

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

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

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

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

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

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

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

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

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

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