今回は筆者が属する新日鉄住金ソリューションズが、これまでに実際の案件で開発した、あるいは提案の際にプロトタイプ開発した中から、以下9種のモバイル業務アプリケーションを紹介します。

1. 営業支援：外出先での顧客情報の参照、訪問履歴の更新
2. 顧客関係管理（CRM）／顧客カルテ：対面販売・接客時の商品説明や見積もりの作成、POSシステムとの連係
3. 企画提案：棚割りレイアウトの提案支援
4. 店舗巡回：店舗の巡回、自社製品の補充、陳列状態の確認
5. 工場点検：工場内設備の点検
6. ワークフロー：すき間時間の活用、移動中の承認手続き
7. ダッシュボード：経営状態、在庫状態、施設の稼働状況などを1画面で把握
8. マイクロラーニング：通勤中などのすき間時間を利用したスキルアップ
9. カタログ・ドキュメントビュワー：大量ドキュメントの電子化による利便性の向上

例1：営業支援

　可搬性が高いスマートデバイスは、外出が多い営業スタッフを支援するのに非常に適しています。例えば外回りの営業活動を支援するシナリオでは、営業スタッフの現在地から徒歩で回れる顧客オフィスの場所を示したり、訪問状況に応じて訪問先を絞込んだりできます。

　こうした営業支援を実現するモバイル業務アプリケーションも、Web型で実現可能です。鍵となるのが、現在位置を取得するHTML5のAPI「Geolocation API」です。これを使うと、「Google Maps」をはじめとするオンライン地図サービスと連係し、地図上に効率的な訪問ルートを提示したり、初めて訪問する場所の道案内をすることを可能にします。また、今までは一度オフィスに戻ったりノートPCを立ち上げないとできなかった、訪問履歴の確認や更新も出先で素早くできるようになります（図1）。

例2： CRM／顧客カルテ

　1人ひとりの顧客について、過去の購買、訪問、接客履歴などをまとめたものを「顧客カルテ」などと呼ぶことがあります。例えば、予約来店型のショウルームなどで、この顧客カルテを現場で確認できるようにすれば、店頭スタッフが顧客の嗜好に合ったセールストークをしたり、サービスを提供しやすくなります。仮に人事異動などでスタッフが変わっても情報は引き継ぐことができるので、チームでの接客が可能になり、サービスレベルの向上が期待できます。

　こうした顧客カルテも、Web型のモバイル業務アプリケーションとして実現可能です。具体的には、アプリケーションの操作中にもバックグラウンドでサーバ側のデータを更新する非同期通信などで構成される技術群「Ajax」を使い、POSサーバからリアルタイムでデータを取得。端末にデータを保存する「Web Storage」を使い、オフライン時でもデータを参照可能にします（図2）。

例3：企画提案

　クライアントPCで事前に資料を作成し、紙に印刷して現場に持参する――。こうした日常的な業務も、スマートデバイスの利用でより分かりやすく、柔軟なものに変えることができます。例えば、現場で自動販売機の棚割り（商品のレイアウト作業）をする際、現在の販売状況を確認しながら作業ができれば、設置場所や利用状況に応じたよりきめ細かな棚割りが可能になります。

　こうした業務を支援するモバイル業務アプリケーションも、Web型で実現できます。上述のAjaxを利用して、在庫管理システムや販売管理システムからデータを取得して画面に表示。サーバからデータを取得し、昨年同時期のレイアウト情報に加え、販売を伸ばしている他の自動販売機のレイアウト情報を参考にしながら、レイアウトの作業を進めることができます。Web Storageを使えばオフライン時の利用も可能です。

　さらにドラッグ＆ドロップの操作を実現する「Drag and Drop API」を利用し、画面で自由にレイアウトを変更するなど、ネイティブ型と同様の操作性を実現することも可能です。自動販売機のオーナーと話し合いながら、最適なレイアウトを検討するといったことも容易になります（図3）。

例4：店舗巡回

　店舗や営業所を巡回して情報を配布したり集約したりする業務に、これまで携帯電話や専用端末を活用していた企業も少なくないでしょう。例えば、小売り店舗における自社商品の販売状況を社内報告する業務などです。こうした業務に利用している端末をスマートデバイスに置き換えれば、アプリケーションの高機能化や端末のコストダウンが容易になります。

　用途の一例として、営業スタッフが売り場の状態を社内に報告する業務があります。こうした機能を持つモバイル業務アプリケーションも、Web型で実現できます。ファイル操作に関するAPIである「File API」を利用すれば、スマートデバイスに内蔵のカメラで撮影した画像を読み込み、売り場の状態を写真を交えて詳細に報告することを可能にします。さらに、画像を描画する「Canvas API」により、撮影した写真の上に手書きでメモを書く機能も実装可能。写真とメモの組み合わせで、より分かりやすく説明できます。

例5：工場点検

　工場における各種点検作業のように、日常の点検業務も、モバイル業務アプリケーションを使って効率化できます。今まで事務所に戻ってから作成していた点検報告書も、スマートフォンやタブレットを現場に持ち込んでその場で作成したり、仮入力したりすることを可能にします。

　File APIを使ってカメラで撮影した画像が添えられるようにしたり、Canvas APIで画像に手書き情報が加えられるようにしたりと、より詳細な報告ができる機能を盛り込むこともできます。必要に応じてマニュアルを表示するなどの付加機能も実現できます。現場での作業項目をチェックリスト化し、画面をタッチして順にチェックを入れるような仕組みも盛り込めば、作業ミスの防止や安全性の向上にもつながるでしょう。

　端末にデータを保存する「Indexed Database API」（IndexedDB API）やWeb StorageといったAPIを使えば、ネットワークにつながらない場所でも報告内容を作成し、端末に保存できます。報告内容のアップロードはオンライン状態になってから実行します。

例6：ワークフロー

　すき間時間の活用は、スマートデバイスが活躍する代表的な業務効率改善シナリオの1つです。出先のちょっとした空き時間に購買申請をしたり勤務実績の登録をしたりする、といった例が挙げられます。ワークフローの承認作業など内容の確認がメインで、かつ素早く応答しないと全体の生産性が下がる業務では、スマートフォンをシステムに組み込むことが特に有効でしょう。

　このタイプのシナリオでは「必要な情報に素早くアクセスし判断できること」が重要視されます。CSS3の「Media Queries」を使えば、スマートデバイスとクライアントPCで画面のレイアウトや情報量を変えることも可能です（図6）。できるだけ1画面内に必要な情報が表示されるようコンパクトな画面設計にしたり、グラフやチャートなどを使って直観的にデータを把握できるよう表現を工夫すれば、より使いやすく効率のよいシステムにできるでしょう。

例7：ダッシュボード

　経営ダッシュボードや株式／為替の値表示など、刻々と変化する各種情報を1画面でリアルタイムに把握したい、という要望もよく聞かれます。いつでもどこでも最新のデータを確認したいというニーズに応えるには、OSに依存せず状況に応じてさまざまな端末で利用できる、Web型のモバイル業務アプリケーションが適しています。

　サーバとクライアント間の双方向通信を実現するAPIである「WebSocket」や「Server-Sent Events」、Ajaxのポーリングといった手段を使い、画面表示値の更新が可能です。SVG画像やCanvas APIを使えば、グラフやチャートも問題なく表示できます。また監視を主とする業務では、1画面で全体像を俯瞰できるようにポートレット（画面部品）形式の画面構成を取ると、従業員にとって使いやすくなります。Drag and Drop APIでドラッグ＆ドロップによるポートレットの移動、CSS3のMedia Queriesで画面サイズに応じた表示の切り替えを可能にします（図7）。

例8：マイクロラーニング

　通勤中など10～15分程度の短い時間で学習を進める「マイクロラーニング」を採用する動きがあります。動画再生などスマートデバイスの高い表現力を生かし、理解度を向上させようという狙いです。

　HTML5の「video要素」「audio要素」を使えば、Web型のモバイル業務アプリケーションでも動画や音声を再生したり、CSS3を使ったアニメーションで画面効果を加えることも可能です。教材や学習ログといったデータは、Web Storage APIを使えばローカルに保持できます（図8）。

例9：カタログ・ドキュメントビュワー

　かさばりがちな営業カタログやマニュアルといった書類を電子化する取り組みは、タブレットの代表的な用途として多くの企業が進めてきました。そこで問題となるのが書類データのダウンロードです。従業員が出先でCADデータや地図などの大きな画像データを一度にダウンロードして参照しようとすると、表示に時間がかかったり、取得中に通信が一度途切れてもう一度最初からダウンロードしなければならなくなったりする場合もあります。

　Web型のモバイル業務アプリケーションで、こうした問題に対処できるようにする動きがあります。具体的には、拡大率に応じて適切な解像度の画像に自動的に切り替えたり、1枚の大きな画像を小さい単位に分割し、スクロール位置に応じて必要な部分だけをサーバから取得して表示してくれるライブラリが存在します。JavaScriptのライブラリ「OpenSeadragon」がその一例です。用途に応じてこうしたライブラリを使うことで、レスポンスのよいアプリにすることができるでしょう（図9）。

---

　本稿では、HTML5の技術を用いたモバイル業務アプリケーションの具体例を紹介してきました。今回紹介した例は、HTML5の機能・表現力で実現できる業務アプリケーションのごく一部に過ぎません。読者の皆さんが、それぞれの業務において「これができるなら、自分の会社のあの業務に応用できるのでは」と、新たな気付きを得ていただければ幸いです。