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

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

JavaScript SDKのキッチンシンクアプリを作る【位置情報検索編】

キッチンシンクというのは、何かのフレームワークやライブラリがあった時に、その殆どの機能を体験できる仕組みになります。それがあることでフレームワークの全体像が分かったり、何か開発していて困った時に参考とできるコードになります。

元々MonacaとNCMBではアカウント連携機能があるのですが、NCMBからMonacaへ誘導した際にチュートリアルアプリを表示する機能は約1年ほど前になくなっています。チュートリアルアプリはデータの登録をしたり、写真を表示するアプリでした。つまりデータストアとファイルストアが体験できるというものです。アプリ自体はJavaScript SDKのver.1を使っていましたので、今となっては参考にはしづらいものでした。

この記事では旧チュートリアルアプリに変わるキッチンシンクアプリを作っていきたいと思います。ステップを踏んで紹介していきますので、実際に試す際の参考にしてください。今回は位置情報検索を使ったデモの紹介です。

利用するフレームワーク

今回利用しているフレームワーク、ライブラリは次の通りです。

  • Onsen UI
  • Monaca CLI
  • NCMB
  • Bower

今回はOnsen UIをjQueryから使う形で進めています。ライブラリはBower経由でインストールしています。アプリのプレビュー表示を行うのに便利なのがMonaca CLIになります。インストールは Node.js をインストール後、 npm コマンドで行えます。

$ npm i monaca -g

ベースのコード

今回はNCMBMania/kitchensink-monaca: MonacaとJavaScript SDKを使ったキッチンシンクアプリです。にコードをアップロードしてあります。こちらを参考にしてください。ベースはOnsen UI V2 JS Navigationとなっています。

変更点について

まず検索対象になる位置情報が必要です。今回は山手線停車駅の座標一覧 - Qiitaより山手線の各駅の位置情報を使いました。これをwww/resources/yamanote.jsonとして登録してあります。

まず、そのデータをJSONで登録します。

// 山手の線データの取り込み
$(page).find('.import').on('click', function(e) {
  $.ajax({
    dataType: 'json',
    url: '../resources/yamanote.json'
  })
  .then(function(results) {
    let Station = ncmb.DataStore('Station');
    let ary = [];
    for (let i = 0; i < results.length; i++) {
      ary.push(saveStation(results[i]));
    }
    // まとめて処理
    Promise
      .all(ary)
      .then(function(results) {
        // 取り込み完了
      })
  });
});

// すでにデータストア上にデータがあるかどうかを確認して、なければデータを作成する
let Station = ncmb.DataStore('Station');
let saveStation = (station) => {
  return new Promise((res, rej) => {
    Station
      .where({name: station.name})
      .fetch()
      .then(function(data) {
        if (data.name) {
          return res(data)
        }
        var geo = new ncmb.GeoPoint(
          new Number(station.latitude),
          new Number(station.longitude)
        );
        let s = new Station;
        s
          .set('name', station.name)
          .set('geo', geo)
          .save()
          .then(function(e) {
            res(e);
          })
          .catch(function(e) {
            rej(e);
          })
      })
  });
}

次に検索結果の表示先としてGoogleマップを用意します。地図を動かした時にはそこを中心として検索できるようにしています。

let mapDiv = document.getElementById("map");
let currentPosition = null;
let markers = [];
let map = null;

// 初期の地図表示
navigator.geolocation.getCurrentPosition(
  (position) => {
    let geo = position.coords;
    currentPosition = geo;
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(geo.latitude, geo.longitude),
      zoom: 16,
    });
    
    // 地図を動かしたら検索の中心位置情報を変更
    map.addListener("dragend", function(argument) {
      currentPosition = {
        latitude: map.center.lat(),
        longitude: map.center.lng()
      };
    });
  },
  (error) => {
    
});

そして検索ボタンを押した際の処理です。中心点を取得し、そこを中心として3キロメータ以内にある駅の座標を取得します。そしてそれを地図上にマーカーとして立てています。

// 検索ボタンを押した時の処理
$(page).find('.search').on('click', function(e) {
  // 中心を取得
  var origin = new ncmb.GeoPoint(
    currentPosition.latitude,
    currentPosition.longitude
  );
  Station
    // 周囲3キロで検索
    .withinKilometers('geo', origin, 3)
    .fetchAll()
    .then(function(results) {
      // すでにあるマーカーをすべて削除
      for (let i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
      }
      
      // マーカーを立てる
      for (let i = 0; i < results.length; i++) {
        let station = results[i];
        let marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(
            station.geo.latitude,
            station.geo.longitude
          )
        });
        markers.push(marker);
      }
    })
});

mBaaSの位置情報検索を使うと、とても簡単に地図と連携した機能が実装できます。ランドマークになるデータを用意する必要がありますが、スマートフォンを使ったチェックインアプリであればそうした手間もありません。

コードはNCMBMania/kitchensink-monaca: Monaca と JavaScript SDKを使ったキッチンシンクアプリです。にアップロードしてあります。Monacaアプリとして動かすこともできますのでぜひお試しください。