20160120 gpsロガーアプリを作ろう

Copyright © NIFTY Corporation All Rights Reserved. 1

事前準備

Monaca

ニフティクラウド mobile backend

https://ja.monaca.io/

http://mb.cloud.nifty.com/

※ 利用登録と Monaca デバッガーのインストール

※ 利用登録

本日の資料

【 SlideShare】 http://goo.gl/cqHQIs ★ 【 GitHub 】 https://goo.gl/ZhwFsz


事前準備

【GitHub】 https://goo.gl/ZhwFsz

※ このあと使いますので開いておいてください！

Copyright © NIFTY Corporation All Rights Reserved.

【ハンズオン】

Monaca とニフティクラウド mobile backend

でGPS ロガーアプリを作ろう

ニフティ株式会社


本日、体験して頂く内容

GPS ロガーアプリの作成

現在地の位置情報を登録

現在地付近のポイントを map に表示

登録


手順

Monaca 利用準備

mobile backend 利用準備

近接ポイントの表示

現在地のポイント登録

利用登録

プロジェクトのインポート

デバッガーのインストール

スマホに map を表示する


Monaca 利用準備


Monaca の利用登録

https://ja.monaca.io/

※ 登録済みの方は不要です



Monaca の新しいプロジェクトを作ります

「開発をスタート」をクリック



「 Monaca.io で開発」を選択してください



「 Import Project 」を選択してください



「インポート」をクリック

★https://github.com/hounenhounen/NCMB_GPSLocation/archive/master.zip

GPSLocationGPSLocation



「開く」をクリック

ダッシュボードの左側に作成したプロジェクトが追加されています

GPSLocation



プロジェクトの開発環境が開きます

GPSLocation


Monaca デバッガーのインストール

今回作成するアプリは動作確認にMonaca デバッガーが必須です！

重要

https://ja.monaca.io/debugger.html


スマホに map を表示する

インストールしたデバッガーを立ち上げて、ログイン後GPSLocation をタップして左の map を表示してください

タップすると表示される

登録




手順

Monaca 利用準備


近接ポイントの表示


利用登録

アプリの作成


mobile backend の利用登録　 1/2

http://mb.cloud.nifty.com/

※ 右クリックして新しいタブで開くと便利です。

まず、下記 URL よりサービスサイトにアクセスしてください。

ここをクリック

ここをクリック


mobile backend の利用登録　 2/2

必要事項を入力して @nifty 会員登録してください。ここをクリック

ご登録いただいた@nifty ID でログイン

利用規約を確認後、同意して

利用開始！


mobile backend のアプリ作成　

利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

「アプリケーションキー」、「クライアントキー」の 2 つのキーを使い、サーバー接続の認証をしています。その２つのキーがアプリ作成時に生成されます。

｢GPSLocation ｣と入力してください

2 つのキーは後で使います

OK を押すと管理画面へ


mobile backend のアプリ作成 - 補足 -

※ ログイン後に、この画面が出た方は…

「 + 新しいアプリ」をクリックすると

でてきます !

｢GPSLocation ｣と入力してください


現在地付近のポイント表示


手順

Monaca 利用準備




ポイント情報のインポート

ポイント表示コード実装

動作確認



今回は事前に登録しておくポイントの情報として山手線の各駅の駅名、位置情報が記された「 yamanote.json 」を使います。下記の URL からそのファイルをダウンロードしてください。https://goo.gl/rTlxr1

URL へアクセスするとyamanote.json が表示されます。ブラウザ画面上で右クリックして

「名前を付けて保存」してください。

https://goo.gl/rTlxr1

https://goo.gl/rTlxr1



先ほどダウンロードした yamanote.json をmobile backend アップロードします。クラス名は「 PlacePoints 」にしてください。

インポート終了後山の手線の位置情報が表示される


ポイント表示のコードを実装

Monaca 開発環境、 www 内の app.js を開いてください。

ここをダブルクリック

アプリ作成時に表示された「アプリケーションキー」、「クライアントキー」

をそれぞれコピー＆ペースト

SDK 初期化のため、各キーを赤四角枠の中に貼り付けてください


ポイント表示のコードを実装

下にスクロールをしていき、 var onFindSuccess のメソッドを探してください

赤四角枠の中に次ページのコードを実装してください


ポイント表示のコードを実装Github の README.md に記載されていますのでそちらをご確認くださいhttps://goo.gl/ZhwFsz

赤線枠内のコードを実装

https://goo.gl/ZhwFsz



動作確認

一度デバッガーを立ち上げて「ポイントを見る」をタップしてください

赤丸タップ後「ポイントを見る」をタップ

登録


コードの解説

｢ PlacePoints ｣クラスを操作する宣言

現在地から 5km 以内のポイントをgeo カラムから検索する

条件に適合するものを全て取得

取得したポイントをmap に描画




手順

Monaca 利用準備



現在地のポイント登録ポイント登録コードの実装

動作確認


ポイント登録コードの実装

さらに下にスクロールをしていき、 var onSaveSuccess のメソッドを探してください

赤四角枠の中に次ページのコードを実装してください


ポイント登録コードの実装Github の README.md に記載されていますのでそちらもご確認くださいhttps://goo.gl/ZhwFsz

赤線枠内のコードを実装



動作確認

一度デバッガーを立ち上げて「ポイントを登録する」をタップしてください

赤丸タップ後「ポイントを登録する」をタップ

登録後 mobile backendの管理画面を確認

登録


動作確認

mobile backend の管理画面で、 PlacePoints のデータを再度確認します

赤枠内のようにデータが更新されていれば正常に動作しています。


コードの解説

｢ PlacePoints ｣クラスを操作する宣言

登録するカラム名、値をそれぞれ指定する

実際に登録する


20160120 gpsロガーアプリを作ろう

Engineering