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