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

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

NCMBとMonaca、Mapbox、国土地理院APIを使った地図メモアプリ(その1:画面の仕様とNCMBの初期化)

f:id:mbaasdevrel:20210904214156p:plain

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

今回はMonacaとNCMB、さらにMapboxや国土地理院APIを使って地図メモアプリを作ります。

利用している技術、ライブラリ

このアプリで利用している技術やライブラリは次の通りです。

今回はMonacaで、Framework7のタブバーのテンプレートを選択しています。

利用するNCMBの機能

  • データストア
    • Memoクラス
      • データ登録
      • データ検索

スキーマについて

今回はMemoというクラスを用意します。メモと、その位置情報が入ったクラスです。addressやaddress1〜3は、国土地理院APIから取得できる住所情報になります。

仕様について

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

地図画面

f:id:mbaasdevrel:20210904214100j:plain

地図画面ではMapbox(Open Street Map)を表示します。タップした場所にポップアップを表示したり、メモの一覧で選択したメモを地図上に表示します。

メモ入力画面

f:id:mbaasdevrel:20210904214113j:plain

メモ情報を入力します。国土地理院APIから取得した住所が表示されます。

一覧画面

f:id:mbaasdevrel:20210904214126j:plain

地図で示されている位置情報付近に紐付けられたメモを一覧表示します。メモを選択すると、地図画面で表示します。

データの扱い

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

Mapboxについて

f:id:mbaasdevrel:20210904214156p:plain

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

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

NCMBの初期化

NCMBのJavaScript SDKは js/app.js にて初期化します。管理画面にてアプリケーションキーとクライアントキーを取得し、それぞれ書き換えてください。

// NCMBの初期化
const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(applicationKey, clientKey);

Mapboxの初期化

Mapboxにて取得したアクセストークンを js/app.js に記述してください。

// Mapboxのアクセストークン
const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

これでNCMBとMapboxの初期化が終了です。

国土地理院API用のJavaScriptファイルを読み込み

国土地理院APIのAPIレスポンスは次のようになっています。

{
  "results": {
    "muniCd": "01102",
    "lv01Nm": "北六条西三丁目"
  }
}

この時の muniCd のコードは https://maps.gsi.go.jp/js/muni.js にあるデータを使って変換できます。そこで、このファイルを www/js 以下に保存し、最初の行に以下を加えます。

const GSI = {};

そして index.html で読み込みます。

<!-- https://maps.gsi.go.jp/js/muni.js -->
<script src="js/muni.js"></script>

ルーティング

Framework7では各パスに対してどの画面を表示するか、ルーティング設定ができます。その内容は js/routes.js に定義してあります。

const routes = [
  {
    path: '/',
    url: './index.html',
  },
  // 一覧画面
  {
    path: '/map',
    name: 'Map',
    componentUrl: './pages/map.html'
  },
  // データ投入画面
  {
    path: '/add',
    name: 'Add',
    componentUrl: './pages/form.html'
  },
  // データ投入画面
  {
    path: '/list',
    name: 'List',
    componentUrl: './pages/list.html'
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

ストア

今回は画面間で共有する変数として、以下を利用します。

  • coords
    位置情報(Webブラウザから取得される、または地図の中心点)
  • memo
    一覧画面で選択したメモ

それをFramework7のストア機能で管理します。これは js/store.js にて定義しています。

// ストア(アプリ内共通変数)
const createStore = Framework7.createStore;
const store = createStore({
  state: {
    coords: {}, // 位置情報(Webブラウザから取得、または地図の中心)
    memo: null, // 一覧で選択されたメモ
  },
  // データの取得
  getters: {
    coords({ state }) {
      return state.coords;
    },
    memo({ state }) {
      return state.memo;
    },
  },
  actions: {
    // 位置情報のセット
    setCoords({ state }, { coords }) {
      state.coords = coords;
    },
    // メモのセット
    setMemo({ state }, memo ) {
      state.memo = memo;
    }
  },
});

ストアは $store.state.coords のようにして取得できます。また $store.dispatch('setMemo', memo); のようにして書き込みできます。

これで初期設定が完了です。

コード

今回のコードはNCMBMania/Monaca_MapMemo: Monacaを使った地図メモアプリですにアップロードしてあります。実装時の参考にしてください。

まとめ

今回は画面の仕様とNCMB、Mapboxの初期化を行いました。次回は地図の表示とデータ登録まで行います。

NCMBは位置情報を扱った検索が簡単にできるので、地図を使ったアプリ開発時にぜひ役立ててください。

中津川 篤司

中津川 篤司

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