[サブタイトル] [タイトル] ワンフットシーバス 田中正吾 ビジュアルプログラミング勉強会 vol.3 作った登壇リアクションシステムをベースに Node-REDダッシュボード機能をゆるく紹介 ワンフットシーバス 田中正吾

私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！

田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。

オンライン授業リアクションわかりにくい問題

大学のオンライン授業で 生徒の反応をみる仕組みを作ったんです https://www.1ft-seabass.jp/memo/2020/06/04/tokai-university-special-lecture-202005/

こんな思いがあった

今日のためにもシンプルに作ってみました リアクションシステム VIoTLT v0.3 ver 当日は QRコードが ありました

あ、IoTと結び付けそびれたので 10分実装でobnizへ、いいね総数を送るように！

Node-RED Node-REDはハードウェアデバイス、APIおよびオンラインサービスを接続できるためのツールです。 ブラウザベースのエディタによってパレットに並ぶ 多種多様なノードを結びつけて用意にフローを作成して実行します。

今回のNode-REDはこんな仕組み いいねボタンが押されるとLikeCountAll・LikeCountCurrentで、いいね状況を貯めてグラフに反映。 obnizにはメッセージ機能で、いいね総数を送るようにしている。

UIはNode-REDダッシュボードノードで作ってます

ちょっとみてみましょう https://flows.nodered.org/node/node-red-dashboard

Node-REDダッシュボードノードは グラフとボタン部分 グラフ部分 いいねボタン

➔ Node-RED dashboard いろいろメモ ◆ 置いていくだけで、ある程度簡単にUIやグラフが設定 することができる。たのしい。 ◆ データを入れていくだけでグラフに反映してくれるの で、とりあえず可視化にも良い ◆ websocketで超リアルタイムに反応してくれる。サー バー性能の許す範囲で。 ◆ 余談：細かくカスタマイズする場合はHTMLを受け入 れるtemlateノードでカスタマイズ「は」できる ◆ 余談：見ての通り「複数人が同じ画面で見る」仕組み に強い。ユーザーごと出し分けたりは難しい。ダッ シュボードという意味では合ってる（はず）！

ふりかえり https://www.1ft-seabass.jp/memo/2020/06/04/tokai-university-special-lecture-202005/

宣伝：Node-RED本が出ます！ https://www.1ft-seabass.jp/memo/2020/06/21/nodered-book-released-2/

ご清聴いただきまして ありがとうございました！