Monaca クラウドと ArcGIS を使用して地図アプリを作成する

Document created by yuki_ozawaesrij-esridist Employee on Dec 11, 2017Last modified by yuki_ozawaesrij-esridist Employee on Dec 20, 2017
Version 21Show Document
  • View in full screen mode

本記事では、Monaca クラウド ArcGIS API for JavaScript を使用してモバイル地図アプリ開発を始めるための簡単なステップを紹介します。

 

 

はじめに

Monaca はアシアル社が提供する Cordova を内包したハイブリッド アプリ統合開発環境で、HTML/CSS/JavaScript ファイルにコードを書いて、Android や iOS のネイティブ アプリを開発していきます。特に Monaca クラウドは Web ブラウザー上での開発やアプリの動作確認が可能なため、すぐに開発をスタートできて便利です。

ArcGIS API for JavaScript は Web ブラウザー ベースの地図アプリを開発するための API で、地図の表示に加え、検索、編集、分析といった地図機能を容易にアプリに組み込むことができます。

 

 

1. Monaca アカウントの作成

Monaca アカウント(無償)を作成します。アカウントには無償と有償のプランがありますが、本記事のステップは無償プランで試すことができます。

Monaca アカウントの作成:https://monaca.mobi/ja/register/start

 

 

2. Monaca クラウドにサインイン

プロジェクトの管理やコーディングは、Monaca クラウドの Web サイトで提供される IDE で行えます。作成したアカウントで Monaca クラウドにログインします。

Monaca クラウド:https://monaca.mobi/ja/dashboard

 

 

3. Monaca プロジェクトの作成

 

 

  1. サイト上で「新規プロジェクトの作成」をクリックします。
  2. 新規プロジェクトの作成画面で、プロジェクトで使用するテンプレートを選択します。今回行うステップでは Onsen UI のコンポーネントを使用するため [Onsen UI] → [Onsen UI V2 JS Minimun] を選択し、「作成」をクリックします(地図を表示するだけであれば他のテンプレートでも構いません)。Onsen UI はモバイル アプリの開発に特化した UI コンポーネント群を提供する OSS です。
  3. プロジェクト名を入力し「プロジェクトを作成する」をクリックすると、プロジェクト テンプレートが作成されます。
  4. 左側のパネルに作成されたプロジェクト名が表示されます。「開く」をクリックすると、プロジェクトが開きます。
  5. 左側のプロジェクト ツリーの「新規ファイル」アイコン(赤枠)をクリックし、地図表示の処理を実装する app.js ファイルを追加します。

 

 

4. ArcGIS API for JavaScript を使用した地図機能の実装

プロジェクトのコードを更新して、ArcGIS API for JavaScript で地図画面を実装していきます。

 

ArcGIS API for JavaScript の参照

index.html の <head> タグ内部で、<script> タグと <link> タグを追加して、ArcGIS API for JavaScript を参照します。

<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<script src="https://js.arcgis.com/4.4/"></script>

<script> タグは、ArcGIS API for JavaScript を CDN からロードします。数字の部分は API のバージョン番号です。

<link> タグは、ArcGIS API for JavaScript で提供されるコンポーネントのスタイルを含むスタイル シートを参照します。

前のステップで作成した app.js ファイルも併せて参照します。

<script type="text/javascript" src="app.js"></script>

 

モジュールのロード

app.js ファイルで ArcGIS API for JavaScript から固有のモジュールをロードします。

次のコードを使用して、モジュールをロードします。

require([
  "esri/WebMap",
  "esri/views/MapView",
  "dojo/domReady!"
], function(WebMap, MapView) {
  // この後のステップで、マップとビューを作成するコードをここに追加していきます
});

モジュールの説明

  • esri/WebMap:マップの作成に必要なコードをロードする
  • esri/views/MapView:マップを 2D で表示するコードをロードする
  • dojo/domReady!:コードを実行する前に DOM が使用可能であることを確認する(ArcGIS API for JavaScript は Dojo Toolkit をベースに作成されています)

 

 

マップの作成

WebMap インスタンスを作成し、Web マップのアイテム ID を portalItem プロパティに設定します。Web マップとは、背景地図や主題となる地図データを追加し、表示方法などを設定してクラウド上に JSON 形式で保存される Web 上の地図です。Web マップは専用のツールを使用して作成できます。クラウド上に保存された Web マップを使えば、地図上に何をどのように表示するかを一つ一つコーディングする必要がなく、非常にローコストで地図アプリを作成することができます。このステップでは、事前に作成済のむろらんオープンデータライブラリで公開されている室蘭市の避難場所のデータを追加したサンプルの Web マップを使用します。
Web マップでは避難場所の収容人数をシンボルのサイズ(サイズが大きいほど収容人数が多い)で、避難場所の施設の種類をシンボルの色(屋内施設は赤、屋外施設は青)で表現しています。

require([
  "esri/WebMap",
  "esri/views/MapView",
  "dojo/domReady!"
], function(WebMap, MapView) {
  var map = new WebMap({
    portalItem: {
      id: "33b1033fe2d5415482f8d72d939978ec"  // Web マップのアイテム ID を指定
    }
  });
});

 

 

ビューの作成

ビューは HTML 内のコンテナとして提供されるノードを参照し、HTML ページ内にマップを表示します。MapView コンストラクタにオブジェクトを渡してプロパティを設定し、MapView を作成します。

require([
  "esri/WebMap",
  "esri/views/MapView",
  "dojo/domReady!"
], function(WebMap, MapView) {
  var map = new WebMap({
    portalItem: {
      id: "33b1033fe2d5415482f8d72d939978ec"  // Web マップのアイテム ID を指定
    }
  });

  var view = new MapView({
    container: "viewDiv",  // ビューを表示する DOM ノードへの参照
    map: map  // 「マップの作成」のステップで作成した WebMap オブジェクト
  });
});

container プロパティはマップを表示する DOM ノードの名前を設定します。map プロパティは、「マップの作成」のステップで作成した WebMap オブジェクトを参照します。

 

 

ページ コンテンツの定義

次にマップを表示するための HTML を追加します。index.html <body> タグに「ビューの作成」ステップで作成したビューを表示する <div> 要素を追加します。

<body>
  <div id="viewDiv"></div>
</body>

<div> の ID MapView container プロパティに設定した ID と同じにします。

 

 

ページ スタイルの設定

ページのコンテンツのスタイルを設定します。マップを Web ブラウザーに表示させるために、css/style.css に以下の CSS を追加します。

#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

ArcGIS API for JavaScript を使用した地図機能の実装は以上で終了です。Monaca クラウドのサイトの上部タブで「保存」をクリックし、作業内容を保存します。

 

 

 

 

モバイル端末でアプリを確認

作成したアプリは Monaca クラウドのプレビュー画面でも確認できますが、Monaca デバッガーと呼ばれる Android/iOS アプリを使って、実機のモバイル端末でも確認することができます。Android/iOS 端末に Monaca デバッガーをインストールします。

Monaca デバッガー(Android):https://play.google.com/store/apps/details?id=mobi.monaca.debugger

Monaca デバッガー(iOS):https://itunes.apple.com/jp/app/monaca/id550941371?mt=8

 

インストールしたアプリを起動し、Monaca アカウントでログインすると作成したプロジェクト名が表示されます。プロジェクトをタップすると、Monaca デバッガー上で作成したアプリが開きます。地図上で避難場所のシンボルをタップすると、避難場所に関連する情報を確認することもできます。

 

 

 

おまけですが、Onsen UI の segment コンポーネントを使って、背景地図を切り替える機能を追加してみます。index.html の <body> タグを以下のように更新します。

<ons-page>
    <ons-toolbar>
        <div class="center">
            <ons-segment id="segment" style="width: 220px">
                <button>道路地図</button>
                <button>衛星画像</button>
                <button>OSM</button>
            </ons-segment>
        </div>
    </ons-toolbar>
    <div id="viewDiv"></div>
</ons-page>

 

app.js に以下のコードを追加します。WebMap のベースマップに設定できるオプションは、その他にも topo(地形図)、oceans(海洋図)等が用意されています。詳細は WebMap クラスのリファレンスをご覧ください。

    ons.ready(function() {
        document.addEventListener('postchange', function (event) {
            if (event.index === 0) {
                map.basemap = "streets"  // 背景地図を道路地図に変更
            } else if (event.index === 1) {
                map.basemap = "satellite"  // 背景地図を衛星画像に変更
            } else {
                map.basemap = "osm"  // 背景地図をオープンストリートマップに変更
            }
        });
    });

 

Monaca クラウドでプロジェクトを修正すると、Monaca デバッガーにも即座に更新内容が反映されます。Monaca デバッガーでアプリを開き、背景地図を切り替えてみてください。

 

 

完成版のコードこちらで確認できます。

 

 

 

Monaca クラウドと ArcGIS API for JavaScript を使用したモバイル地図アプリ開発のステップの紹介は以上です。

本記事では事前に作成済みのマップ(Web マップ)を表示しましたが、ArcGIS for Developers の無償の開発者アカウントを作成すると専用のツールを使用してオリジナルのマップを作成することができます。また、ArcGIS API for JavaScript には単純な地図表示だけでなく様々な機能が用意されています。ArcGIS を使用した地図アプリの開発にご興味がある方は、ArcGIS for Developers 開発リソース集をご覧ください。

 

※ ArcGIS API for JavaScript を Monaca 及び Cordova 上で使用した際に発生する固有の問題に関しては ESRIジャパンの技術サポート サービスの対象外となります。ArcGIS API for JavaScript のコンポーネントを使用する場合は、事前に検証頂くことをお勧めしております。予めご了承ください。

 

関連リンク

Attachments

    Outcomes