MQTTとアンドロイドで本格的IoTを体験しよう

MQTTとアンドロイドで
本格的IoTを体験しよう
2015.07.20
日本IBM 坂井彰
IBM Bluemix
MQTTとアンドロイドで本格的IoTを体験しよう
• アイデアをまずは形にしてみる
• IoT FoundationとNode-REDを使った接続と
データの確認
• Visualization：リアルタイムな表示
MQTT
IoTF
Node-RED
• アプリケーション連携でデータを表示
• Analysis：データを分析、予測
IBM Bluemix
MQTTとアンドロイドで本格的IoTを体験しよう
IoT Foundation と Node-REDでIoTアプリを作成
■全体像
サービス
IoT Foundationサービスは
センサーデータを仲介する
アプリケーション
IBM IoT
Foundation
デバイス
IBM Bluemix
スマホのセンサーで計測した
データをクラウドサービスに送信
アプリはサービスからセンサー
データを取得して処理する
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
1. Bluemixにログインする・・・ Bluemix.net
2. Regionを米国南部(US South)に設定する
3. 「カタログ」、から、
Internet of Things Foundation Starterをクリック
URLの一部となるので
他と重複しないように名
前をつける
英数字とハイフンのみ
例) ABC0720+名前
+番号3桁
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
1. ステージングが終了するまで、しばし待つ（適宜、ブラウザのリロード）
2. アプリが稼動したら、メッセージ右側のURLをクリック
3. 画面右下の赤いボタンをクリックして
Node-REDInternetフローエディターを起動
4. あらかじめ用意されているフローは使用しないので
新しいシートを作成下図の＋をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
左側のパレット、「Input」
から、「ibmiot」をシートに
ドラッグ&ドロップ
左側のパレット、「Output」か
ら、「debug」と「websocket」を
ドラッグ&ドロップ
左側のパレット、「function」か
ら、「function」」をドラッグ&ド
ロップ
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
並べてつなぐ
Internet of Things Foundationと接続
（センサー／デバイスからの入力）
debugノード：流れてきているデータを右ペインに出力
functionノード：Javascriptを書いて処理を追加
websocket(出力)ノード：websocketへ出力
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
スマートフォンからMQTTでデータを飛ばす
Githubの次のリポジトリーからBluemixに直接デプロイします。https://github.com/ibm-messaging/IoT-html5-phone
https://ibm.biz/abc0720
画面下にスクロールし次のボタンをクリック
LOGINをクリックして、BluemixのIDとパスワードでログインします
アプリ名をやはり重複しないように指定（例: iot＋名前＋0720)
REGION、ORGANIZATION、SPACEを確認して、DEPLOYをクリック
画面下にスクロールし次のボタンをクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
自動でデプロイされたアプリをクリック
アプリを名の下のURLを
スマホのブラウザーからアクセス
スマホでデバイスIDの入力パネルが表示されるので、
IDを入力 (英数字のみ）
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
Bluemixの画面
で
Internet of
Thingsの資格情
報の表示をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
この画面を出した
ままで
Node-REDの画
面へ移動
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
スマートフォンのデータをMQTT で取得する
水色のノードを
ダブルクリック
Name(名前)は適当に記入
先ほどの画面の
API Keyと
API Tokenを入力。
Addをクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
他は全部チェックを入れて、
OKをクリック
その後、右上の Deploy
ボタンをクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
右ペインを debug に切り替えて、
データが送られていること、送られ
ているデータ、を確認
送られてきているデータから、加速度データ
を拾うようにします。
ax, ay, az
この3つを送り出すようにfunctionノードで
設定します
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
ピンクのノードを
ダブルクリック
msg.payload = {
"ax": msg.payload.d.ax,
"ay": msg.payload.d.ay,
"az": msg.payload.d.az
};
return msg;
入力したら
OKをクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
debugノードを
追加して
右上のDeployを
クリックし、右ペインで出力さ
れているデータを確認
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
websocketへの
出力を設定。ダブルクリック
Typeを Listen on として
Pathに /ws/sensor と入れて
OK をクリック
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
Node-REDのwebsocketからデータを取得する
アプリのアイコンをクリックし、画面
右上の GIT の追加をクリック
BluemixのIDとパスワードでログインし、リポジトリーをセットアップします。
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
htmlファイルをダウンロード
https://ibm.biz/abc0720dl
コードの編集をクリック
Publicフォルダを選択し、
ファイル、インポート、
ファイルで、ダウンロードした
html ファイルを
アップロード
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
インポートした visualize.html をクリック
10行目を編集。xxxxxxxxxのところをNode-REDの画面のURLから
.mybluemix.net より前の部分に置換
var wsUrl = 'ws://xxxxxxxxx.mybluemix.net/ws/sensor';
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
画面中央上部の
アイコンをクリックしてデプロイ
デプロイ終了後、経路欄のURLをクリック
デプロイ終了後、経路欄のURLをクリック
ブラウザーのURLの後ろに、/visualize.html を追加し、Enter
/visualize.html
MQTTとアンドロイドで本格的IoTを体験しよう
Internet of Things FoundationとNode-REDを使ってみる
スマホを動かして、メーターに表示されることを確認
MQTTとアンドロイドで本格的IoTを体験しよう
IoT Foundation と Node-REDでIoTアプリを作成
■全体像
サービス
IoT Foundationサービスは
センサーデータを仲介する
アプリケーション
IBM IoT
Foundation
websocket
デバイス
MQTT
スマホのセンサーで計測した
データをクラウドサービスに送信
IBM Bluemix
Bluemix User Group - BMXUG（ビーザグ）
Bluemixのユーザー会が発足しました！
ぜひご参加ください！
BMXUGはユーザー様主体、有志によって運営される
情報交換・ネットワーキングの場です
BMXUGへの参加方法
で「グループに参加」
http://ibm.biz/bmxug-facebook
で「コミュニティに参加」
http://bmxug.doorkeeper.jp
IBM Bluemix Challenge 2015
IBM Bluemixを利用したアプリ開発コンテスト
米国 IBM Watson研究所ご招待、Oculus Rift など多数の副賞
参加者特典として、参加者のフリートライアル期間を延長
ぜひご参加ください!!
http://ibm.biz/bmcontest
一般部門：応募締切 7月24日(金)
学生部門：応募締切 8月20日 (木)
特典：Bluemix無償利用 90日提供
副賞：Watson研究所ご招待、
Oculus Rift、他
新しい未来を予感できる、アプリやサービス
（学生の参加も可能）
特典：Bluemix無償利用 120日提供
副賞：Watson研究所ご招待
コネクテッド・ビークルまたはモビリティ／トラ
ンスポーテーションを支えるアプリ
(応募資格：大学生／大学院生限定)

Download Report