$30 off During Our Annual Pro Sale. View Details »

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

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

you(@youtoy)
PRO

May 27, 2021
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

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