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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 別アプリの制御にも
    

    View Slide

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

    View Slide

20. デバイス関連の補足
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. 終わり！
    

    View Slide