Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2020.07.14「Node-REDで可視化してみた」
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
KMiura
July 14, 2020
Science
0
560
2020.07.14「Node-REDで可視化してみた」
2020.07.04「IoT縛りの勉強会! IoTLT vol.65 @Youtube」
KMiura
July 14, 2020
Tweet
Share
More Decks by KMiura
See All by KMiura
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
1.2k
Amazon Rekognitionを使ったインターホンハック
miura55
0
110
Pythonでルンバをハックしてみた
miura55
0
210
あなたの知らないクラフトビールの世界
miura55
0
400
Storage Browser for Amazon S3を触ってみた + α
miura55
0
260
Cloudflare R2をトリガーにCloudflare Workersを動かしてみた
miura55
0
260
あのボタンでつながるSORACOM
miura55
0
160
Postman Flowsで作るAPI連携LINE Bot
miura55
0
420
Lambdaと共に歩んだAWS
miura55
3
940
Other Decks in Science
See All in Science
academist Prize 4期生 研究トーク延長戦!「美は世界を救う」っていうけど、どうやって?
jimpe_hitsuwari
0
500
MCMCのR-hatは分散分析である
moricup
0
610
AIによる科学の加速: 各領域での革新と共創の未来
masayamoriofficial
0
470
HajimetenoLT vol.17
hashimoto_kei
1
190
AkarengaLT vol.41
hashimoto_kei
1
120
AI(人工知能)の過去・現在・未来 —AIは人間を超えるのか—
tagtag
PRO
1
250
データベース08: 実体関連モデルとは?
trycycle
PRO
0
1k
やるべきときにMLをやる AIエージェント開発
fufufukakaka
2
1.3k
データベース11: 正規化(1/2) - 望ましくない関係スキーマ
trycycle
PRO
0
1.1k
Text-to-SQLの既存の評価指標を問い直す
gotalab555
1
190
主成分分析に基づく教師なし特徴抽出法を用いたコラーゲン-グリコサミノグリカンメッシュの遺伝子発現への影響
tagtag
PRO
0
220
人生を変えた一冊「独学大全」のはなし / Self-study ENCYCLOPEDIA: The Book Which Change My Life #独学大全 #EM推し本
expajp
0
120
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
110
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
67
37k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
690
Between Models and Reality
mayunak
2
240
Raft: Consensus for Rubyists
vanstee
141
7.4k
Producing Creativity
orderedlist
PRO
348
40k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
160
A better future with KSS
kneath
240
18k
Navigating Weather and Climate Data
rabernat
0
140
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
320
Transcript
Node-REDでDBを可視化してみた KMiura
自己紹介 • 三浦 耕生(こうき) • 名古屋のゲーム会社 のサーバーエンジニア
SORACOMから小包が • SORACOMのブログ投稿キャンペーン に応募したらノベルティが届いた • 思ってたよりも早く着いた(ありがとうご ざいます!)
とりあえず動かしてみた • SORACOMコンソールから受け取り確認を 入れてデバイス登録すると開通する • これでSORACOM Harvestから温湿度を とってみる 1時間おきに点滅→
もう少しなにかしたいな • IBM Cloud Functionsでデータを取ってCloudantにためてみる • SORACOM FuncではIBM Cloud Functionsと連携できない(知っ
てた • SORACOM BeamでRest API経由でデータを送信してみることに
続きを書いてみた https://qrgo.page.link/KoPoB
今回はその続編
データの可視化 • せっかくDBにためてるならデータを可視化したい • とりあえずNode-RED使うか • Dashboard使う ここまでがテンプレ
しかし、罠が… Dashboardを使うときには今動かしているデバイスの データを一定間隔で取得してグラフにプロットする DBのデータを可視化するにはあまり使えない…
完
さすがに初参加の方に失礼
他の手段はないのか?? • どうやらChartjsをNode-REDで使えるっぽい • 予めグラフに使う値を定義して出力させるっぽい https://github.com/masalinas/node-red-contrib-chartjs
フロー • Cloudantのデータに全文検索かけて直近 の100件に絞り込み • Chartjsノードに渡せる形に成形
完成 • トリガーを実行することでプロットが 行われる • 配列の立て方もシンプルでグラフの カスタムが自由にできそう
なんとグラフを出力出来る • PNGとPDF • でもPDFは出力されず…
複数のグラフを表示する • iframeで自力で組み込むしかない • 安定のBootstrap
DEMO
まとめ • リアルタイムでモニタリング • Dashboard • DBから持ってくる • Chartjs •
Node-REDを使えばパーツ単位でUIを管理できる Node-RED最高!
次回予告 • Raspberry Piでこのご時世に使い たいもの作ってみる • 絶賛準備中
END