Monaca x NIFTY Cloud mobile backend 位置情報検索サンプル
Overview
元の記事：リンク
Monacaを用いて作ったアプリから、mobile backendと連携して、位置情報データを検索しGoogle Map地図上に表示するサンプルコードとなります。
- HTML/CSS/JavaScriptでマルチプラットフォーム（iOS/Android/Windowsなど）にアプリを開発できる統合開発環境Monaca
- スマホアプリのサーバ側機能（プッシュ通知、会員管理、DBなど）をサーバ開発不要で実装できるNIFTY Cloud mobile backend
Demo
-
mBaaSサーバー側：事前に、位置情報データを用意します(Storeクラスへインポート)。
-
MonacaでgithubのURL(https://github.com/ncmbadmin/monaca_map_template/archive/master.zip)をインポートし、アプリケーションキーとクライントキーを設定してください。
-
アプリを起動（プレビュー）し、「地図でお店を見る」ボタンを押すと、取得した現在地データをもとに5km範囲のデータを取得し、地図上に表示します。
-
トップ画面
- 位置情報検索を行い、データを表示
Requirement
- Monaca環境
- Nifty cloud mobile backend Javascript SDK version 2.0.2 ダウンロード：Javascript SDK
Installation
-
Monacaで新規アプリ作成し、プロジェクトをインポートする。
- Monacaの利用登録
Monaca
- Monacaで新規プロジェクトを作成し、プロジェクトのインポートを選択します。
- 「URLからインポートする」を選択し、URLに https://github.com/ncmbadmin/sample_monaca_login_template/archive/master.zip を指定します。
- Monacaの利用登録
-
mobile backendでアプリ作成する
- mobile backend 利用登録
NIFTY Cloud mobile backend
- mobile backendでアプリ作成する
- mobile backend 利用登録
-
mobile backend側でデータをインポートする
- 以下のURLからStore.jsonファイルをダウンロードする。
https://gist.github.com/ncmbadmin/c2bef258d2a63c40b0b1/archive/e9a844ed6b43d64cfc166b1788975890ff50280a.zip
mBaaSデータストアにて、作成 ＞ インポートを選択し、ダウンロードしたjsonファイルを指定してインポートする。
インポートが成功した状態
-
Monacaで作成したアプリをmobile backendサーバーと連携させる
- Monacaでアプリキー、クライアントキーを設定し、初期化を行う
キーをコピーし、追記します。
- Monacaでアプリキー、クライアントキーを設定し、初期化を行う
-
Google map API キーの設定
- ファイル：index.html
- 方法は以下のように設定
Google console: https://code.google.com/apis/console
- 動作確認
- Monacaで動作確認する
Description
- コードの説明
File: www/js/app.js
- 初期化設定
var appKey = "YOUR_APPKEY";
var clientKey = "YOUR_CLIENTKEY";
var storeClassName = "Shop";
var ncmb = new NCMB(appKey,clientKey);
上記のコードでアプリケーションキーとクライアントキーを指定し、
NCMB(appKey, clientKey) でmBaaSサーバと連携を行います。
- 現在地取得
「地図でお店を見る」ボタンの処理メソッドは、以下のように実装しています。
navigator.geolocation.getCurrentPosition(onSuccess, onError, null);
- 現在地取得が成功した場合のコールバック、onSuccessは以下のように設定しています。
var onSuccess = function(position){
var location = { lat: position.coords.latitude, lng: position.coords.longitude};
//mobile backendに登録しているストアを取得し、地図で表示
//位置情報を検索するクラスのNCMB.Objectを作成する
var StoreClass = ncmb.DataStore(storeClassName);
//位置情報をもとに検索する条件を設定
var geoPoint = ncmb.GeoPoint(location.lat, location.lng);
var mapOptions = {
center: location,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
//現在地を地図に追加
markToMap("現在地", location, map, null);
//mobile backend上のデータ検索を実行する
StoreClass.withinKilometers("geolocation", geoPoint, 5)
.fetchAll()
.then(function(stores) {
// 検索が成功した場合の処理
for (var i = 0; i < stores.length; i++){
var store = stores[i];
var storeLocation = store.get("geolocation");
var myLatlng = new google.maps.LatLng(storeLocation.latitude, storeLocation.longitude);
//CREATE DETAIL
var detail = "";
var storeName = store.get("name");
detail += "<h2>"+ storeName +"</h2>";
var storeCapacity = store.get("capacity");
var storeLocation = store.get("geolocation");
var storeLatLng = new google.maps.LatLng(storeLocation.latitude,storeLocation.longitude);
var locationLatLng = new google.maps.LatLng(location.lat,location.lng);
var distance = Math.round(google.maps.geometry.spherical.computeDistanceBetween (locationLatLng, storeLatLng));
detail += "<p>距離: "+ distance + "(m)</p>";
detail += "<p>席数: " + storeCapacity + "</p>" ;
markToMap(detail, myLatlng, map, 'images/marker_mbaas.png');
}
})
.catch(function(error) {
// 検索に失敗した場合の処理
alert(error.message);
});
};
"Shop"というクラスのデーターを検索するため、StoreClassのfetchAllメソッドを利用します。
検索条件は StoreClass.withinKilometers("geolocation", geoPoint, 5); と設定し、geolocationというクラスの中にある、現在地（geoPoint）から5kmの範囲のキーの値を検索します。
fetchAll()メソッドを利用し、非同期にて検索を行います。
fetchAll()した後のプロミスを定義します。成功した場合にはstoresにデータが入っているはずなので、markToMap()メソッドを利用して、地図にマーカーを付けます。
Usage
サンプルコードをカスタマイズすることで、様々な機能を実装できます！
データ保存・データ検索・会員管理・プッシュ通知などの機能を実装したい場合には、
以下のドキュメントもご参考ください。
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
License
- MITライセンス
- NIFTY Cloud mobile backendのJavascript SDKのライセンス