検証、「HTML5で業務アプリができる」は本当か【前編】
HTML5? それともネイティブ? スマホ業務アプリの作り方4種を徹底比較
スマートデバイス向け業務アプリに最適なのは、Webアプリか、それともネイティブアプリか。それとも、それ以外なのか。主要な4種の実現方法のメリットとデメリットを徹底比較する。
スマートフォンやタブレットといったスマートデバイスを業務で活用するシーンは増え続けています。先行する企業では、メールやスケジュール管理といった定型業務での利用だけでなく、各社のコアビジネスへの活用に焦点が移りつつあります。
一方で企業を悩ませているのが、スマートデバイス向けの業務アプリケーションを実現する方法の決定です。一口にスマートデバイス向け業務アプリケーションといっても、スマートデバイスに直接インストールするネイティブアプリケーション、Webブラウザで動作可能なWebアプリケーションなど、実現方法はさまざまです。
本稿では、スマートデバイスの利点である可搬性や、使いたいときにすぐ使い始めることができる即時性、タッチによる直観的な操作性などに配慮した業務アプリケーションを「モバイル業務アプリケーション」と規定。モバイル業務アプリケーションの実現方法をまとめた上で、各方法のメリットとデメリットを整理していきます。
スマートデバイス活用業務アプリケーションを実現する4つのアプローチ
モバイル業務アプリケーションを作成する際、現在選択できるアプローチとして、以下の4種が挙げられます。アプローチ1以外は、インストール型のアプリケーションとして作成し、配布する形となります。各アプローチには、機能性や非機能性、開発生産性、保守運用性において一長一短があります。
アプローチ1:Web型
Webブラウザで動作するWebアプリケーションとして、モバイル業務アプリケーションを開発するのが「Web型」です。現在は、HTML5の登場により、Webアプリケーションで実現可能な機能や表現力は大幅に広がっています。
アプローチ2:ネイティブ型
AndroidやiOSといったOSにインストールするネイティブアプリケーションとして、モバイル業務アプリケーションを開発するのが「ネイティブ型」です。基本的には、OSごとにネイティブアプリケーションを開発することになります。
アプローチ3:ハイブリッド型
Web型とネイティブ型を組み合わせたハイブリッドアプリケーションとして、モバイル業務アプリケーションを開発する方法が「ハイブリッド型」です。表示や操作性の部分を「WebView」というWebブラウザコンポーネントを使ったWebアプリケーションが担い、端末との連係をネイティブアプリケーションが担います。
ハイブリッド型の開発に利用する代表的なパッケージ化基盤製品としては、米Adobe Systemsが開発する「PhoneGap」やそのオープンソース版である「Apache Cordova」が有名です。米IBMの「IBM Worklight」、アシアルの「Monaca」など、さらに開発環境などを統合した製品/サービスでも利用されています。
アプローチ4: MEAP型
最後に紹介するのは、「MEAP(Mobile Enterprise Application Platform)」と呼ばれるモバイルアプリケーションの統合開発製品を使った開発方法です。開発自体は、各MEAP製品が規定する独自のプログラミング言語を利用し、ソースコードからプログラムに変換する「ビルド」の段階で、端末ごとのネイティブアプリケーションを生み出す方式です。独自のプログラミング言語は、Webサイトでも一般的な「JavaScript」と似た言語が多いようです。
市販のMEAP製品には、米Appceleratorの「Titanium」、米Konyの「Kony」などがあります。
モバイル業務アプリケーションの実現方法を選定する5つのポイント
モバイル業務アプリケーションを実現する際、どのような視点で実現方法を選択すればよいのでしょうか。実現方法を選定する際、ユーザー企業が考慮すべき機能的なポイントをまとめると、以下の5項目に集約できます(この他に開発面でも注目すべきポイントがありますが、今回は除いています)。
- カメラや位置情報など端末付属機器との連係
- オフラインでの利用とオンラインでのデータ同期
- データの見やすさや操作性、タッチ操作への対応
- バックエンドの企業システムとの連係
- 適応保守、運用フェーズでのメンテナンスコスト
この5項目について、各実現方法でどこまででき、何ができないのかを説明していきます。
ポイント1:カメラや位置情報など端末付属機器との連係
機器との連係機能を検討するには、以下の3つの観点が大切です。
- 頻繁に利用する機器との連係
- 特定業務で利用する機器との連係
- タッチ操作以外のユーザー操作の利用
1つ目は、頻繁に利用する機器との連係の考慮です。モバイル業務アプリケーションでは、撮影した現場の写真にメモを添えて業務日報として保存したり、地図情報と連係したり、緯度経度の位置情報を取得したりしたい場合があります。
こうした機能は、基本的には上述した4種のモバイル業務アプリケーションの実現手法全てで実現可能です。実はWeb型でも、ファイル操作に関する「File API」、図形を描く「Canvas API」、現在の位置情報を取得する「Geolocation API」といったHTML5のAPIを使えば実現できます。これらのAPIは、iOS 6.0以降、Android 4.0以降で利用できます。
2つ目は、特定業務で利用する機器との連係です。各OS固有の機能や機器と連係したい場合でも、関連する機能がWebブラウザのAPIとして公開されていなければ、Web型では実装が難しくなります。そのため、ネイティブ型として開発するか、ハイブリッド型として開発して独自プラグインで連係させる必要があります。
例えば、iOSの機能「iBeacon」のように、店舗に設置したビーコン(近距離にあるスマートデバイスへ情報を送信する機器)とスマートデバイスを通信させてマーケティングへの利用を図る場合、あるいはPOS端末など独自のデバイスとスマートデバイスを通信させたい場合などは、Web型を選択することは難しいのが現状です。
3つ目は、タッチ操作以外のユーザー操作の利用です。工場内などでの作業を想定すると、アプリケーションを利用しながら両手を自由に使えるハンズフリー性が重要になります。また高所や危険箇所での作業を想定すると、視線を画面へ向けなくてもアプリケーションが使えるアイズフリー性が求められることもあります。この際、音声による指示や操作が適している場合もあるでしょう。
こうした高度な利用が必要な場合は、現状ではネイティブ型として実装する場合が多いと考えられます。Web型でも実現できないわけではありませんが、現状ではさまざまな課題があります。
Web関連技術の標準化団体であるWorld Wide Web Consortium(W3C)では、HTML5の音声合成/音声認識のAPI「Web Speech API」の検討を進めており、既に一部のWebブラウザは同様の機能を備えています。ただし、使用可能な端末の種類が限られていたり、機能の柔軟性が不足していたりといった課題があるのが現状です。
ポイント2:オフラインでの利用とオンラインでのデータ同期
工場内やビルの地下など、ネットワークがつながらない場所でモバイル業務アプリケーションを利用しなければならない場合、オフラインでの動作が要件に入ります。
Web型でもオフライン動作は可能です。HTML5には、ローカルにデータを格納する仕組みとして、端末にデータを保存する「Web Storage」「IndexedDB」(iOS 8.0以降、Android 4.4以降)を用意しています。また、オンラインでロードしていたHTML5ファイルやCSSファイル、JavaScriptファイルといったWebのリソースを端末にキャッシュしておく「Application Cache」の仕組みがあり、オフライン動作に役立ちます。
ただし、HMTL5のこうしたデータ/リソース保存の機能には、容量の上限があることに注意する必要があります。例えば、iOS 6.x/7.xでは、デフォルトのWebブラウザ「Safari」におけるWeb Storage(データを永続保存する「localStorage」の場合)の容量は5Mバイトです。オフライン時に利用しなければならないデータやリソースの量が多い場合は、ハイブリッド型かネイティブ型を選択することになります。
ポイント3:データの見やすさや操作性、タッチ操作への対応
業務アプリケーションは、個人用アプリケーションと比べて、表示対象のデータや操作しなければならないデータの量が多くなりがちです。さらにそのデータを顧客や取引先に分かりやすく提示する必要があります。表やグラフを効果的に用い、ときに動画などのマルチメディアの表現力を使って、データを効果的に表示、操作可能な機能が求められる場合があります。
操作性に関しては、以下2つの観点で検討します。
- UIの操作感
- 大量データの表示
1つ目は、UI(ユーザーインタフェース)の操作感です。OSやGPUの性能を最大限利用し、いわゆる“ヌルヌル動く”感じを出すには、やはりネイティブ型での実装の方が有利です。Web型でも、Canvas APIやベクトルグラフィックス記述言語「SVG」を用いて、チャート、グラフを表示できます。ただしWeb型は、Webブラウザを通してOSの機能を利用することになるので、どうしてもこうした“ヌルヌル感”を出しにくいのが現状です。
現状を変えるべく、Web型やハイブリッド型の操作性向上を支援する動きもあります。特に最近では、Web/ハイブリッド型向けに、操作性やパフォーマンスに配慮したタッチ操作対応のUIライブラリが幾つか出てきています。こうしたUIライブラリは、「HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ」(ニフティ)などで確認できます。
2つ目が、大量データの表示です。UI部品と同様、高い操作性を確保するためには、Web型よりもネイティブ型の方が有利です。ただし、Web型でもチューニング次第では、ネイティブ型並みのパフォーマンスを出すことができます。例えば、数千ノード、数千エッジからなるグラフ構造のデータに対し、拡縮、展開、検索などの操作をストレスなく実現するWebアプリケーションも実現できています(関連動画:Webアプリケーションにおけるグラフ構造の可視化デモ<出典:新日鉄住金ソリューションズ>)
ポイント4:バックエンドの企業システムとの連係
企業がコアビジネス領域でスマートデバイスを利用する際、モバイル業務アプリケーションは、バックエンドとなる企業システムとの連係が必要となることがほとんどでしょう。そのため、必要なタイミングで、セキュアな経路を使って業務データをやりとりし、さらにはAPI経由でサーバ側の業務ロジックを実行する、といった制御が求められます。
こうした要件を実現するために、以下のような各種製品/サービスが役立ちます(図1)。
- 端末を一括管理する「モバイルデバイス管理(MDM)」
- 既存企業システムとの連係やクラウドサービスへのアクセスをセキュアにする「APIゲートウェイ」
- モバイルアプリケーションの典型的な機能を提供する「Mobile Backend as a Service(mBaaS)
TitaniumやKonyなどマルチデバイス対応の商用MEAP製品は、バックエンドシステムとの連係用アダプターをそろえており、クライアント側機能と組み合わせて利用できるようにしていることもあります。
サーバからのプッシュ通知が要件に入るアプリの場合、Web型では実現が難しいので、ネイティブ/ハイブリッド型やMEAP型から選択する必要があります。プッシュ通知のAPIはiOSとAndroidで異なっていますが、両者に通知する共通APIを提供するサービスも存在します。例えば、米Amazon Web Servicesの「Amazon Simple Notification Service(SNS)」、米Microsoftのクラウドサービス群「Microsoft Azure」の「Notification Hubs(通知ハブ)」などがあります。
ポイント5:適応保守、運用フェーズでのメンテナンスコスト
ネイティブ型を選択し、OSごとにモバイル業務アプリケーションを作り分ける場合、開発時だけでなく保守・運用フェーズにおいても対象OS分のコストが発生します。iOSもAndroidも、年に一度はOSがバージョンアップし、API変更を伴う多くの機能追加や変更がなされます。そのため、開発を外部委託する際には、委託先に相応の技術を持つ要員を継続的に確保できているかどうかが重要になります。
Web型やハイブリッド型でも、OSの進化に追従しなければならないのはネイティブ型と同様です。ただし、HTML5は標準技術であり、Webブラウザベンダー各社はその準拠度合いを競っています。結果として標準への準拠度合いが進み、Webブラウザごとの対応コストは縮小することが期待できます。
MEAP型の大きな利点は、Konyのように、OSのバージョンアップや新規端末への対応をサービスの一環として保証している商用MEAP製品があることです。ただし、さまざまな機能を備えるMEAP製品ほど、ベンダーロックインとの兼ね合いを考慮する必要があります。
Web型以外のアプローチは、全てインストール型のアプリケーションを配布することになります。「Google Play」「App Store」といった公式アプリケーションマーケットを通して配布する場合は、OSによってはアプリケーションの審査を通す必要があり、そのノウハウを獲得する必要があります。
本編で検討したポイントを以下の図2に簡単にまとめました。
本稿では、モバイル業務アプリケーションを構築するための4つのアプローチを説明しました。それぞれに一長一短がありますが、進化の著しさで見た場合に、特に注目すべきなのはWeb型だといえます。スマートデバイスやクライアントPCに加え、ウェアラブルデバイスや、カーナビゲーションシステム、家電に至るまで、HTML5はその活躍の場を増やしています。W3Cが2014年10月28日にHTML5正式版の仕様を勧告したことも後押しし、HTML5を使ったモバイル業務アプリケーションは今後も増えていくことが考えられます。
一方で、正式版勧告後にも周辺の仕様群は日々追加、改良されており、その使いこなしにはノウハウが必要なことも事実です。後編では、「これからの技術」から「今使える技術」へ移りつつあるHTML5を使った、マルチデバイス対応業務アプリケーションでの活用例を具体的に紹介していきます。
執筆者紹介
hifive プロジェクトリーダー 横山 甲(よこやま まさる) 新日鉄住金ソリューションズ株式会社
1972年生まれ。新日鉄住金ソリューションズ システム研究開発センター勤務。アーキテクトとして1000人月規模の企業Webシステム開発の経験を踏まえ、2011年02月より「hifive」の開発を指揮。
Copyright © ITmedia, Inc. All Rights Reserved.
検証、「HTML5で業務アプリができる」は本当か
この記事の著者
関連記事
新着ホワイトペーパー PR
-
技術文書・技術解説
[Jamf Japan 合同会社] MDMだけでモバイルセキュリティは十分? 不足する対策を16項目でチェック -
事例
[Wrike Japan 株式会社] 世界的な家電メーカーが実践する「クリエイティブプロセス効率化」の方法とは? -
事例
[Wrike Japan 株式会社] 世界的テクノロジー企業に学ぶ、プロセス標準化とプロジェクト納品自動化の秘訣 -
事例
[Wrike Japan 株式会社] ソニー・ピクチャーズ テレビジョンに学ぶ、次世代サービスデリバリーのヒント -
事例
[Wrike Japan 株式会社] ソミック石川に学ぶ、ICT浸透後に直面した「工数管理」の課題と解決策
こんなメディアも見られています
TechTargetジャパンに関連する情報をお探しであれば、こちらのメディアもお役に立てるかもしれません。
ベンダーコンテンツ PR
From Informa TechTarget
SpecialPR
アクセスランキング
-
1
「データストレージの活用方法」に関するアンケート
-
2
脱VMwareの前提が崩れる BroadcomのVDDK公開停止で確認すべき点
-
3
「Microsoft 365」が乗っ取られる 跡形もなくMFAを破る手口
-
4
AI全部入り「Microsoft 365 E7」に企業が二の足を踏む訳 移行意向はわずか4%
-
5
【基本情報技術者試験】「デュプレックスシステム」と「デュアルシステム」の違いは?
-
6
「VMware離れ」は本当か 3000社がVCF 9にかじを切った現実的な理由
-
7
100億円の「Linux更新」を回避 みずほ銀行が選んだ“おきて破り”のRHEL延命策
-
8
「Microsoft一択」で本当にいいのか 知らぬ間にライセンス費用が膨らむ真相
-
9
GitHubが指摘 AIが書いた「おそらく動くコード」が招くシステム崩壊
-
10
なぜOpenAIやAnthropicのAIは「脱走」したのか 情シスが迫られるエージェント統制
ホワイトペーパーランキング PR
-
1
生成AIのハルシネーションを防止 回答精度を高めるセマンティックレイヤーとは
-
2
5回聞くだけじゃ足りない? トヨタ式「なぜなぜ分析」の正しい実践方法
-
3
AIエージェントで多様な日常業務を効率化するための入門ガイド
-
4
インシデント対応工数を約3割削減、東京ガスの事例に学ぶ監視体制刷新のコツ
-
5
「脱Excel」か「Excel快適化」か? 現場にやさしい業務改善の進め方
-
6
マンガで解説:「ゼロトラスト」「SASE」の必要性とメリット
-
7
5分で分かる「セキュア大容量ファイル転送サービス」の機能とメリット
-
8
情報セキュリティ対策早分かりガイド:25の自社診断で弱点と解決策を理解
-
9
国税庁の次世代基幹システム「KSK2」稼働開始に向けて、対応すべき変更点とは?
-
10
AIが「わざわざ使うツール」になっていない? 業務で自然に使う導線にする秘訣
TechTargetジャパン SNS
インフォメーション
注目情報をチェック
TechTargetジャパンをフォロー