1.
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

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