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
GPSLocation
GPSLocation

「開く」
をクリック
ダッシュボードの左側に作成した
プロジェクトが追加されています
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が表示されます。
ブラウザ画面上で右クリックして
「名前を付けて保存」してください。

先ほどダウンロードしたyamanote.jsonを
mobile backendアップロードします。
クラス名は「PlacePoints」にしてください。
インポート終了後
山の手線の位置情報が表示される

ポイント表示のコードを実装
Monaca開発環境、 www内のapp.jsを開いてください。
ここをダブルクリック
アプリ作成時に表示された
「アプリケーションキー」、「クライアントキー」
をそれぞれコピー＆ペースト
SDK初期化のため、
各キーを赤四角枠の中に貼り付けてください

下にスクロールをしていき、var onFindSuccessのメソ
ッドを探してください
赤四角枠の中に次ページのコードを実装してください

GithubのREADME.mdに記載されていますのでそちらをご確認ください
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ロガーアプリを作ろう

Recomendados

Recomendados

Más contenido relacionado

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

Similar a 20160120 gpsロガーアプリを作ろう (20)

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