Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,605 views

Published on

スマホで簡単にIoTを実践するハンズオン

Published in: Engineering
  • Sex in your area is here: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 【IoT入門】スマホで 加速度センサーと位置情報 を取得してクラウドに保存しよう! ~ハンズオン資料②~ ・コードの実装をします Startボタン(センサーの値を取得する) Stopボタン(取得した値をmBaaSに保存する)
  2. 2. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 オンラインハンズオンセミナーの進め方(確認)  講義とハンズオンを2セットでアプリを作成します。 • 講義(前半) → ハンズオン① (目安10~15分) • 講義(後半) → ハンズオン② (目安30~40分) 講義を一通り聴講いただいて全体の流れをつかんだ後、講 義の内容とハンズオン資料を元にハンズオンに取り組む流 れをおすすめします。
  3. 3. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 講義(後半) ここでは コーディング作業の進め方と コードの解説を します
  4. 4. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 本日体験していただく内容(確認) 2つのセンサーにアクセスして値を取得します • 加速度センサー • GPSセンサー
  5. 5. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 本日体験していただく内容(確認) Start ボタンで 加速度センサー にアクセスして 値を取得 Stop ボタンで 取得した情報を クラウドに保存 スマホを 振ると 画面の 色が 変わる 加速度センサー accelerometer [[0.3595523071289063,0.1773811340332031,9.813592529296875], [0.3589535522460938,0.1924996948242187,9.837393035888672], [0.3297642517089844,0.1862127685546875,9.83290237426758],…]
  6. 6. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 本日体験していただく内容(確認) GPSセンサー Stop ボタンで 取得した 緯度経度の情報を クラウドに保存 Point 35.69801823127698,139.6880536751231 Start ボタンで GPSセンサー にアクセスして 緯度経度を取得 +地図を表示
  7. 7. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ハンズオン② ハンズオン① アプリを作成する手順(確認) ・mobile backend にアプリを作る ・MonacaにJavaScriptSDKを入手する ・Monacaにプロジェクトを作成する ・下の3つについての実装をしていただきます ① APIキーの設定とSDKの初期化 ② Startボタン押下時の動作 加速度センサーとGPSセンサーにアクセスして値を取得する ③ Stopボタン押下時の動作 取得したデータを mobile backend に保存する 大枠を作ってあるので インポートして使います × 11箇所に コーディング をします
  8. 8. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ハンズオン②でやること フロントエンド バックエンド アプリ APIキー(2つ)
  9. 9. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 具体的な作業方法を(1)と(2)で説明します Monacaを編集する js/app.jsを編集します • js/app.jsファイルを開いてください • (1)~(11)の番号の書かれた部分を編集していきます js/app.jsファイルのみ 編集します!
  10. 10. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (1) APIキーの設定 mBaaSダッシュボード 「アプリ設定」の中にあります APPLICATION_KEYと CLIENT_KEYは mobile backendの 管理画面から コピーボタンで コピーして使用します! 重要
  11. 11. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (2) mBaaSの初期化 mBaaSを使うために必ず最初に行う必要があります ここ 「ここ」に 書きます こんな 感じです
  12. 12. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 コピペボードを用意しています https://goo.gl/1RtH5X を開く【GitHub】 ページの 下の方に行くと あります ここから コピペすると スムーズです
  13. 13. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (3) 加速度センサーから値を取得する Monacaで加速度センサーから値を取る 加速度センサー Startボタン押下時の処理
  14. 14. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (4) GPSセンサーから値を取得する MonacaでGPSセンサーから値を取る GPSセンサー Startボタン押下時の処理
  15. 15. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 Stopボタン押下時の処理 [実装済み] mBaaSに値を保存する メソッドを呼び出します
  16. 16. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (5) データストアに保存用クラスを作成 ★ここ ・mBaaSのデータストアに データを保存するための クラスを作成します 「AcceData」という クラスが作成されます 加速度センサー Stopボタン押下時の処理 Acce_save_ncmb メソッド
  17. 17. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (6) クラスのインスタンスを生成 ★ここ・先程作成したクラスの インスタンスを作成します 加速度センサー Stopボタン押下時の処理 Acce_save_ncmb メソッド
  18. 18. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (7) データの保存 ・mBaaSのデータストアに データを保存するための クラスを作成します 「インスタンス.set(キー,値)」 で値をセットして「.save()」 で保存します 加速度センサー Stopボタン押下時の処理 Acce_save_ncmb メソッド ★ここ
  19. 19. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (8),(9) GPSも同様に… ★ここ ★ここ (8) データストアに保存用クラスを作成 (9) クラスのインスタンスを生成 GPSセンサー Stopボタン押下時の処理 Gps_save_ncmb メソッド
  20. 20. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (10) 位置情報オブジェクトを作成 ★ここ 緯度経度の情報としてデータを保存する ★ここ mBaaSに用意されている ncmb.GeoPoint()のオブジェクトを生成して 緯度経度の情報を作成します GPSセンサー Stopボタン押下時の処理 Gps_save_ncmb メソッド (11)同様もに… 以下同様に… (11) データの保存
  21. 21. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 プロジェクトの保存 ここまでできたら保存をします 「保存」を押すか、 ショートカット Ctrl + S で保存できます! ※Macの場合は「command + S 」 コーディング作業は以上です クリック
  22. 22. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 動作確認 Monacaデバッガーで動かしてみよう! を選択 値が1秒ごとに 取得され表示されます スマホを 振ってみましょう ◎振り方の強弱で色が変わります 弱 青⇔黄⇔赤 強 Startボタンを押して 動作確認 確認したら Stopボタンを押おして 値を保存
  23. 23. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 動作確認 Startを選択 緯度経度の値が 取得され表示されます 取得した緯度経度の 情報から地図を表示し マーカーを立てます Monacaデバッガーで動かしてみよう! を選択 Startボタンを押して 動作確認 確認したら Stopボタンを押おして 値を保存
  24. 24. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 mBaaSを見てみよう 確認ができたら mBaaSのデータストアを見てみましょう! 「データストア」を選択 クラスに 「AcceData」と「GpsData」 ができていることを確認 それぞれ選択して値が保存されているか 確認しましょう! さっきは無かったところに 作成されました
  25. 25. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 mBaaSを見てみよう 確認ができたら mBaaSのデータストアを見てみましょう! mBaaSのクラウド上に 保存されました! ※データの上にカーソルを合わせると、中身のデータを見ることができます
  26. 26. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 上手く動かない…エラーの切り分け • エラーが出ていないのにセンサーの値が上手く取れない… MonacaデバッガーアプリのGPSが無効になっている可能性があり ます 加速度センサーについては、残念ながらAndroidの機種で一部相性 の悪いものがあるようです • エラーが出ていないのにmBaaSに値が上手く保存されない… APIキーが正しく貼り付けられていない可能性があります • そもそもエラーがでているが、どこが原因かわからない… 打ち間違いの可能性が高いので、コピペしなおしてみてください 編集の過程で「}」や「)」を消してしまっている可能性があります
  27. 27. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 上手く動かない…エラー箇所の見つけ方 1. ブラウザのコンソール画面を表示する 「F12」キーを押す エラーがあればその箇所を表示してくれます
  28. 28. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 上手く動かない…エラー箇所の見つけ方 2. Monacaデバッガーでログを表示する方法 エラーがあると「!」が表示されるのでそこをタップ 赤くなっているアイコンをタップ 「App Log」に表示されます
  29. 29. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 ロジック解説 ここでは 書き込んだコードの解説と 実装済みの内容を紹介します 解 説
  30. 30. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (1) APIキーの設定 mBaaSダッシュボード 「アプリ設定」の中にあります APPLICATION_KEYと CLIENT_KEYは mobile backendの 管理画面から コピーボタンで コピーして使用します! 重要 解 説
  31. 31. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (2) mBaaSの初期化 mBaaSを使うために必ず最初に行う必要があります ここ 「ここ」に 書きます こんな 感じです 解 説
  32. 32. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 コピペボードを用意しています https://goo.gl/1RtH5X を開く【GitHub】 ページの 下の方に行くと あります ここから コピペすると スムーズです 解 説
  33. 33. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (3) 加速度センサーから値を取得する Monacaで加速度センサーから値を取る 加速度センサー Startボタン押下時の処理 解 説
  34. 34. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (4) GPSセンサーから値を取得する MonacaでGPSセンサーから値を取る GPSセンサー Startボタン押下時の処理 解 説
  35. 35. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 Stopボタン押下時の処理 [実装済み] mBaaSに値を保存する メソッドを呼び出します 解 説
  36. 36. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (5) データストアに保存用クラスを作成 ★ここ ・mBaaSのデータストアに データを保存するための クラスを作成します 「AcceData」という クラスが作成されます 加速度センサー Stopボタン押下時の処理 Acce_save_ncmb メソッド 解 説
  37. 37. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (6) クラスのインスタンスを生成 ★ここ・先程作成したクラスの インスタンスを作成します 加速度センサー Stopボタン押下時の処理 Acce_save_ncmb メソッド 解 説
  38. 38. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (7) データの保存 ・mBaaSのデータストアに データを保存するための クラスを作成します 「インスタンス.set(キー,値)」 で値をセットして「.save()」 で保存します 加速度センサー Stopボタン押下時の処理 Acce_save_ncmb メソッド ★ここ 解 説
  39. 39. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (8),(9) GPSも同様に… ★ここ ★ここ (8) データストアに保存用クラスを作成 (9) クラスのインスタンスを生成 GPSセンサー Stopボタン押下時の処理 Gps_save_ncmb メソッド 解 説
  40. 40. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 (10) 位置情報オブジェクトを作成 ★ここ 緯度経度の情報としてデータを保存する ★ここ mBaaSに用意されている ncmb.GeoPoint()のオブジェクトを生成して 緯度経度の情報を作成します GPSセンサー Stopボタン押下時の処理 Gps_save_ncmb メソッド (11)同様もに… 以下同様に… (11) データの保存 解 説
  41. 41. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 加速度センサーから値の取得時 [実装済み] 重力加速度を除く 色の切り切り替え画面に値を表示する 成功した場合のコールバック 解 説
  42. 42. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 加速度センサーから値の取得時 [実装済み] 失敗した場合のコールバック 設定するオプション 解 説
  43. 43. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 GPSセンサーから値の取得時 [実装済み] 地図表示 writemapメソッド の呼び出し 画面に値を表示する 成功した場合のコールバック 解 説
  44. 44. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 GPSセンサーから値の取得時 [実装済み] 失敗した場合のコールバック 設定するオプション 解 説
  45. 45. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 位置情報を地図に表示する OpenStreetMap (https://openstreetmap.jp/) を利用して現在地を地図に 表示しています 参考 index.htmlファイルに http://www.openlayers.org/api/OpenLayers.js を読み込んで使っています 解 説
  46. 46. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 色見本3 まとめ ☺Monacaを使って 加速度センサー GPSセンサー に簡単にアクセスできることがわかった! ☺mBaaSを使って簡単にデータを クラウドに保存できることがわかった!
  47. 47. Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved

×