「地図×モバイル アプリ開発」シリーズの第4弾のハイブリッド アプリ開発※編です。
第1弾から第３弾にかけて、モバイル アプリの開発方法の選択肢、Web/ネイティブによるモバイルアプリの開発について紹介してきました。
第4弾はハイブリッド アプリ開発編ということで、Web アプリとネイティブ アプリ開発を混合した開発方法について紹介していきます。
Web アプリの開発スキルやソースコードを活かしてネイティブ アプリを開発してコストを抑えたい、iOS/Android の両方に対応したアプリを効率的に開発したい等の理由で、ハイブリッド アプリの採用を検討される方も多いのではないでしょうか？
ハイブリッド アプリのテクノロジーには、HTML/JavaScript/CSS で作成した Web コンテンツを描画する WebView を使用する方法と、JavaScript からネイティブ API を呼び出すJavaScript エンジンを使用する方法が挙げられます。
WebView を採用した開発フレームワークには Apache Cordova、JavaScript エンジンを採用した開発フレームワークには Titanium Mobile 等があります。
特に WebView を使用した開発は、既存の Web アプリのソースコードの再利用性が高く、Web アプリ開発と同じ感覚でアプリ開発が行えるため、使用している開発者も多いようです。
そこで、本稿では WebView を利用したハイブリッドアプリ開発について、以下の３つのトピックを紹介します。
- WebView とは何か？
- WebView を採用した開発フレームワーク -PhoneGap/Cordova-
- Cordova を内包した開発環境 -Monaca-
WebView とは何か？
iOS や Android、Windows には WebView と呼ばれる Web ブラウザーのエンジンを使用して Web コンテンツを表示する機能が用意されています。
下の画面は、例として Web ブラウザー ベースの地図アプリを開発するための API である「ArcGIS API for JavaScript 」（以下、JavaScript API）で作成された Web アプリを iOS の WebView で表示した画面です。Web アプリと同じ画面をネイティブ アプリ内で表示できます。
下記は iOS アプリで使用したコード（Swift）です。
<SPAN class="comment token">// URL を設定しリクエストを生成</SPAN>
<SPAN class="keyword token">let</SPAN> request <SPAN class="operator token">=</SPAN> <SPAN class="token function">NSURLRequest</SPAN><SPAN class="punctuation token">(</SPAN>URL<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">NSURL</SPAN><SPAN class="punctuation token">(</SPAN>string<SPAN class="punctuation token">:</SPAN> “https<SPAN class="punctuation token">:</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">/</SPAN>developers<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN>javascript<SPAN class="operator token">/</SPAN><SPAN class="number token">3</SPAN><SPAN class="operator token">/</SPAN>samples<SPAN class="operator token">/</SPAN>widget_toggle<SPAN class="operator token">/</SPAN>index<SPAN class="punctuation token">.</SPAN>html”<SPAN class="punctuation token">)</SPAN><SPAN class="operator token">!</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="comment token">// WebView で URL のページをロード</SPAN>
webview<SPAN class="punctuation token">.</SPAN><SPAN class="token function">loadRequest</SPAN><SPAN class="punctuation token">(</SPAN>request<SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
WebView によるハイブリッド アプリの開発には、Xcode や Android Studio 等の各 OS のネイティブ アプリ開発環境や言語を使用するため、Web アプリ開発者にとっては、ネイティブ アプリの開発スキルも必要となるのがネックです。
次に紹介する PhoneGap/Cordova はそれを補うように Web アプリの開発スキルのみでネイティブ アプリが作れるのが利点です。
WebView を採用した開発フレームワーク -PhoneGap/Cordova-
PhoneGap/Cordova は WebView を利用した代表的なハイブリッド アプリ開発フレームワークです。PhoneGap は Adobe 社が提供する製品で、Cordova は PhoneGap のオープンソース プロジェクトです。
PhoneGap/Cordova を使用すれば、HTML/JavaScript/CSS のコードのみで iOS や Android に対応したネイティブ アプリを開発できることが大きなメリットです。
下図は PhoneGap/Cordova のプロジェクト構成です。「www」フォルダに、Web アプリを構成する .html、.js、.css ファイル等を配置してビルドします。
下記のコードは JavaScript API を使用して地図を表示するためのコードです。
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="comment token">// Cordova が利用可能な状態か確認</SPAN>
document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"deviceready"</SPAN><SPAN class="punctuation token">,</SPAN> onDeviceReady<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">onDeviceReady</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// ArcGIS API for JavaScript</SPAN>
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// 地図の表示</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN>
center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">139.75</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">35.68</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">14</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Cordova の API を使用する場合は、deviceready イベント発生後に処理を実装する必要があります。
JavaScript API を PhoneGap/Cordova で使用するサンプルコード（Esri/quickstart-map-phonegap）が GitHub 上で公開されていますので参考にしてみてください。
Cordova を内包した開発環境 -Monaca-
最後に、Monaca をご紹介します。
Monaca はアシアル社が提供する Cordova を内包したハイブリッド アプリ統合開発環境です。
PhoneGap/Cordova と同様に、テンプレートとして用意された HTML/CSS/JavaScript ファイルにコードを書いて、アプリを開発していきます。
特に Monaca クラウドは Web ブラウザー上での開発やアプリの動作確認が可能なため、すぐに開発をスタートできて便利です。
以下の画面は Monaca クラウド上で JavaScript API の地図アプリをプレビューした状態です。
また、Monaca に搭載された Onsen UI や Cordova のプラグインを使用することで、ネイティブ アプリのような快適な操作性やモバイル特有の機能を容易に実現することができます。
機会があれば、Monaca クラウドと JavaScript API を使用した地図アプリ開発について掘り下げて紹介したいと思います。
本稿では、ハイブリッド アプリを実現するための技術や開発環境として WebView、PhoneGap/Cordova、Monaca の 3 つのトピックについて紹介しました。
いずれも JavaScript API による地図機能の組み込みが可能です。
地図×モバイル アプリ開発
本シリーズ記事では「Web」、「ネイティブ」、「ハイブリッド」の開発方法について紹介してきました。
モバイル アプリの各開発方法はそれぞれ特徴があり、アプリの要件等から適切な開発方法を選択することになります。
ArcGIS では、各開発方法で利用可能な API/SDK を提供しています。
各 API/SDK を使用することで、モバイル アプリに様々な地図機能を組み込むことができます。
ArcGIS の API/SDK にご興味を持っていただけた方は、マップの作成方法や API/SDK の使い方等、地図アプリを開発するまでの一連の流れを、開発リソース集にて紹介していますので、ぜひご覧ください！
※ 本稿で紹介したハイブリッド アプリ開発は、ESRIジャパンでの技術サポートを行っておりません
■関連リンク
