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

Copyright @ NIFTY Corporation All Rights Reserved

【IoT入門】スマホで加速度センサーと位置情報

を取得してクラウドに保存しよう！

～ハンズオン資料①～・mBaaSとは？Monacaとは？

・コーディング前に必要な設定をしましょう


色見本３

オンラインハンズオンセミナーの進め方

講義とハンズオンのセットで行います。

• 講義(前半) → ハンズオン① (10～15分)

• 講義(後半) → ハンズオン② (30~40分)

ハンズオンの時間は十分とります。講義の内容とハンズオン資料を元に、各自で黙々と作業を行ってください。

ハンズオン（２セット）が終了した後、コード解説をします。

最後に質疑応答をおこないます。

講義、ハンズオン中の質問も随時チャットにて対応します。


色見本３

講義（前半）

ここではmBaaSとMonacaの使い方とハンズオン①で作業していただく内容について説明します


色見本３

本日体験していただく内容

２つのセンサーにアクセスして値を取得します

• 加速度センサー• ＧＰＳセンサー


色見本３


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

って何？？


色見本３

ニフティクラウドmobile backend

スマートフォンアプリのバックエンド機能が

開発不要になるクラウドサービス

mobileBackend

as ＝ mBaaS !!aService



色見本３


Monacaって何？？


色見本３コーディングからビルドまで

すべてブラウザ上でできるのが特徴！

コーディングからビルドまで

すべてブラウザ上でできるのが特徴！

MonacaHTML5とJavaScriptを使ってAndroid・iOSのハイブリッドアプリを開発できる開発環境



色見本３

ハンズオン②

ハンズオン①

アプリを作成する手順

・mobile backend にアプリを作る

・MonacaにJavaScriptSDKを入手する

・Monacaにプロジェクトを作成する

・下の３つについての実装をしていただきます

① APIキーの設定とSDKの初期化

② Startボタン押下時の動作

加速度センサーとGPSセンサーにアクセスして値を取得する

③ Stopボタン押下時の動作

取得したデータを mobile backend に保存する

大枠を作ってあるのでインポートして使います

×

11箇所にコーディングをします


色見本３

ハンズオン①でやること

アプリ

APIキー（２つ）

フロントエンドバックエンド


色見本３

mobile backendのアプリを作る

利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

「SensingTestApp」と入力してください


色見本３


※ログイン後に、この画面が出た方は…

「+新しいアプリ」をクリックすると

でてきます!


色見本３


アプリが作成されました！

２つのキーは後で使います

OKをクリックすると管理画面が表示されます


色見本３

後でAPIキーを確認するには…

ここにあります

「アプリ設定」を選択


色見本３

データが保存される場所の確認

「データストア」を選択


色見本３

データが保存される場所の確認

今はありません！

後でここにデータを保存するクラス

を作ります！


色見本３

Monacaの新しいプロジェクトを作る

「新規プロジェクト」をクリック


色見本３


「Import Project」を選択してください


色見本３


「SensingTestApp」

と入力

「URLを指定してインポート」を選択


色見本３


https://goo.gl/Aq745F を開きます

「Download Zip」を

→ URLをコピー

【GitHub】

https://github.com/natsumo/SensingTest/archive/master.zip

https://goo.gl/Aq745F


色見本３


コピーしたURLを貼り付ける

「インポート」をクリック

プロジェクトが作成されました


色見本３


ダッシュボードの左側に作成されたプロジェクトが追加されています

「開く」をクリック

SensingTestApp


色見本３


プロジェクトの開発環境が開きます


色見本３

Cordvaプラグインの準備[設定済み]

DeviceMotion: 加速度センサーを利用するためのプラグインGeolocation: GPSセンサーを利用するためのプラグインSplashscreen: スプラッシュスクリーンを利用するためのプラグイン


色見本３

MonacaにJavaScriptSDKをインストールする｢JS/CSSコンポーネントの追加と削除…｣を選択

SDKの準備


色見本３

SDKの準備

右上の検索欄に｢NCMB｣と入力して検索ボタンを押す


色見本３

SDKの準備

｢追加｣を選択

｢インストール開始｣を選択

｢components/ncmb/min.js｣にチェック

｢OK｣を選択

前半は以上です

↓そのまま

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

Education