ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Monaca × NCMBで位置情報検索アプリを作る(その1:画面と仕様について)

f:id:mbaasdevrel:20210706221357j:plain

NCMBにはいくつかの機能がありますが、アプリと親和性の高い機能としてはプッシュ通知と位置情報機能が挙げられます。デバイスから位置情報を取得し、それをマッピングしたり、自分の今いる場所に近い情報を得たりする際にも位置情報検索が利用できます。

今回はMonacaとNCMBで位置情報検索を行うアプリを作成してみます。初回となる今回は、データストアのスキーマや画面について解説します。

スキーマについて

f:id:mbaasdevrel:20210706221323p:plain

今回はStationというクラスを用意します。駅名と、その位置情報が入ったクラスです。

仕様について

今回は次の2画面で構成されたアプリになります。

インポート画面

あらかじめ用意してある山手線の各駅の名前と位置情報が入ったJSONファイルを取り込みます。

f:id:mbaasdevrel:20210706221344j:plain

地図画面

地図画面ではMapbox(Open Street Map)を表示します。タップした状態に合わせて、2つの位置情報検索を実行します。

f:id:mbaasdevrel:20210706221416j:plain

距離を指定した検索

一度タップするとマーカーが表示されて、その付近(半径2km)にある山手線の駅にピンが立ちます。

f:id:mbaasdevrel:20210706221445j:plain

範囲の指定した検索

もう一度タップすると、2つのマーカーの間にある山手線の駅にピンが立ちます。

f:id:mbaasdevrel:20210706221434j:plain

データの扱い

今回はデモアプリということもありますので、駅データは誰でも読み書き可能としています。実際の運用時においては、適切なアクセスコントロールを行ってください。

Mapboxについて

f:id:mbaasdevrel:20210706221459j:plain

MapboxはOpenStreetMapを使うために必要なサービスです。無料でアカウントの作成とプロジェクト作成ができます。利用量によっては有料になるサービスです。Googleマップとの違いとしては、自分独自のコンテンツを追加してオリジナルの地図を作ったり、公開できるのが特徴となっています。

最近Googleマップは決済設定が必須になっていたり、AppleのMapKitはiOS向けといった状況です。そこでマルチデバイスで、かつフリーでも利用できるMapboxを採用しています。

コードについて

今回のコードは以下のリポジトリにて公開しています。ライセンスはMIT Licenseになりますので、自由にご利用ください。

NCMBMania/monaca_map_app: Monacaで位置情報検索を利用したデモアプリです。

まとめ

今回はアプリの概要を説明しました。次回は位置情報データのインポートについて解説します。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。