NCMBにはいくつかの機能がありますが、アプリと親和性の高い機能としてはプッシュ通知と位置情報機能が挙げられます。デバイスから位置情報を取得し、それをマッピングしたり、自分の今いる場所に近い情報を得たりする際にも位置情報検索が利用できます。
今回はMonacaとNCMBで位置情報検索を行うアプリを作成してみます。初回となる今回は、データストアのスキーマや画面について解説します。
スキーマについて
今回はStationというクラスを用意します。駅名と、その位置情報が入ったクラスです。
仕様について
今回は次の2画面で構成されたアプリになります。
インポート画面
あらかじめ用意してある山手線の各駅の名前と位置情報が入ったJSONファイルを取り込みます。
地図画面
地図画面ではMapbox(Open Street Map)を表示します。タップした状態に合わせて、2つの位置情報検索を実行します。
距離を指定した検索
一度タップするとマーカーが表示されて、その付近(半径2km)にある山手線の駅にピンが立ちます。
範囲の指定した検索
もう一度タップすると、2つのマーカーの間にある山手線の駅にピンが立ちます。
データの扱い
今回はデモアプリということもありますので、駅データは誰でも読み書き可能としています。実際の運用時においては、適切なアクセスコントロールを行ってください。
Mapboxについて
MapboxはOpenStreetMapを使うために必要なサービスです。無料でアカウントの作成とプロジェクト作成ができます。利用量によっては有料になるサービスです。Googleマップとの違いとしては、自分独自のコンテンツを追加してオリジナルの地図を作ったり、公開できるのが特徴となっています。
最近Googleマップは決済設定が必須になっていたり、AppleのMapKitはiOS向けといった状況です。そこでマルチデバイスで、かつフリーでも利用できるMapboxを採用しています。
コードについて
今回のコードは以下のリポジトリにて公開しています。ライセンスはMIT Licenseになりますので、自由にご利用ください。
NCMBMania/monaca_map_app: Monacaで位置情報検索を利用したデモアプリです。
まとめ
今回はアプリの概要を説明しました。次回は位置情報データのインポートについて解説します。