Node-RED でデバイス・アプリ連携（ローカル通信もネット経由も） / TECH Street _ Node-RED

by you（@youtoy）

Embed

Start on current slide

Slide 1

Slide 1 text

Node-RED でデバイス・アプリ連携（ローカル通信もネット経由も） 2021年5月27日 (木) TECH Street @オンライン　　豊田陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介（@youtoy）自己紹介普段は、某通信会社の研究所勤務自宅に各種デバイス等がたくさんビジュアルプログラミング・ IoTなどのテーマ関連ガジェット好きその他 IT系イベント主催・運営、登壇なども、子ども向けの活動いろいろ（IT系以外も）プライベートでの活動

Slide 3

Slide 3 text

今日の話はNode-REDでデバイス連携

Slide 4

Slide 4 text

デバイス間をつなぐ仕組み・できること・HTTPリクエスト・Websocket ・MQTT デバイス間で直接ネット経由・シリアル通信・BLE ・MIDI つなぐ仕組みできること・既製品のデータ取得（温湿度計など）・電子工作デバイスで　のプロトタイピング　・○○を検知したらLINE 　・Slack等に通知・スマートホームの　仕組みを自前で作る Node-RED で利用可能なものの例（いろいろある中の一部）

Slide 5

Slide 5 text

PCを使い、まずは多機能なデバイスと組み合わせてプロトタイピングしてみる

Slide 6

Slide 6 text

例えばBluetooth搭載デバイスとの間で温度 25.1℃ 湿度 56％ M5Stack＋センサー PC 部屋の環境モニタセンシング可視化

Slide 7

Slide 7 text

具体的なフロー（プログラムの部分）

Slide 8

Slide 8 text

具体的なフロー（プログラムの部分）値の取り出し、グラフ化 BLE接続、データ取得などデータ変換

Slide 9

Slide 9 text

デモ動画（温湿度のグラフ化）

Slide 10

Slide 10 text

テキストプログラミングでもできますが

Slide 11

Slide 11 text

Node-REDで手軽に実現 JavaScript の例 Node-REDの例 GUI上でボタン操作・文字入力で進める BLE の処理の流れを把握しつつプログラミング

Slide 12

Slide 12 text

さらに仕組みを追加するのも手軽に温度 25.1℃ 湿度 56％ M5Stack＋センサー PC 部屋の環境モニタセンシング可視化スマホアプリ通知スマホインターネット経由

Slide 13

Slide 13 text

やりとりの仕組みを別のものにしてみる

Slide 14

Slide 14 text

インターネットを経由させるように変更デバイス＋センサー PC 無線（BLE）デバイス＋センサー（多地点） PC インターネット経由 MQTT ブローカーリアルタイム通信（MQTT）近距離無線遠隔地間での通信

Slide 15

Slide 15 text

接続方法を変えるのも手軽にデバイス＋センサー PC 無線（BLE）デバイス＋センサー PC 有線（シリアル通信） BLE非対応デバイス BLE対応デバイス

Slide 16

Slide 16 text

実際に作ってみると（人感センサー利用）デバイス＋センサー（多地点） PC インターネット経由 MQTT ブローカーリアルタイム通信（MQTT）画面表示フロー

Slide 17

Slide 17 text

具体的なフロー（プログラムの部分） MQTTブローカーとの接続、データ処理など場所 A 場所 B 可視化

Slide 18

Slide 18 text

別アプリの制御にも

Slide 19

Slide 19 text

デモ動画（OBSのアプリ外からの制御）

Slide 20

Slide 20 text

デバイス関連の補足

Slide 21

Slide 21 text

【デバイス】・M5Stack関連・obniz 連携できるデバイス・アプリの例たくさんの種類がある中で利用したことがあるものの一部デバイス内/ローカルインターネット経由【デバイス】・micro:bit ・toio ・M5Stack関連・MIDI対応デバイス【アプリ】・LINE ・Slack（Discord、 Teams）【アプリ】・OBS

Slide 22

Slide 22 text

デバイスで動作させたプログラム① ブロックベースのビジュアルプログラミング（UIFlow）で作成 BLE経由で温湿度のデータを送信

Slide 23

Slide 23 text

デバイスで動作させたプログラム② MQTT経由で人感センサーで取得した値を送信

Slide 24

Slide 24 text

終わり！