29IoT IoT情報取得 スマホなどのデバイスからIoT情報(振動、加速度、温度等)を取得しプログラ ミングに利用 自動車向けIoT 自動車の走行情報を取得し運転者の挙動を分析
[mBaaS IoT] ドアセンサーとスマホ連携
-
Upload
-mobile-backend -
Category
Technology
-
view
1.914 -
download
4
Transcript of [mBaaS IoT] ドアセンサーとスマホ連携
![Page 1: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/1.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
ニフティ株式会社
ドア監視アプリを作ってみようIoTハンズオン
1
![Page 2: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/2.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
ハンズオン資料はこちら
http://goo.gl/y5ItWt(http://www.slideshare.net/mobilebackend/mbaas-iot)
![Page 3: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/3.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
事前準備
Monaca
ニフティクラウドmobile backend
https://ja.monaca.io/
http://mb.cloud.nifty.com/
※利用登録
※利用登録
※動作確認するため、Monacaのデバッグツールをダウンロードし、インストールしてください
3
![Page 4: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/4.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
スマートフォンアプリのバックエンド機能が
開発不要になるクラウドサービス
mobileBackend
as = mBaaS !!aService
初期コストの削減サーバー運用の手間削減
アプリ開発がスピードアップ!!!
4
ニフティクラウドmobile backendとは?
![Page 5: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/5.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
ニフティクラウドmobile backendとは?
IoTバックエンド機能として利用していただきます!
5
![Page 6: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/6.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
簡単に
全体
の状態(開く・閉める)をサーバーに保存
遠隔でスマホで見れるプッシュ通知で知らせる
ニフティクラウドmobile backend
6
![Page 7: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/7.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①ドアの状態を取得し、サーバーに保存する
7
![Page 8: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/8.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
全体図
Door SensorRaspberryPi
ドアセンサーからのデータを取得RaspberryPi経由
ニフティクラウドmobile backend(mBaaS)にデータを保存
スマホでデータを取得し、ドアの状態を知らせる
8
![Page 9: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/9.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
1.2 回路の準備作業
1.3 mobile backendと連携作業
1.1 RaspberryPiでNode-REDの説明
1.4 動作確認&解説
9
![Page 10: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/10.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
全体図
Door Sensor
RaspberryPi
Node-REDはRaspberryPiで動いています!※Node-REDを利用し、データを保存します
10
![Page 11: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/11.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
1.2 回路の準備作業
1.3 mobile backendと連携作業
1.1 RaspberryPiでNode-REDの説明
1.4 動作確認&解説
11
![Page 12: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/12.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Node-REDとは
参考:http://nodered.org/
GUI(ブラウザー)でモノ(Things)をつなぐためのツールNode.jsベースで自由にNode(ノード)をカスタマイズし、組み合わせることで、フロー設計が可能です
12
![Page 13: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/13.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Node-REDでフロー準備
ドアセンサー信号を受信
信号をmobile backendサーバに保存
DoorStatusINノード SaveDataToServerノード
13
![Page 14: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/14.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
RaspberryPiでNode-REDを準備
・Node.js、Node-REDをインストールする・Node-REDに
mobile backendサーバにデータの保存とプッシュ通知の登録を行うncmbdsノードを作成
ncmbds.htmlncmbds.js
・Node-REDフローの設計ファイルを作成
flows_raspberrypi.json RaspberryPi インストール済み
14
![Page 15: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/15.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Node-REDの準備
• RaspberryPiでNode.jsとNode-REDをインストール
wget http://node-arm.herokuapp.com/node_archive_armhf.deb
sudo dpkg -i node_archive_armhf.deb
npm -g install node-red
RaspberryPi インストール済み
15
![Page 16: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/16.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
• インストールしたNode-REDのフローとノードを準備します
Node-REDの準備
cd /root/.node-red
git clone https://github.com/ncmbadmin/nodered_ncmb.git
cd /root/.node-red/nodered_ncmb/nodes
npm -g install .
cp /root/.node-red/nodered_ncmb/flows_raspberrypi.json /root/.node-red/flows_raspberrypi.json
RaspberryPi 準備済み
nodeのソースコードはGithubに公開中
必要なnodeのlibraryをインストールします
16
![Page 17: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/17.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
• Node-REDが起動時に動作するようにpm2を利用し、設定
Node-REDの準備
sudo npm install -g pm2
pm2 start /usr/local/bin/node-red --node-args="--max-old-space-size=128" -- -v
pm2 save
pm2 startup
準備済みRaspberryPi 準備済み
17
![Page 18: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/18.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
1.2 回路の準備作業
1.3 mobile backendと連携作業
1.1 RaspberryPiでNode-REDの説明
1.4 動作確認&解説
18
![Page 19: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/19.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
回路の準備
•RaspberryPi 2 model B
•回路用•磁石リードスイッチセンサー : 1個•カーボン抵抗 1/4W 1kΩ : 2個•ジャンパーコード(オス-メス): 3本•ブレッドボード: 1個
19
![Page 20: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/20.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
回路の作成
これから作るイメージ
20
![Page 21: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/21.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
今回使うセンサー
• 磁石リードスイッチセンサー
http://akizukidenshi.com/catalog/g/gP-04025/秋月で1個 ¥150(税込)
21
![Page 22: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/22.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
今回使うセンサー
• 磁石リードスイッチセンサー:ドアが閉める・開ける状態によって、電流が流れ、信号が0か1として判定します。
22
![Page 23: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/23.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
補足:RaspberryPi 2 Model B GPIOについて
GPIOとは?
General Purpose Input / Output(汎用入出力)・Input(入力) :電気回路などからのデジタル信号を読み取る・Output(出力):他のデバイスの制御や信号の通知を行う
参考:https://www.raspberrypi.org/documentation/usage/gpio-plus-and-raspi2/
23
![Page 24: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/24.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
補足:ブレッドボードの使い方
中では薄いオレンジ線でつながっています24
![Page 25: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/25.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
回路設計
+3.3V
GND
GPIO23 Door switch sensor
25
![Page 26: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/26.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
RaspberryPiネットワーク準備
RaspberryPiに電源を入れ、LANケーブル(有線)でネットワークにつなぎます。
ローカルIPの確認を行いますので、上記の作業が終わりましたら、お声かけください!
26
![Page 27: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/27.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
PCでNode-REDにアクセス
RaspberryPiのIPが「192.168.10.x」の場合PCのブラウザーから、下記のURLをアクセスし、Node-REDを開きます。
192.168.10.x:188027
![Page 28: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/28.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Node-REDのフロー確認
RaspberryPiから信号を受けるとsaveDataToServerが実行されます
28
![Page 29: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/29.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
ノードをダブルクリックします
信号を受けるGPIOピンを指定します
Node-REDのフロー確認
29
![Page 30: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/30.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
サーバーにデータを保存するノードプッシュ通知を登録するノード
APIキーを指定します
保存先のクラス名、フィールド名を指定します
プッシュ通知を送るための設定をします
Node-REDのフロー確認
30
![Page 31: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/31.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
デバッグ用ノード(画面に受信した信号を表示する)
Node-REDのフロー確認
31
![Page 32: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/32.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
ドアセンサーを操作しましょう!
センサーの状態によって値(開:0/ 閉:1)が変わるかどうか確認
デバッグログを確認
Node-REDのフロー確認
32
![Page 33: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/33.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
1.2 回路の準備作業
1.3 mobile backendと連携作業
1.1 RaspberryPiでNode-REDの説明
1.4 動作確認&解説
33
![Page 34: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/34.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendと連携
http://mb.cloud.nifty.com/
※右クリックして新しいタブで開くと便利です。下記URLよりサイトにアクセスしてください。
ここをクリック
ここをクリック
34
![Page 35: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/35.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendと連携
「ログイン」をクリック
ご登録いただいた@nifty IDで
ログイン利用規約を確認後、同意して
利用開始!
35
![Page 36: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/36.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendと連携
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
mBaaSは、「アプリケーションキー」「クライアントキー」の2つのキーを使い、サーバー接続の認証を行っています。その2つのキーがアプリ作成時に生成されます。
「iotHandson」と入力してください
2つのキーは後で使います
OKをクリックすると管理画面が表示されます
36
![Page 37: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/37.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
mobile backendと連携
アプリ設定をクリック
ここにあります
コピー&ペーストで貼り付けて
設定が行えます
Node-REDで
アプリケーションキークライアントキー
を設定します。
ダブルクリックします
OKを選択し、右上の
Deployをクリックします
37
![Page 38: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/38.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
1.2 回路の準備作業
1.3 mobile backendと連携作業
1.1 RaspberryPiでNode-REDの説明
1.4 動作確認&解説
38
![Page 39: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/39.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
動作確認
ニフティクラウドmobile backendのデータストアの
DoorDataクラスにデータが保存されていることを確認します
39
![Page 40: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/40.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
解説
RaspberryPiのGPIO23を利用し、電流でスイッチのON/OFF状態判断
+3.3VGNDGPIO23
Door switch sensor
40
![Page 41: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/41.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
解説
Node-REDでフローを作成し、GPIO INから信号を受信すると、サーバにデータを保存する「saveData」というノードが実行されます
41
![Page 42: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/42.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
解説
saveDataノードでは以下のようにデータの保存処理を実装をしています
var NCMB = require(“ncmb”);
<省略>
RED.nodes.createNode(this,config);
this.appkey = config.appkey;
this.clikey = config.clikey;
this.classname = config.classname;
this.fieldname = config.fieldname;
var node = this;
this.on('input', function(msg) {
var ncmb = new NCMB(this.appkey, this.clikey);
var NCMBClass = ncmb.DataStore(this.classname);
var ncmbClass = new NCMBClass();
ncmbClass.set(this.fieldname, msg.payload);
ncmbClass.save();
node.send(msg);
});
NCMBにAPIキーを渡し、初期化します
データストアに保存するクラス名を指定します
保存するデータをsetで渡し、save()を実行するとサーバへ保存します
NCMBのSDKをインポートします
42
![Page 43: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/43.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
②スマホと連携し、監視アプリを作成
43
![Page 44: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/44.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
全体図
Door SensorRaspberryPi
44
![Page 45: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/45.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
事前準備
•Monacaの利用登録 https://ja.monaca.io/
45
![Page 46: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/46.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
https://ja.monaca.io/debugger.html
•Monacaデバッガーのインストール
事前準備
46
![Page 47: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/47.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
「Import Project」を選択してください
Monacaでアプリ作成
47
![Page 48: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/48.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
「インポート」をクリック
アプリの名前を入力
https://github.com/ncmbadmin/iot_ncmb/archive/master.zip を入力
Monacaでアプリ作成
コピー用:https://goo.gl/mnketq48
![Page 49: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/49.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
ダッシュボードの左側に作成したプロジェクトが追加されています
Monacaでアプリ作成
「開く」をクリック
49
![Page 50: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/50.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Monacaでアプリ作成
50
![Page 51: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/51.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Monacaで作成したアプリを連携するために、Javascript SDKをインポートします。
Monacaで「設定」>「JS/CSSコンポーネントの追加と削除...」を選択
MonacaでSDKインポート
右上の検索欄に「NCMB」と入力して検索ボタンを押す
51
![Page 52: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/52.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
「追加」を選択
「インストール開始」を選択
「components/ncmb/min.js」にチェックをつけて
「OK」を選択
↓そのまま
52
MonacaでSDKインポート
![Page 53: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/53.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
コピー用ページ
ソースコピー用のページを開いておきます
https://goo.gl/mnketq53
![Page 54: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/54.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
サーバ連携の初期化
index.htmlファイルを開き、次のコメントの直下にコードを追加します
54
![Page 55: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/55.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
APIキー設定
index.htmlにアプリケーションキーとクライアントキーを設定
55
![Page 56: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/56.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①ドアのステータスを表示する
これからこちらのメソッドを実装していきます。
56
![Page 57: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/57.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①ドアのステータスを表示する
STEP 1.1のコメントの直下に次のコードをタイプあるいはコピー&ペーストしてください。
57
![Page 58: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/58.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①ドアのステータスを表示する
58
次はここに書きます
STEP 1.2のコメントの直下に次のコードをタイプあるいはコピー&ペーストしてください。
![Page 59: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/59.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①ドアのステータスを表示する
59
STEP 1.2.1のコメントの直下に次のコードをタイプあるいはコピー&ペーストしてください。
![Page 60: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/60.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①ドアのステータスを表示する
60
このようになっていればOKです
![Page 61: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/61.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
①動作確認
スマホからドアの開閉状況を確認しましょう!(スマホ画面の更新をタップし、更新をしてください)
61
![Page 62: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/62.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
②タイムラインを表示する
これからこちらのメソッドを実装していきます。
62
![Page 63: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/63.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
②タイムラインを表示する
63
STEP 2.1のコメントの直下に次のコードをタイプあるいはコピー&ペーストしてください。
![Page 64: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/64.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
②タイムラインを表示する
64
STEP 2.2のコメントの直下に次のコードをタイプあるいはコピー&ペーストしてください。
次はここに書きます
![Page 65: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/65.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
※こちらではtimelineMe.jsを利用しています。詳細はhttps://mickaelr.github.io/jquery-timelineMe/
65
STEP 2.1.1のコメントの直下に次のコードをタイプあるいはコピー&ペーストしてください。
②タイムラインを表示する
![Page 66: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/66.jpg)
Copyright @ NIFTY Corporation All Rights Reserved 66
このようになっていればOKです
②タイムラインを表示する
![Page 67: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/67.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
②動作確認
67
スマホからドアの開閉状況を確認しましょう!(スマホ画面の更新をタップし、更新をしてください)
![Page 68: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/68.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
コード解説 ①
データストアDoorDataに検索する宣言
保存する日付createDateの序順にデータ検索
取得したデータによって、閉開画像を表示する
68
![Page 69: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/69.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
コード解説 ②
データストアDoorDataに検索する宣言
保存する日付createDateの序順にデータ検索
取得したデータによって、タイムラインのデータを作成する
69
![Page 70: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/70.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
③リアルタイムにプッシュ通知
70
![Page 71: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/71.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
やりたいこと
ドアを開閉すると
プッシュ通知で携帯に知らせる【ドアは開いています!】【ドアは閉じています!】
DoorApp
Door is opened now
71
![Page 72: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/72.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
mBaaSのプッシュ通知
ニフティクラウドmobile backend
プッシュ通知機能を無料で使えます!
72
![Page 73: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/73.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
サーバ
プッシュ通知
ここに
を使います! サーバの準備が必要不可欠!!
プッシュ通知
iPhone
Android
プッシュ通知
mBaaSのプッシュ通知
プッシュ通知機能を実装するためはサーバが必要です。でも、開発・運用していくのは大変…mBaaSを使えばサーバの開発・運用は不要に!
73
![Page 74: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/74.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
やりたいこと
RaspberryPi
ドアを開閉すると
RaspberryPi経由し、プッシュ通知を
登録しますAPNs + GCM
DoorApp
Door is opened now
プッシュ通知が配信されます
74
![Page 75: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/75.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
受信アプリ側
Androidプッシュ通知APIキーを取得
RaspberryPi側でプッシュ通知送信(済み)
mBaaS側・アプリでプッシュ通知APIキー設定
75
![Page 76: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/76.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
RaspberryPi側でプッシュ通知送信(済み)
Node-REDを開いてください(コード解説は後程)
SendPushの設定項目は「Yes」を選択
PushTimingの設定項目は通知タイミングを設定
PushDeviceで配信予定端末タイプを選択
76
![Page 77: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/77.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
アプリ側の準備
Androidプッシュ通知APIキーを取得
RaspberryPi側でプッシュ通知送信(済み)
mBaaS側・アプリでプッシュ通知APIキー設定
77
![Page 78: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/78.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
アプリ側の準備
Monacaでプッシュ通知を利用するために、Monacaプッシュ通知プラグインをインポートします。Monacaで「設定」>「Cordovaプラグインの管理」 を選択します
検索欄に「NCMB」と入力して検索ボタンを押す
78
![Page 79: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/79.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
アプリ側の準備
「有効」ボタンを押し、組み込まれたプラグインの一覧で確認
79
![Page 80: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/80.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
アプリ側の準備
index.htmlファイルを開き、STEP 3のコメントの直下にコードを追加します
80
![Page 81: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/81.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
アプリ側の準備
Androidプッシュ通知APIキーを取得
RaspberryPi側でプッシュ通知送信(済み)
mBaaS側・アプリでプッシュ通知APIキー設定
81
![Page 82: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/82.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Androidのプッシュ通知設定
Android Firebaseにログインしますhttps://console.firebase.google.com/
FCMのAPIキーの発行
「新規プロジェクトを作成...」をクリック
82
「プロジェクトを作成.」をクリック
![Page 83: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/83.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Androidのプッシュ通知設定
GCMのAPIキーの発行
Android 「クラウドメッセージング」をクリック
「プロジェクトを設定」をクリック
GCMAPIキー
※後で使用します
FCMSENDER_ID
※後で使用します
![Page 84: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/84.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
手順
アプリ側の準備
Androidプッシュ通知APIキーを取得
RaspberryPi側でプッシュ通知送信(済み)
mBaaS側・アプリでプッシュ通知APIキー設定
84
![Page 85: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/85.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
mBaaS側でAPIキーを設定します
共通
Android
プッシュ通知プッシュ通知の許可→「許可する」を選択して「保存する」をクリック
Androidプッシュ通知APIキー→FCMのAPIキーを入力して「保存する」をクリック
mobile backendのダッシュボードで「プッシュ通知」を開いて設定を行います
85
![Page 86: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/86.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
Monaca側でプロジェクト番号を設定します
index.htmlファイルを開き、
「SENDER_ID(Android_only)」はFCMの送信者 IDに書き換えてください
Ctrl + S(保存)を忘れずに!
86
![Page 87: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/87.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
端末へビルド
• Monacaでメニュー「ビルド」>「Androidアプリのビルド」を選択
87
![Page 88: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/88.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
端末へビルド
• Monacaでメニュー「ビルド」開始
88
![Page 89: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/89.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
端末へビルド
• Monacaでメニュー「ビルド」完了、アプリを端末にインストール
89
![Page 90: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/90.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
動作確認
ドアを開閉すると
プッシュ通知で携帯に知らせる【ドアは開けています!】【ドアは閉めています!】
DoorApp
Door is opened now
※タイミングによって、プッシュ通知が届くまでは時間がかかる場合があります
90
![Page 91: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/91.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
コード解説(Node-RED)
実装コード プッシュ通知のターゲットをフォームで入力した値を判定し設定
プッシュ通知を登録
91
![Page 92: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/92.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
コード解説(Node-RED)
プッシュ通知を登録するインスタンスを作成
プッシュ通知の送信条件を指定
プッシュ通知をサーバに登録
92
![Page 93: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/93.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
まとめ
93
![Page 94: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/94.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
まとめ
遠隔監視
様々な機能を簡単に実装できます!プッシュ通知も!Android, iOSアプリ両方対応!
センサーデータ保存
プッシュ通知
94
![Page 95: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/95.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
参考
充実した日本語ドキュメントをご用意しています
http://mb.cloud.nifty.com/doc/
95
![Page 96: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/96.jpg)
Copyright @ NIFTY Corporation All Rights Reserved
参考
https://github.com/NIFTYCloud-mbaas/UserCommunity
質問、作ったアプリの共有TIPSがあったらぜひ活用してください!
サポートやコミュニティもあります
96
![Page 97: [mBaaS IoT] ドアセンサーとスマホ連携](https://reader031.fdocument.pub/reader031/viewer/2022021418/586f71891a28ab10258b4fdd/html5/thumbnails/97.jpg)
Copyright @ NIFTY Corporation All Rights Reserved 97