Node-RED Park Vol.6

Node-RED Park Vol.6 「わたしがダッシュボードノードの画面作りで重宝しているサードパーティノード紹介」の登壇資料です。

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

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

Transcript

1. Node-RED Park Vol.6
   わたしがダッシュボードノードの画面作りで
   重宝しているサードパーティノード紹介
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

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

   View Slide

4. ダッシュボード自体も使いやすいが
   良いサードパーティノードも色々ある
   https://flows.nodered.org/search?term=dashboard&type=node
   

   View Slide

5. IoT 系講師の教材で届いたデータを表示する
   ダッシュボードは重宝します
   

   View Slide

6. こんなかんじ
   

   View Slide

7. データが並べられる ui-table ノードはいつも使う
   来たデータのログとか、イチから作るの大変ですし
   https://flows.nodered.org/node/node-red-node-ui-table
   

   View Slide

8. デジタルサイネージ系
   

   View Slide

9. 動画表示の ui-media ノードで
   動画を画面いっぱいに表示
   https://flows.nodered.org/node/node-red-contrib-ui-media
   

   View Slide

10. ui-iframe はコンテンツの自動切替や
    他サイトの表示で使いやすい
    https://flows.nodered.org/node/node-red-node-ui-iframe
    

    View Slide

11. 入力系
    

    View Slide

12. 画像アップロード
    https://flows.nodered.org/node/node-red-contrib-ui-upload
    

    View Slide

13. ウェブカメラ
    https://flows.nodered.org/node/node-red-node-ui-webcam
    

    View Slide

14. エクストラ
    ● フロー検索を眺めておもしろダッシュボード系ノード紹介
    ● うまく使えていないダッシュボード系ノードもある
    ● SVGノード使いこなすとスゴイ（スゴそう）
    

    View Slide