2020年のコミュニティ活動でのNode-RED関連の活動・開発を振り返る / Node-RED UG勉強会 2020 年末オンラインLTパーティ

Transcript

1. 2020年11月27日 (金) Node-RED UG勉強会 2020 年末オンラインLTパーティ @オンライン 　　豊田 陽介 (

   @youtoy )

2. 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社の研究所勤務 話題のものを たくさん購入 してる気がする ビジュアルプログラミング交流会 主催、その他にも複数主催 ガジェット好き その他

   IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） プライベートでの活動

3. 今年の活動の中で Node-REDが関わる話

4. やってみたこと、 良かった点の話

5. 月刊 I/O 8月号の記事執筆 Node-RED で機械学習（GoogleさんのTeachable Machine）を使う話 準備時に書いた Qiitaの記事も

6. Teachable Machine＋Node-REDの記事 Qiita の記事では、サンプルを動かすまでの手順を記載

7. Teachable Machine で 手軽に機械学習ができ、 それを容易に活用！

8. 余談： Teachable Machine 楽しい！ Node-RED は絡んでない話ではありますが、音を学習させた事例 Maker Faire Tokyo 2020

   や Tsukuba Mini Maker Faire 2020 の出展で活用 単体でもオススメ！

9. 3人で共同主催・講師をやったハンズオン 自分のネタはダッシュボード（可視化）・WebSocket関連 Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交 流会 コラボ ハンズオン資料 は公開済み

10. ハンズオンのテキスト用の記事 40枚オーバーの画像を掲載して、「ダッシュボード・リアルタイム通信 （Websocket）」を試す手順を説明 ⇒ シンプルだけど、短時間でいろいろ試せる内容を意識 スライダーと ゲージを試す ボタンを押し たら音声合成

11. 記事に書いた事例の話など：デモ動画 ゲージと MIDI対応デバイス、micro:bit の組み合わせの話 ノブの回転量 を可視化 X・Y方向の加速度 の値を可視化

12. デバイスの挙動確認を 分かりやすく！

13. ハンズオンのテキスト用の記事＋α HTML＋JavaScript、Node-RED のダッシュボードの両方でグラフ化 ⇒ ハンズオンでは、生成した乱数を Websocket で送り、グラフ化 ダッシュボード でグラフ化 Smoothie.js

    で グラフ化 オンラインハンズオンで全員が 試せるよう実機なしでデータ生成

14. Websocket のサーバ側も 準備でき、さらに可視化も

15. ビジュアルプログラミングだけでIoT システムの全体でビジュアルプログラミングのみ利用した IoT の仕組み

16. 　デモ動画： Lチカ？

17. 　デモ動画： 3Dオブジェクト連動

18. システム構成と処理内容など ・センサーの値取得 ・シリアル通信 ・LED制御 ・MQTTブローカー ・シリアル通信 ・MQTTの通信 グローバルな アクセス ・ボタンの制御

    ・MQTTの通信 ・LED制御

19. データの流れ IoTLT vol.61 @オンライン センサーの値 （シリアル通信） 特定の文字列 （シリアル通信） センサーの値 （MQTT）

    特定の文字列 （MQTT）

20. データの流れ（後に出てきた動画） センサーの値 （シリアル通信） 特定の文字列 （シリアル通信） センサーの値 （MQTT） 特定の文字列 （MQTT） 特定の文字列、

    センサーの値 （MQTT） センサーの値 （MQTT） 特定の文字列 （MQTT）

21. シリアル通信・MQTT の間、デバイスと IoT 通信のつなぎ役に！

22. OBSの外部からの遠隔操作をNode-REDで オンラインイベントのライブ配信等でも利用される OBS との組み合わせ 画面に表示するシーン （画面構成）の切り替え を Node-RED から

23. さらにLINEアプリとの連携を追加！ LINEアプリ上の操作で OBS のシーン切り替えを実現

24. デモ動画：LINEアプリからOBSを操作 https://www.youtube.com/watch?v=K2A2sBlboHU

25. デモ動画：コメント表示＋合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& 先ほどの仕組みと一緒 に合わせ込んだ仕組み

26. 全体構成（LINEアプリ連携バージョン） LINEアプリ上で 入力した内容を POSTで送信 MQTT PC スマホ等 MQTT Websocket HTTP

    リクエスト （POST） 受信したテキスト に合わせて処理を 場合分け

27. LINEアプリ連携に利用したNode-REDのノード ビジュアルプログラミングIoTLT vol5 @オンライン 以下のAPIを利用可能 ・LINE Messaging API 　・Reply Message

    　・Push Message ・LINE Notify Maintainers ・n0bisuke

28. enebular上で実装した内容 ビジュアルプログラミングIoTLT vol5 @オンライン LINEアプリから受信したテキストによって挙動を場合分け等

29. 試作済みの仕組み2つ の統合、別サービスの 連携をすべて担当

30. 他にもカメラ利用の 事例などあったけど

31. 間違いなく時間が 足りないので

32. 終わり！