検証、「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
-
製品資料
[o9ソリューションズ・ジャパン株式会社] 「改正物流効率化法対策」徹底解説 総物流費を抑制するサプライチェーン戦略 -
製品資料
[o9ソリューションズ・ジャパン株式会社] 「サプライチェーン最適化」実践ガイド:効果的な意思決定を実現する秘訣とは? -
製品資料
[株式会社リンプレス] 非デジタル/IT人材を「自走するDX推進者」に変えるための育成ロードマップ -
市場調査・トレンド
[ワンアイルコンサルティング株式会社] AI時代の組織設計:「判断と責任」を人に残すための2つの原則とは? -
技術文書・技術解説
[ワンアイルコンサルティング株式会社] システムの保守がモダン化を阻む? 「変えない判断」から脱却する方法とは
こんなメディアも見られています
TechTargetジャパンに関連する情報をお探しであれば、こちらのメディアもお役に立てるかもしれません。
ベンダーコンテンツ PR
From Informa TechTarget
SpecialPR
アクセスランキング
-
1
1200万円のSaaS導入を回避 スギ薬局「運用費10万円」のAIエージェント構築術
-
2
ソフトウェア開発生産性向上に取り組む企業は4割 調査で学ぶ「停滞」の正体
-
3
クラウド資格コレクターは評価されない? 年収1000万を分ける“OSの理解度”
-
4
「完璧な設計」なのに3000万円溶けた AWSの失敗事例から学ぶ3つの教訓
-
5
年収700万超エンジニアに共通するスキルと「もっと勉強すべきだった分野」
-
6
なぜMicrosoft製品か Copilotで問い合わせ6割減の企業事例
-
7
100億円の「Linux更新」を回避 みずほ銀行が選んだ“おきて破り”のRHEL延命策
-
8
マルウェアへの対策について、不適切な記述はどれ?
-
9
無料の「Apple Business」で十分? 情シスが陥りがちなポイント
-
10
「配信に1カ月」の代償 カルビーがLINE運用で外部依存を断ち切った理由
ホワイトペーパーランキング PR
-
1
インシデント対応工数を約3割削減、東京ガスの事例に学ぶ監視体制刷新のコツ
-
2
JR西日本ITソリューションズが「監視業務の属人化」を解消した方法とは?
-
3
「Google Workspace」活用事例34選、先進の生成AIによる組織変革の全貌
-
4
DX/AI投資の壁を突破、現代の最高財務責任者が直面する課題と克服のヒント
-
5
「人員を増やす」という選択肢はない 情シスが負の連鎖から抜け出すには?
-
6
Windows PCとMacの選択制で生産性向上 LINEヤフーが実践する運用管理方法とは
-
7
生成AIで文書活用を進めるには? 効率化と安全性をどう両立する
-
8
「問題が深刻化しやすいプロジェクト管理」から脱却する方法とは?
-
9
Linuxのスキルを証明する“激推し”の認定資格はこれだ
-
10
NTTドコモが実践したクラウド統合監視 業務量2倍でも残業削減を実現できた理由
TechTargetジャパン SNS
インフォメーション
注目情報をチェック
TechTargetジャパンをフォロー