20160120 gpsロガーアプリを作ろう
TRANSCRIPT
![Page 1: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/1.jpg)
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
![Page 2: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/2.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 2
事前準備
【GitHub】 https://goo.gl/ZhwFsz
※ このあと使いますので開いておいてください!
![Page 3: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/3.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
【ハンズオン】
Monaca とニフティクラウド mobile backend
でGPS ロガーアプリを作ろう
ニフティ株式会社
![Page 4: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/4.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 4
本日、体験して頂く内容
GPS ロガーアプリの作成
現在地の位置情報を登録
現在地付近のポイントを map に表示
登録
![Page 5: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/5.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 5
手順
Monaca 利用準備
mobile backend 利用準備
近接ポイントの表示
現在地のポイント登録
利用登録
プロジェクトのインポート
デバッガーのインストール
スマホに map を表示する
![Page 6: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/6.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
Monaca 利用準備
![Page 7: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/7.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 7
Monaca の利用登録
https://ja.monaca.io/
※ 登録済みの方は不要です
![Page 8: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/8.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 8
プロジェクトのインポート
Monaca の新しいプロジェクトを作ります
「開発をスタート」をクリック
![Page 9: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/9.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 9
プロジェクトのインポート
「 Monaca.io で開発」を選択してください
![Page 10: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/10.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 10
プロジェクトのインポート
「 Import Project 」を選択してください
![Page 11: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/11.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 11
プロジェクトのインポート
「インポート」をクリック
★https://github.com/hounenhounen/NCMB_GPSLocation/archive/master.zip
GPSLocationGPSLocation
![Page 12: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/12.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 12
プロジェクトのインポート
「開く」をクリック
ダッシュボードの左側に作成したプロジェクトが追加されています
GPSLocation
![Page 13: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/13.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 13
プロジェクトのインポート
プロジェクトの開発環境が開きます
GPSLocation
![Page 14: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/14.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 14
Monaca デバッガーのインストール
今回作成するアプリは動作確認にMonaca デバッガーが必須です!
重要
https://ja.monaca.io/debugger.html
![Page 15: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/15.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 15
スマホに map を表示する
インストールしたデバッガーを立ち上げて、ログイン後GPSLocation をタップして左の map を表示してください
タップすると表示される
登録
![Page 16: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/16.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
mobile backend 利用準備
![Page 17: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/17.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 17
手順
Monaca 利用準備
mobile backend 利用準備
近接ポイントの表示
現在地のポイント登録
利用登録
アプリの作成
![Page 18: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/18.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 18
mobile backend の利用登録 1/2
http://mb.cloud.nifty.com/
※ 右クリックして新しいタブで開くと便利です。
まず、下記 URL よりサービスサイトにアクセスしてください。
ここをクリック
ここをクリック
![Page 19: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/19.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 19
mobile backend の利用登録 2/2
必要事項を入力して @nifty 会員登録してください。ここをクリック
ご登録いただいた@nifty ID でログイン
利用規約を確認後、同意して
利用開始!
![Page 20: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/20.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 20
mobile backend のアプリ作成
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「アプリケーションキー」、「クライアントキー」の 2 つのキーを使い、サーバー接続の認証をしています。その2つのキーがアプリ作成時に生成されます。
「GPSLocation 」と入力してください
2 つのキーは後で使います
OK を押すと管理画面へ
![Page 21: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/21.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 21
mobile backend のアプリ作成 - 補足 -
※ ログイン後に、この画面が出た方は…
「 + 新しいアプリ」をクリックすると
でてきます !
「GPSLocation 」と入力してください
![Page 22: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/22.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
現在地付近のポイント表示
![Page 23: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/23.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 23
手順
Monaca 利用準備
mobile backend 利用準備
現在地付近のポイント表示
現在地のポイント登録
ポイント情報のインポート
ポイント表示コード実装
動作確認
![Page 24: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/24.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 24
ポイント情報のインポート
今回は事前に登録しておくポイントの情報として山手線の各駅の駅名、位置情報が記された「 yamanote.json 」を使います。下記の URL からそのファイルをダウンロードしてください。https://goo.gl/rTlxr1
URL へアクセスするとyamanote.json が表示されます。ブラウザ画面上で右クリックして
「名前を付けて保存」してください。
![Page 25: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/25.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 25
ポイント情報のインポート
先ほどダウンロードした yamanote.json をmobile backend アップロードします。クラス名は「 PlacePoints 」にしてください。
インポート終了後山の手線の位置情報が表示される
![Page 26: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/26.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 26
ポイント表示のコードを実装
Monaca 開発環境、 www 内の app.js を開いてください。
ここをダブルクリック
アプリ作成時に表示された「アプリケーションキー」、「クライアントキー」
をそれぞれコピー&ペースト
SDK 初期化のため、各キーを赤四角枠の中に貼り付けてください
![Page 27: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/27.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 27
ポイント表示のコードを実装
下にスクロールをしていき、 var onFindSuccess のメソッドを探してください
赤四角枠の中に次ページのコードを実装してください
![Page 28: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/28.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 28
ポイント表示のコードを実装Github の README.md に記載されていますのでそちらをご確認くださいhttps://goo.gl/ZhwFsz
赤線枠内のコードを実装
![Page 29: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/29.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 29
動作確認
一度デバッガーを立ち上げて「ポイントを見る」をタップしてください
赤丸タップ後「ポイントを見る」をタップ
登録
![Page 30: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/30.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 30
コードの解説
「 PlacePoints 」クラスを操作する宣言
現在地から 5km 以内のポイントをgeo カラムから検索する
条件に適合するものを全て取得
取得したポイントをmap に描画
![Page 31: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/31.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
現在地のポイント登録
![Page 32: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/32.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 32
手順
Monaca 利用準備
mobile backend 利用準備
現在地付近のポイント表示
現在地のポイント登録ポイント登録コードの実装
動作確認
![Page 33: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/33.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 33
ポイント登録コードの実装
さらに下にスクロールをしていき、 var onSaveSuccess のメソッドを探してください
赤四角枠の中に次ページのコードを実装してください
![Page 34: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/34.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 34
ポイント登録コードの実装Github の README.md に記載されていますのでそちらもご確認くださいhttps://goo.gl/ZhwFsz
赤線枠内のコードを実装
![Page 35: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/35.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 35
動作確認
一度デバッガーを立ち上げて「ポイントを登録する」をタップしてください
赤丸タップ後「ポイントを登録する」をタップ
登録後 mobile backendの管理画面を確認
登録
![Page 36: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/36.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 36
動作確認
mobile backend の管理画面で、 PlacePoints のデータを再度確認します
赤枠内のようにデータが更新されていれば正常に動作しています。
![Page 37: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/37.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 37
コードの解説
「 PlacePoints 」クラスを操作する宣言
登録するカラム名、値をそれぞれ指定する
実際に登録する
![Page 38: 20160120 gpsロガーアプリを作ろう](https://reader035.vdocuments.pub/reader035/viewer/2022062400/5871b0f01a28abda6a8b692b/html5/thumbnails/38.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 38