2020.07.14「Node-REDで可視化してみた」

2020.07.04「IoT縛りの勉強会! IoTLT vol.65 @Youtube」

Transcript

1. Node-REDでDBを可視化してみた KMiura
2. 自己紹介 • 三浦 耕生（こうき） • 名古屋のゲーム会社 のサーバーエンジニア
3. SORACOMから小包が • SORACOMのブログ投稿キャンペーン に応募したらノベルティが届いた • 思ってたよりも早く着いた（ありがとうご ざいます！）
4. とりあえず動かしてみた • SORACOMコンソールから受け取り確認を 入れてデバイス登録すると開通する • これでSORACOM Harvestから温湿度を とってみる 1時間おきに点滅→
5. もう少しなにかしたいな • IBM Cloud Functionsでデータを取ってCloudantにためてみる • SORACOM FuncではIBM Cloud Functionsと連携できない（知っ てた • SORACOM BeamでRest API経由でデータを送信してみることに
6. 続きを書いてみた https://qrgo.page.link/KoPoB
7. 今回はその続編
8. データの可視化 • せっかくDBにためてるならデータを可視化したい • とりあえずNode-RED使うか • Dashboard使う ここまでがテンプレ
9. しかし、罠が… Dashboardを使うときには今動かしているデバイスの データを一定間隔で取得してグラフにプロットする DBのデータを可視化するにはあまり使えない…
10. 完
11. さすがに初参加の方に失礼
12. 他の手段はないのか?? • どうやらChartjsをNode-REDで使えるっぽい • 予めグラフに使う値を定義して出力させるっぽい https://github.com/masalinas/node-red-contrib-chartjs
13. フロー • Cloudantのデータに全文検索かけて直近 の100件に絞り込み • Chartjsノードに渡せる形に成形
14. 完成 • トリガーを実行することでプロットが 行われる • 配列の立て方もシンプルでグラフの カスタムが自由にできそう
15. なんとグラフを出力出来る • PNGとPDF • でもPDFは出力されず…
16. 複数のグラフを表示する • iframeで自力で組み込むしかない • 安定のBootstrap
17. DEMO
18. まとめ • リアルタイムでモニタリング • Dashboard • DBから持ってくる • Chartjs • Node-REDを使えばパーツ単位でUIを管理できる Node-RED最高！
19. 次回予告 • Raspberry Piでこのご時世に使い たいもの作ってみる • 絶賛準備中
20. END