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

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

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

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

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

Fecdd3417cd7375cc0bd0352d72db27e?s=128

1ft-seabass

July 01, 2020
Tweet

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. ご清聴いただきまして ありがとうございました!