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

by you（@youtoy）

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

豊田陽介（@youtoy）自己紹介普段は、某通信会社の研究所勤務話題のものをたくさん購入してる気がするビジュアルプログラミング交流会主催、その他にも複数主催ガジェット好きその他 IT系イベント主催・登壇・運営、多数参加子ども向けの活動いろいろ（IT系以外も）プライベートでの活動

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

余談： Teachable Machine 楽しい！ Node-RED は絡んでない話ではありますが、音を学習させた事例 Maker Faire Tokyo 2020 や Tsukuba Mini Maker Faire 2020 の出展で活用単体でもオススメ！

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ハンズオンのテキスト用の記事＋α HTML＋JavaScript、Node-RED のダッシュボードの両方でグラフ化 ⇒ ハンズオンでは、生成した乱数を Websocket で送り、グラフ化ダッシュボードでグラフ化 Smoothie.js でグラフ化オンラインハンズオンで全員が試せるよう実機なしでデータ生成

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

　デモ動画： Lチカ？

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

全体構成（LINEアプリ連携バージョン） LINEアプリ上で入力した内容を POSTで送信 MQTT PC スマホ等 MQTT Websocket HTTP リクエスト（POST）受信したテキストに合わせて処理を場合分け

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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