【IoT入門】スマホで加速度と位置情報を取得してクラウドに保存しよう！～ハンズオン資料②～

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved
【IoT入門】スマホで
加速度センサーと位置情報
を取得してクラウドに保存しよう！
～ハンズオン資料②～
・コードの実装をします
Startボタン（センサーの値を取得する）
Stopボタン（取得した値をmBaaSに保存する）

色見本３
オンラインハンズオンセミナーの進め方（確認）
 講義とハンズオンのセットで行います。
• 講義(前半) → ハンズオン① (10～15分)
• 講義(後半) → ハンズオン② (30~40分)
 ハンズオンの時間は十分とります。講義の内容とハンズオン資料を
元に、各自で黙々と作業を行ってください。
ハンズオン（２セット）が終了した後、コード解説をします。
 最後に質疑応答をおこないます。
 講義、ハンズオン中の質問も随時チャットにて対応します。

色見本３
講義（後半）
ここでは
コーディング作業の進め方と
コードの解説を
します

色見本３
本日体験していただく内容（確認）
２つのセンサーにアクセスして値を取得します
• 加速度センサー
• ＧＰＳセンサー

色見本３
Start ボタンで
加速度センサー
にアクセスして
値を取得
Stop ボタンで
取得した情報を
クラウドに保存
スマホを
振ると
画面の
色が
変わる
加速度センサー accelerometer
[[0.3595523071289063,0.1773811340332031,9.813592529296875],
[0.3589535522460938,0.1924996948242187,9.837393035888672],
[0.3297642517089844,0.1862127685546875,9.83290237426758],…]

色見本３
ＧＰＳセンサー
Stop ボタンで
取得した
緯度経度の情報を
クラウドに保存
Point
35.69801823127698,139.6880536751231
Start ボタンで
ＧＰＳセンサー
にアクセスして
緯度経度を取得
＋地図を表示

色見本３
ハンズオン②
ハンズオン①
アプリを作成する手順（確認）
・mobile backend にアプリを作る
・MonacaにJavaScriptSDKを入手する
・Monacaにプロジェクトを作成する
・下の３つについての実装をしていただきます
① APIキーの設定とSDKの初期化
② Startボタン押下時の動作
加速度センサーとGPSセンサーにアクセスして値を取得する
③ Stopボタン押下時の動作
取得したデータを mobile backend に保存する
大枠を作ってあるので
インポートして使います
×
11箇所に
コーディング
をします

色見本３
ハンズオン②でやること
アプリ
APIキー（２つ）
フロントエンドバックエンド

色見本３
具体的な作業方法を(1)と(2)で説明します
Monacaを編集する
js/app.jsを編集します
• js/app.jsファイルを開いてください
• (1)~(11)の番号の書かれた部分を編集していきます
js/app.jsファイルのみ
編集します！

色見本３
(1) APIキーの設定
mBaaSダッシュボード
「アプリ設定」の中にあります
APPLICATION_KEYと
CLIENT_KEYは
mobile backendの
管理画面から
コピーボタンで
コピーして使用します！
重要

色見本３
(2) mBaaSの初期化
mBaaSを使うために必ず最初に行う必要があります
ここ
「ここ」に
書きます
こんな
感じです

色見本３
コピペボードを用意しています
https://goo.gl/Aq745F を開く【GitHub】
ページの
下の方に行くと
あります
ここから
コピペすると
スムーズです

色見本３
(3) 加速度センサーから値を取得する
Monacaで加速度センサーから値を取る
加速度センサー Startボタン押下時の処理

色見本３
(4) ＧＰＳセンサーから値を取得する
MonacaでＧＰＳセンサーから値を取る
GPSセンサー Startボタン押下時の処理

色見本３
Stopボタン押下時の処理 [実装済み]
mBaaSに値を保存する
メソッドを呼び出します

色見本３
(5) データストアに保存用クラスを作成
★ここ
・mBaaSのデータストアに
データを保存するための
クラスを作成します
「AcceData」という
クラスが作成されます
加速度センサー Stopボタン押下時の処理
Acce_save_ncmb メソッド

色見本３
(6) クラスのインスタンスを生成
★ここ・先程作成したクラスの
インスタンスを作成します

色見本３
(7) データの保存
「インスタンス.set(キー,値)」
で値をセットして「.save()」
で保存します
★ここ

色見本３
(8),(9) ＧＰＳも同様に…
★ここ
★ここ
GPSセンサー Stopボタン押下時の処理
Gps_save_ncmb メソッド

色見本３
(10) 位置情報オブジェクトを作成
★ここ
緯度経度の情報としてデータを保存する
★ここ
mBaaSに用意されている
ncmb.GeoPoint()のオブジェクトを生成して
緯度経度の情報を作成します
(11)同様もに…
以下同様に…

色見本３
プロジェクトの保存
ここまでできたら保存をします
「保存」を押すか、
ショートカット
Ctrl + S で保存できます！
※Macの場合は「command + S 」コーディング作業は以上です
クリック

色見本３
動作確認
Monacaデバッガーで動かしてみよう！
を選択
値が１秒ごとに
取得され表示されます
スマホを
振ってみましょう
◎振り方の強弱で色が変わります
弱青⇔黄⇔赤強
Startボタンを押して
動作確認
確認したら
Stopボタンを押おして
値を保存

色見本３
動作確認
Startを選択
緯度経度の値が
取得され表示されます
取得した緯度経度の
情報から地図を表示し
マーカーを立てます
Monacaデバッガーで動かしてみよう！
を選択
Startボタンを押して
動作確認
確認したら
Stopボタンを押おして
値を保存

色見本３
mBaaSを見てみよう
確認ができたら
mBaaSのデータストアを見てみましょう！
「データストア」を選択
クラスに
「AcceData」と「GpsData」
ができていることを確認
それぞれ選択して値が保存されているか
確認しましょう！
さっきは無かったところに
作成されました

色見本３
mBaaSを見てみよう
確認ができたら
mBaaSのデータストアを見てみましょう！
mBaaSのクラウド上に
保存されました！
※データの上にカーソルを合わせると、中身のデータを見ることができます

色見本３
上手く動かない…エラーの切り分け
• エラーが出ていないのにセンサーの値が上手く取れない…
MonacaデバッガーアプリのGPSが無効になっている可能性があり
ます
加速度センサーについては、残念ながらAndroidの機種で一部相性
の悪いものがあるようです
• エラーが出ていないのにmBaaSに値が上手く保存されない…
APIキーが正しく貼り付けられていない可能性があります
• そもそもエラーがでているが、どこが原因かわからない…
打ち間違いの可能性が高いので、コピペしなおしてみてください
編集の過程で「}」や「)」を消してしまっている可能性があります

色見本３
上手く動かない…エラー箇所の見つけ方
1. ブラウザのコンソール画面を表示する
「F12」キーを押す
エラーがあればその箇所を表示してくれます

色見本３
上手く動かない…エラー箇所の見つけ方
2. Monacaデバッガーでログを表示する方法
エラーがあると「！」が表示されるのでそこをタップ
赤くなっているアイコンをタップ
「App Log」に表示されます

色見本３
ロジック解説
ここでは
書き込んだコードの解説と
実装済みの内容を紹介します
解説

色見本３
(1) APIキーの設定
mBaaSダッシュボード
「アプリ設定」の中にあります
APPLICATION_KEYと
CLIENT_KEYは
mobile backendの
管理画面から
コピーボタンで
コピーして使用します！
重要
解説

色見本３
(2) mBaaSの初期化
mBaaSを使うために必ず最初に行う必要があります
ここ
「ここ」に
書きます
こんな
感じです
解説

色見本３
コピペボードを用意しています
https://goo.gl/Aq745F を開く【GitHub】
ページの
下の方に行くと
あります
ここから
コピペすると
スムーズです
解説

色見本３
(3) 加速度センサーから値を取得する
Monacaで加速度センサーから値を取る
加速度センサー Startボタン押下時の処理
解説

色見本３
(4) ＧＰＳセンサーから値を取得する
MonacaでＧＰＳセンサーから値を取る
GPSセンサー Startボタン押下時の処理
解説

色見本３
Stopボタン押下時の処理 [実装済み]
mBaaSに値を保存する
メソッドを呼び出します
解説

色見本３
★ここ
「AcceData」という
クラスが作成されます
解説

色見本３
★ここ・先程作成したクラスの
インスタンスを作成します
解説

色見本３
「インスタンス.set(キー,値)」
で値をセットして「.save()」
で保存します
★ここ
解説

色見本３
(8),(9) ＧＰＳも同様に…
★ここ
★ここ
解説

色見本３
(10) 位置情報オブジェクトを作成
★ここ
緯度経度の情報としてデータを保存する
★ここ
mBaaSに用意されている
ncmb.GeoPoint()のオブジェクトを生成して
緯度経度の情報を作成します
(11)同様もに…
以下同様に…
解説

色見本３
加速度センサーから値の取得時 [実装済み]
重力加速度を除く
色の切り切り替え画面に値を表示する
成功した場合のコールバック
解説

色見本３
加速度センサーから値の取得時 [実装済み]
失敗した場合のコールバック
設定するオプション
解説

色見本３
ＧＰＳセンサーから値の取得時 [実装済み]
地図表示
writemapメソッド
の呼び出し
画面に値を表示する
成功した場合のコールバック
解説

色見本３
ＧＰＳセンサーから値の取得時 [実装済み]
失敗した場合のコールバック
設定するオプション
解説

色見本３
位置情報を地図に表示する
OpenStreetMap
(https://openstreetmap.jp/)
を利用して現在地を地図に
表示しています
参考
index.htmlファイルに
http://www.openlayers.org/api/OpenLayers.js
を読み込んで使っています
解説

色見本３
まとめ
☺Monacaを使って
加速度センサー
ＧＰＳセンサー
に簡単にアクセスできることがわかった！
☺mBaaSを使って簡単にデータを
クラウドに保存できることがわかった！

【IoT入門】スマホで加速度と位置情報を取得してクラウドに保存しよう！～ハンズオン資料②～

Recommandé

Recommandé

Contenu connexe

Similaire à 【IoT入門】スマホで加速度と位置情報を取得してクラウドに保存しよう！～ハンズオン資料②～

Similaire à 【IoT入門】スマホで加速度と位置情報を取得してクラウドに保存しよう！～ハンズオン資料②～ (20)

Plus de natsumo

Plus de natsumo (11)

Dernier

Dernier (6)

【IoT入門】スマホで加速度と位置情報を取得してクラウドに保存しよう！～ハンズオン資料②～