「地図×モバイル アプリ開発」シリーズ第２弾の Web アプリ開発編です。
モバイル アプリ開発におけるプラットフォームの選択における一般的な情報は第1弾にて案内しました。本稿では主に地図や位置情報を扱うアプリ開発において弊社 Web APIを利用するメリット/デメリットや簡単な実装例を紹介していきます。
ArcGIS API for JavaScript
Web ブラウザー ベースのアプリを開発するための API として「ArcGIS API for JavaScript」（以下、JavaScript API）を提供しています。
地図や位置情報の表示だけでなく、分析やデータ編集といった高度な機能が API 提供されているので、位置情報と API 機能を組み合わせてアプリに付加価値を与えることができます。
弊社 JavaScript API は一般的な HTML/JavaScript/CSS での開発が可能ですので、単一のソースコードで Android/iOS の両方の OS に対応できるほか、開発環境の構築の容易さや豊富なサードパーティのフレームワーク/ライブラリの連携などのメリットがあります。
JavaScript で現在位置を取得
モバイル地図アプリというと、やはりデバイス連携のニーズが大きいと思います。そのなかでも、もっとも一般的な GPS や wifi などによって取得される現在位置情報の利用について紹介します。
すでにご存じの方も多いと思いますが、JavaScript では HTML5 で追加された Geolocation API というグローバルな API によって、端末が取得した位置情報を容易に利用することができます。試しに Web ブラウザーの開発者ツールのコンソールに以下のようなコードを入力してみてください。
// Geolocation API で現在位置を取得
navigator.geolocation.getCurrentPosition(function(position) {
// 取得できたらコンソールに表示（緯度・経度）
console.log(position.coords.latitude, position.coords.longitude);
});
そうすると、以下のように現在位置取得の許可を求めるダイアログが表示されます。
これを許可した時点で、コールバックに現在位置（position）のオブジェクトが渡されて、それに含まれる緯度経度を JavaScript 内で利用することができます。
緯度経度さえ取得できれば、JavaScript API で地図上に位置を表示したり、それを検索や分析の入力値として利用したりすることもできます。
モバイル地図アプリ向けの機能をコンポーネントで提供
JavaScript API では Geolocation API を使って現在位置を取得し、地図上にその位置を表示する機能をコンポーネント（esri/widgets/Locate）として提供しています。
このコンポーネントは画面左上のボタン UI と現在位置表示の機能をラッピングしたものになります。以下のようなコードだけでアプリの画面上に現在位置表示の機能を実装することができます。
// 現在位置ボタンの初期化
var locateBtn = new Locate({
view: view
});
locateBtn.startup();
// 地図ビュー上への現在位置ボタンの配置
view.ui.add(locateBtn, {
position: "top-left",
index: 0
});
少し先述しましたが、取得した現在位置を入力値として、そこから徒歩で xyz 分以内のエリアを表示して、そのエリア内にある施設を抽出するといった機能につなげていくことで、現在位置とコンテンツを結びつけた付加価値へ結びつけることもできます。
モバイル向けページ レイアウト構築に役立つオープンソース プロジェクト
モバイル端末の多様な画面解像度に対応したレスポンシブなページ レイアウトを構築したり、タッチ操作でも扱いやすいモバイル向けの UI コンポーネントを利用したり、といったようなモバイル アプリ開発特有のニーズがあると思います。
それらを実現するために採用されているフレームワークで は Twitter 社によって開発された Bootstrap がもっともポピュラーです。
弊社の JavaScript API が Bootstrap と連携するためのライブラリ/フレームワークがオープンソースのプロジェクトとして GitHub 上でメンテナンスされています。
今回ご紹介した JavaScript API は、開発者向けクラウドサービス（ArcGIS for Developers）のアカウントを作成すれば無償で評価・開発に利用できます（個人での非商用利用であれば無償で公開も可）。また、開発リソース集にてアプリ作成までの簡単な手順を紹介していますので、あわせてご覧ください。
次回の「地図×モバイル アプリ開発」シリーズは【ネイティブ アプリ開発編】を予定していますのでご期待ください！
関連リンク
