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