ビジュアルプログラミングIoTLT vol3

ビジュアルプログラミングIoTLT vol3「作った登壇リアクションシステムをベースにNode-REDダッシュボード機能をゆるく紹介」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Transcript

1. [サブタイトル] [タイトル] ワンフットシーバス 田中正吾 ビジュアルプログラミング勉強会 vol.3 作った登壇リアクションシステムをベースに Node-REDダッシュボード機能をゆるく紹介 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. オンライン授業リアクションわかりにくい問題
5. 大学のオンライン授業で 生徒の反応をみる仕組みを作ったんです https://www.1ft-seabass.jp/memo/2020/06/04/tokai-university-special-lecture-202005/
6. こんな思いがあった
7. 今日のためにもシンプルに作ってみました リアクションシステム VIoTLT v0.3 ver 当日は QRコードが ありました
8. あ、IoTと結び付けそびれたので 10分実装でobnizへ、いいね総数を送るように！
9. Node-RED Node-REDはハードウェアデバイス、APIおよびオンラインサービスを接続できるためのツールです。 ブラウザベースのエディタによってパレットに並ぶ 多種多様なノードを結びつけて用意にフローを作成して実行します。
10. 今回のNode-REDはこんな仕組み いいねボタンが押されるとLikeCountAll・LikeCountCurrentで、いいね状況を貯めてグラフに反映。 obnizにはメッセージ機能で、いいね総数を送るようにしている。
11. UIはNode-REDダッシュボードノードで作ってます
12. ちょっとみてみましょう https://flows.nodered.org/node/node-red-dashboard
13. Node-REDダッシュボードノードは グラフとボタン部分 グラフ部分 いいねボタン
14. ➔ Node-RED dashboard いろいろメモ ◆ 置いていくだけで、ある程度簡単にUIやグラフが設定 することができる。たのしい。 ◆ データを入れていくだけでグラフに反映してくれるの で、とりあえず可視化にも良い ◆ websocketで超リアルタイムに反応してくれる。サー バー性能の許す範囲で。 ◆ 余談：細かくカスタマイズする場合はHTMLを受け入 れるtemlateノードでカスタマイズ「は」できる ◆ 余談：見ての通り「複数人が同じ画面で見る」仕組み に強い。ユーザーごと出し分けたりは難しい。ダッ シュボードという意味では合ってる（はず）！
15. ふりかえり https://www.1ft-seabass.jp/memo/2020/06/04/tokai-university-special-lecture-202005/
16. 宣伝：Node-RED本が出ます！ https://www.1ft-seabass.jp/memo/2020/06/21/nodered-book-released-2/
17. ご清聴いただきまして ありがとうございました！