Node-RED Con Tokyo 2019 講演資料

1. 6-A
IBM Watson IoT を用いた遠隔ゲームコントローラーと
Node-RED による簡易カスタマイズによる実現

2. 本日の講演内容
https://bmxug.connpass.com/event/134792/
の前に・・・

3. テトリスを作ってスマホで振って遊ぼう！
2019.07.13 #bmxug #bmxgg7.13 復習

4. 今回作るもの
IoT
スマホをコントローラーにして使う！
7.13 復習

5. デモ
Node-
RED テトリス
画面
スマホ
画面
7.13 復習

6. IoT(Internet of Things)
パブリッシャー ブローカー サブスクライバー
7.13 復習

7. Node-RED フローの完成形
http リクエスト（GET /tetris）
http リクエスト（GET /publish）
謎フロー
テトリスゲーム画面
スマホ画面
入力は ibmiot ノード、
出力は WebSocket ノード
（と debug ノード）

8. フロー構成とデータの流れ
MQTT
ブローカー
GET /publish
GET /tetris
MQTT サブスクライバー
HTTP(S)
MQTT
WebSocket
（JavaScript で）
傾き検知
傾き情報
左右傾き > 横移動
前後傾き > 回転
Node-RED

9. JavaScript による傾き検知
:
if( window.DeviceOrientationEvent ){
// システムが DeviceOrientation イベントに対応している場合、傾き検知時のイベントハンドラを定義
window.addEventListener( "deviceorientation"
, deviceOrientation );
}
:
function deviceOrientaion( e ){
var dir = e.alpha; // 向いている方角
var tiltFB = e.beta; // 左右の傾き
var tiltLR = e.gamma; // 前後の傾き
var ori = { tiltLR: tiltLD, tiltFB: tiltFB, dir: dir };
:
}

10. JavaScript による MQTT パブリッシュ
:
<script src="/mqttws31.js"></script> <!– Paho -->
:
var pubTopic = "iot-2/evt/status/fmt/json"; // MQTT のトピック
var clientID = "d:quickstart:MyDevice:(Device ID)"; // MQTT のクライアントID
// MQTT ブローカーを指定
var client = new Messaging.Client( "quickstart.messaging.internetofthings.ibmcloud.com", 443, clientID );
:
phoneData.publish = function(){
// JSON データを MQTT ブローカーへ送信
var message = new Messaging.Message( phoneData.toJson() );
message.destinationName = pubTopic;
client.send( message );
}
:

11. IBM Cloud の MQTT ブローカー
IBM Cloud 内で Node-RED を作成した時に標準で使える ibmiot ノードと連携するための MQTT ブ
ローカー
IBM Watson IoT サービスの一部として無料で利用可能
ホスト: quickstart.messaging.internetofthings.ibmcloud.com:443
トピック: "iot-2/evt/status/fmt/json"
クライアントID: "d:quickstart:（デバイス名）:（デバイスID）"
で MQTT パブリッシュすると、Node-RED 内の ibmiot in ノードの Device ID に同じものを指定する
だけで簡単に MQTT サブスクライブできる。
MQTT
ブローカー

12. MQTT データを WebSocket へ
MQTT サブスクライバーで受け取り、
（オプション）
全ての傾き情報を送るのは意味ないの
で、１秒に２つだけにフィルタリング
受け取った傾き情報を /ws/sensor へ
WebSocket で送信

13. JavaScript による WebSocket 監視
:
var socket;
var wsUrl = "wss://" + location.hostname + "/ws/sensor"; // 監視先
function connect(){
socket = new WebSocket(wsUrl);
socket.onmessage = function(e) { // WebSocket イベントを監視
var sensorData = JSON.parse(e.data);
if( sensorData.d.ori.tiltLR >= 50 ){
// 左右傾きが 50 度以上になったら右
keyPress( "right" );
render();
}else if( sensorData.d.ori.tiltLR <= -50 ){
// 左右傾きが -50 度以下になったら左
keyPress( "left" );
render();
}else if( sensorData.d.ori.tiltFB >= 0 && sensorData.d.ori.tiltFB <= 30 ){
// 前後傾きが 0 度以上 30 度以下になったら回転
keyPress( "rotate" );
render();
:

14. （改めて）全体像
MQTT
ブローカー
GET /publish
GET /tetris
MQTT サブスクライバー
HTTP(S)
MQTT
WebSocket
（JavaScript で）
傾き検知
左右傾き > 横移動
前後傾き > 回転
IBM Cloud 上の
Node-RED
IBM Cloud 上の
MQTT ブローカー

15. まとめ
• IBM Cloud で Node-RED 環境を作ると、MQTT に便利な ibmiot
ノードや MQTT ブローカーを簡単に使うことができる
• スマートフォンのブラウザで使える JavaScript は（ジャイロセン
サー搭載機種であれば）スマートフォンの傾きを検知することがで
きる
• この傾き情報を使ってスマートフォンをゲームコントローラーのように扱う
ことができる
• MQTT や WebSocket を利用することで物理的に離れた場所から画
面をコントロールすることができる
• Node-RED だけで HTTP, MQTT, WebSocket など多くのプロトコ
ルに対応したデータフローを定義でき、HTML5 ベースの（ゲー
ム）アプリケーションに対するメッセージ処理含めて実装できる

16. 6-A
IBM Watson IoT を用いた遠隔ゲームコントローラーと
Node-RED による簡易カスタマイズによる実現