前回は開発を始めるにあたって必要な考え方や、基本となる技術について説明をしました。今回は、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材として、第1回~第5回で紹介してきたHTML5の機能や開発のためのツールをどう使っていくか、順を追って説明していきます。
今回までの連載記事の一覧
- 第1回 HTML5による業務システム開発に踏み出そう
- 第2回 HTML5でここまでできる!入力補助からオフライン実行まで
- 第3回 データ可視化のための三種の神器「チャート&グリッド&図形」
- 第4回 HTML5を使った実際の開発の進め方
- 第5回 HTML5の広がりとこれから
- 第6回 効率良いHTML5コーディングは準備が肝心
- 第7回 HTML5でHello Worldを作って動かしてみよう!(前編)
- 第8回 HTML5でHello Worldを作って動かしてみよう!(後編)
特に、企業システムにおいては、日々の業務の中で入力されていくデータを蓄積し、その中から様々な観点で情報の抽出、比較、視覚化を行っています。本連載でもこの構造に従い、第9回からの連載では入力中心の画面を、その後の連載では検索やデータの表示を中心とする画面をそれぞれ題材として説明していきます。
従業員の日報登録アプリを作る
今回対象とするサンプルアプリケーションのお題は、従業員の日報登録のアプリケーションです。
このアプリケーションでは、日々の業務内容を時間や作業内容とともに登録します。外回りなどのときには、スマートフォンやタブレットから登録できるようにします。
日報の登録には、HTML5で登場した入力フォームのコンポーネントを使用し、入力された内容はJavaScriptで検証します。登録内容はAjaxでサーバーへ送信します。
また、カメラとの連携や、取得した画像のプレビューを表示し、サーバーへ送信する機能も設けます。PCとモバイル両者に対応するために、画面サイズによって見た目を変えられるように、レスポンシブWebデザインを使います。完成版のサンプルアプリケーションはこちらで確認できます。