（この記事は Andi Pavllo が 2017年11月15日に The Web Tub に投稿した Choosing the right Map Integration for your Cordova App の翻訳です。）

モバイルアプリの中には、地図機能が含まれているものが数多くあります。使用目的に合った地図機能を提供することができれば、ユーザー体験を良くするだけではなく、収益の増加、アプリの評価の向上などにもつながります。

地図情報を提供してくれるサービス（以下「地図情報提供サービス」と呼称）を選定するときには、次のような事柄を考慮します。

  • OSSまたは特定のベンダー製：地図の精度と詳細さに関しては特定のベンダーが開発に携わっている地図の方が優れているかと思います（たとえば、Google Maps）。カスタマイズに関してはOSSの方が自由度が高いかと思います（たとえば、OpenStreetMap では地図の改編が行えます）。

  • パフォーマンス：各地図情報提供サービスは、特定のOSやデバイスに対して異なる最適化処理とAPIを提供する場合があります。よって、地図の選定においては対象となるユーザー、使用目的、実装方法を考慮する必要があります。

  • 費用：ほとんどの地図情報提供サービスは無料で使用できますが、高度な機能を使用する場合や高負荷が見込まれる場合には有料プランに切り替える必要があります。よって、サービスを選択する場合には、あらかじめ将来の予測を立てておく必要があります。

  • 利用可能な機能：基本機能のほかにアドバンス機能も提供している地図情報提供サービスもあります。

  • 運用（メンテナンス・更新）：世界の地形は常に変化していますので、それに応じて地図も適宜更新される必要があります。また、地図の更新だけでなく、新たなモバイル技術やマッピング技術（たとえば、ガリレオ衛星測位システムなど）をサポートしてくれるか否かも考慮すべきかと思います。

上記以外にも、Cordovaアプリに地図機能を組み込むときにはCordovaプラグインまたはJavaScript APIのどちらを使用するかも大事な検討事項です。

そこで、この記事では広く知れ渡っている地図情報提供サービスとCordovaプラグイン（およびJavaScript API）を組み合わせてそれぞれの使い勝手を検証し、Cordovaアプリに最も適した地図とその実装方法を皆様に共有します。

地図情報提供サービスの検証 ― CordovaプラグインまたはJavaScript APIを使用

検証方法

CordovaプラグインまたはJavaScript APIの使い勝手を比較するにあたり、ここでは特定のベンダーが開発に携わっている地図情報提供サービスとオープンソースの地図情報提供サービスの両方を使用して検証を行います。機能性に関しては個人の好みが大きく分かれるので、検証は機能性ではなくパフォーマンスに焦点を当てます。
ベンダー製の地図情報提供サービスとしてはGoogle Mapsを使用し、オープンソースの地図情報提供サービスとしては Mapbox GL を使用します（OpenStreetMapを基礎としているサービスを候補として探しました）。Mapbox GLの選択理由としては、機能が充実しており、WebGLを使用してベクトルタイル形式（Vector Tile）で地図が描画されており、またスタイルもカスタマイズできるからです。
地図情報提供サービスは多数ありますので、お好みに合ったサービスを適宜ご利用ください。

地図情報提供サービスが決まりましたので、使用するCordovaプラグインとJavaScript APIを選びます。
両サービスの提供元が作成した公式なCordovaプラグインはありませんので、Cordovaプラグインに関してはサードパーティー製を使用します。今回は cordova-plugin-googlemaps v2.0.11 と cordova-plugin-mapbox v1.2.3を選択します。
JavaScript APIに関しては公式に提供されている Google Maps JavaScript API v3 と Mapbox GL JS v0.41.0 を選択します。

サンプルサプリの作成にはMonacaを使用しています。他のIDEや純正のCordova SDKを使用しても開発はできますが、Monacaではデバッガーが提供されておりリアルタイムでアプリを検証できるのでお勧めします。正直にいうとMonacaの開発には私も携わっています（笑）。サンプルアプリはこちらの GitHubレポジトリ から入手できます。または、Monacaのダイレクト・インポート機能を使用してMonacaクラウドIDEに直接インポートすることもできます。ダイレクト・インポート機能を使用する場合には、こちらのURL をクリックして表示された画面上の指示に従ってください。

アプリを実際に起動させるためには以下の初期設定を行う必要があります。

初期設定

どちらの地図情報提供サービスを利用する場合でもAPIキーが必要となります。MapboxではAPIキーは常に1つとなりますが、Google Mapsを商用利用する場合、モバイルのプラットフォーム毎にAPIキーを分ける必要があります。たとえば、iOSとAndroidをターゲットとする場合、各プラットフォーム用のAPIキーをそれぞれ作成しておく必要があります。詳細は、プラグインのドキュメントまたは地図サービスのサイト上で確認できます。
設定に関しては、私はMapboxの方が直感的でわかりやすく感じました。Google Mapsの方はドキュメントが膨大で必要な箇所を一読するだけでも一苦労でした。

次の手順（APIキーの設定）ではMonacaを使用していますので、Monacaをお使いの方はこのまま読み進めてください。Monaca以外の環境を使用してAPIキーの設定を行う場合は、お使いの開発環境のドキュメントを参照して設定方法をご確認ください。

Monacaのダッシュボードを開いて［新規プロジェクトの作成］を選択し、次に［Onsen UI V2 JS Tabbar］テンプレートの［作成］ボタンを選択します。作成したプロジェクトを開き、設定＞Cordovaプラグインの管理 を選択して、前述の2つのCordovaプラグインをインポートします。インポート後、各プラグインの 設定 画面を開き、あらかじめ入手しておいたAPIキーを次のように設定します。

Mapbox向けプラグイン

  • ACCESS_TOKEN=xxxxxxx

Google Maps向けプラグイン

  • API_KEY_FOR_ANDROID=xxxxxxx
  • API_KEY_FOR_IOS=xxxxxxx
    ※ 対象とするプラットフォームのAPIキーのみを設定します。たとえば、Android向けアプリの場合、iOS向けのAPIキーを設定する必要はありません。

設定が完了したら、カスタムビルド版Monacaデバッガーをビルドします。このデバッガーを使用すればリアルタイムでアプリを検証することができます。Android向けのカスタムビルド版デバッガーをビルドする場合には、メニューから ビルド＞Androidアプリのビルド を選択して、次に カスタムビルドデバッガー を選択します。ビルド完了後、端末にインストールします。これでデバッグの準備が整いました。これ以後、コードに変更を加えた場合には、保存時に端末側にも最新のコードが自動的に反映されます。

検証前に立てた予想

Cordovaプラグインを使用する場合は、一般的に、ピュアなJavaScriptを使用する方法よりも地図が高速にレンダリングされ、またネイティブのSDKが提供している機能もすべて利用できるため、パフォーマンスの劣化がなく、より円滑な動作が期待できます。一方、JavaScript APIの場合は、より簡単に組み込みとメンテナンスが行え、モバイル端末とウェブブラウザの両方でも支障なく動作することが予想できます。

注意事項

Mapbox＋Cordovaプラグインに関しては GitHubのIssue で報告されている問題があります。この組み合わせでは、ある特定のコンテナへの地図のレンダリングがサポートされていません。この制限により、たとえこのプラグインを使用したとしても期待どおりの動作が望めない場合もでてきます。このため、今回はこの組み合わせは選択肢には入れず、残りの3つの組み合わせで検証を行います。

サンプルアプリの構築

次はJavaScript APIのAPIキーを設定します。JavaScript APIのキーはコード内に直接指定します。www/index.html を開き次のコードを追加してください。

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js''></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY&callback=initGoogleMapsJS">
</script>
<script>
    ons.ready(function() {
      // Provide your access token
      L.mapbox.accessToken = 'YOUR_MAPBOX_KEY';
    });
</script>

地図の表示方法を解説します。このサンプルアプリでは Onsen UIタブバーのテンプレート を使用し、以下の3パターンの組み合わせに対して別々のタブを割り当てます。

  • Google Maps + Cordovaプラグイン
  • Google Maps + JavaScript API
  • Mapbox + JavaScript API　

この方法であれば、地図の切り替えやパフォーマンスの検証が簡単に行えるかと思います。

Google Maps + Cordovaプラグインを利用する場合には、注意事項が1つあります。この組み合わせでは地図をHTML要素として表示するのではなく、ネイティブビューを使用して表示しています。つまり実際の地図はHTMLコンテンツの「下」に作成されています。よって、地図を透過表示できるようにページの背景を透明にしておく必要があります。Onsen UIを含む多くのUIフレームワークでは背景色が白にされていることはまれですが、場合によってはCSSの修正が必要になることを心に留めておく必要があります。私が検証したところ、この組み合わせに関しては問題となりそうな点はほかに見当たりませんでした。

どちらのサービスも、JavaScript APIを使用した地図の組み込みは簡単でした。地図を表示するためのコンテナを定義しておき、地図の初期化時にそのコンテナを指定するだけで地図を利用できました。

検証結果

今回はパフォーマンスとユーザー体験に着目して比較検証しています。
今回検証した3つの組み合わせに関しては、アプリを起動してから地図がレンダリングされるまでの時間に大きな差はありませんでした。タブを切り替えた時の表示も滑らかで画面遷移の速度にばらつきもありませんでした。Cordovaプラグインに関しては、コンテナが表示された後チラツキが若干確認されましたが、ユーザー体験を著しく損なうほどではありませんでした。
地図上で他の地点への移動する際には、Cordovaプラグインの方が滑らかに感じました。おそらく、ネイティブ側で地図があらかじめレンダリングされているため、このように感じられるのかと思います。タッチ操作に関しては両サービスのJavaScript APIの方が反応が良く、Cordovaプラグインは操作に反応しないときもありました（特にピンチイン・アウト操作による地図の縮尺）。

今回検証した組み合わせのいずれにも自動キャッシュ機能は提供されていませんでした。この機能があれば、アプリの起動・終了が頻繁に起こる場合でもロード時間を減らしてくれるでしょう。ベクトルタイルを採用して手動でキャッシュ制御を行うように作り込むこともできますが、そのような作り込みはGoogle Maps＋CordovaプラグインとMapbox GL＋JavaScript APIの組み合わせの場合にのみ行えます。
また、これらの組み合わせ（Google Maps＋CordovaプラグインとMapbox GL＋JavaScript API）では、アニメーション機能も利用できます（Google Maps＋JavaScript APIでは利用できません）。アニメーション機能を使うことで、たとえば、地図上の特定の場所でピンチイン・アウトを行った場合、ユーザーの操作スピードに応じた速度で地図をズームインまたはアウトできるようになります。アニメーション機能を試しに実装してみたところ、描画時の滑らかさを向上させる補助的な手段として役立つことが確認できました。

結論

それぞれの組み合わせを検証したところ、際立って良かった組み合わせはないように感じました。それぞれ良いところと悪いところがあり、最低限の機能は揃っています。

上記では触れませんでしたが、その他の注意すべき点に関して次に述べます。
まず、状況次第で検証結果が違ってくる場合が考えられます。JavaScript APIは互換性・実装方法・メンテナンスの点で優れており、CordovaプラグインはハードウェアやOS側の機能へもアクセスが可能で高いパフォーマンスが見込めます。しかしいずれもOSや端末との相性次第でパフォーマンスが劣化することは十分考えられます。

また、サービスの提供元がCordovaプラグインやAPIを提供しているか、利用できるCordovaプラグインがサードパーティー製のみかなども考慮すべき点です。たとえば、Google MapsとMapboxは公式なCordovaプラグインを提供していません。今回検証したGoogle Maps向けのCordovaプラグインに関してはなんら問題はないように感じましたが、Google Mapsが提供しているすべての機能へ対応しているか、新たなネイティブSDKがリリースされた場合に互換性対応をしてくれるか、などに関しては保証がありません。現時点では、継続したサポート・メンテナンスを受けられ、適度なパフォーマンスも見込めるJavaScript APIを使用した方が安全なように思えます。

タイルの扱いに関しても考慮すべき点があります。高度なカスタマイズが必要となる場合、多様なオプション（キャッシュ制御、地図の拡大・縮小、3D表示など）が使用できるベクトルタイルが最も良い選択肢となるかと思います。逆に高度なカスタマイズの必要がないのであれば、従来の画像形式のタイルでも良いでしょう。

個人的には、将来的な発展性とパフォーマンスの点からMapbox GLをお勧めします。しかしGoogle Mapsが悪いというわけではありません。Google提供の地図関連の機能とも連携でき、実用性にも優れているため非の打ちどころはありません。

翻訳者紹介
渡部正和/Masakazu Watabe
フリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。校正など翻訳全般に関するご相談がありましたら watabe08@gmail.com（渡部） まで。