【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 ボタンで取得した

緯度経度の情報をクラウドに保存

Point35.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】

ページの下の方に行くと

あります

ここからコピペするとスムーズです

https://goo.gl/Aq745F


色見本３

(3) 加速度センサーから値を取得する

Monacaで加速度センサーから値を取る

加速度センサー Startボタン押下時の処理


色見本３

(4) ＧＰＳセンサーから値を取得する

MonacaでＧＰＳセンサーから値を取る

GPSセンサー Startボタン押下時の処理


色見本３

Stopボタン押下時の処理 [実装済み]

mBaaSに値を保存するメソッドを呼び出します


色見本３

(5) データストアに保存用クラスを作成

★ここ

・mBaaSのデータストアにデータを保存するためのクラスを作成します

「AcceData」というクラスが作成されます

加速度センサー Stopボタン押下時の処理

Acce_save_ncmb メソッド


色見本３

(6) クラスのインスタンスを生成

★ここ・先程作成したクラスのインスタンスを作成します




色見本３

(7) データの保存


「インスタンス.set(キー,値)」

で値をセットして「.save()」で保存します



★ここ


色見本３

(8),(9) ＧＰＳも同様に…

★ここ

★ここ(8) データストアに保存用クラスを作成(9) クラスのインスタンスを生成

GPSセンサー Stopボタン押下時の処理

Gps_save_ncmb メソッド


色見本３

(10) 位置情報オブジェクトを作成

★ここ

緯度経度の情報としてデータを保存する

★ここ

mBaaSに用意されているncmb.GeoPoint()のオブジェクトを生成して緯度経度の情報を作成します



(11)同様もに…

以下同様に…(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】

ページの下の方に行くと

あります

ここからコピペするとスムーズです

解説

https://goo.gl/Aq745F


色見本３

(3) 加速度センサーから値を取得する

Monacaで加速度センサーから値を取る

加速度センサー Startボタン押下時の処理

解説


色見本３

(4) ＧＰＳセンサーから値を取得する

MonacaでＧＰＳセンサーから値を取る

GPSセンサー Startボタン押下時の処理

解説


色見本３

Stopボタン押下時の処理 [実装済み]

mBaaSに値を保存するメソッドを呼び出します

解説


色見本３

(5) データストアに保存用クラスを作成

★ここ


「AcceData」というクラスが作成されます



解説


色見本３

(6) クラスのインスタンスを生成

★ここ・先程作成したクラスのインスタンスを作成します



解説


色見本３

(7) データの保存


「インスタンス.set(キー,値)」

で値をセットして「.save()」で保存します



★ここ

解説


色見本３

(8),(9) ＧＰＳも同様に…

★ここ

★ここ(8) データストアに保存用クラスを作成(9) クラスのインスタンスを生成



解説


色見本３

(10) 位置情報オブジェクトを作成

★ここ

緯度経度の情報としてデータを保存する

★ここ

mBaaSに用意されているncmb.GeoPoint()のオブジェクトを生成して緯度経度の情報を作成します



(11)同様もに…

以下同様に…(11) データの保存

解説


色見本３

加速度センサーから値の取得時 [実装済み]

重力加速度を除く

色の切り切り替え画面に値を表示する

成功した場合のコールバック解説


色見本３

加速度センサーから値の取得時 [実装済み]

失敗した場合のコールバック

設定するオプション

解説


色見本３

ＧＰＳセンサーから値の取得時 [実装済み]

地図表示

writemapメソッド

の呼び出し

画面に値を表示する

成功した場合のコールバック解説


色見本３

ＧＰＳセンサーから値の取得時 [実装済み]

失敗した場合のコールバック

設定するオプション

解説


色見本３

位置情報を地図に表示する

OpenStreetMap(https://openstreetmap.jp/)

を利用して現在地を地図に表示しています

参考index.htmlファイルに

http://www.openlayers.org/api/OpenLayers.js

を読み込んで使っています

解説

https://openstreetmap.jp/

http://www.openlayers.org/api/OpenLayers.js


色見本３

まとめ

☺Monacaを使って加速度センサー

ＧＰＳセンサー

に簡単にアクセスできることがわかった！

☺mBaaSを使って簡単にデータを

クラウドに保存できることがわかった！

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

Education