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
Node-RED でデバイス・アプリ連携(ローカル通信もネット経由も) / TECH Stre...
Search
you(@youtoy)
PRO
May 27, 2021
Technology
0
4.8k
Node-RED でデバイス・アプリ連携(ローカル通信もネット経由も) / TECH Street _ Node-RED
you(@youtoy)
PRO
May 27, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
イベントで大活躍する電子ペーパー名札を作る(その2) 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
you
PRO
0
180
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
you
PRO
0
330
M5Stack Chain DualKey を UIFlow 2.0 + USB接続で試す / ビジュアルプログラミングIoTLT vol.22
you
PRO
2
190
ローカルLLMをJavaScriptで(少しAIエージェントSDKなどの話も) / 冬のJavaScript祭り @Pleasanter Lounge
you
PRO
0
960
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
93
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
210
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
920
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
480
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
57
Other Decks in Technology
See All in Technology
スピンアウト講座03_CLAUDE-MDとSKILL-MD
overflowinc
0
780
Phase05_ClaudeCode入門
overflowinc
0
1.3k
Tebiki Engineering Team Deck
tebiki
0
27k
20260323_データ分析基盤でGeminiを使う話
1210yuichi0
0
170
「コントロールの三分法」で考える「コト」への向き合い方 / phperkaigi2026
blue_goheimochi
0
130
ABEMAのバグバウンティの取り組み
kurochan
1
390
Phase12_総括_自走化
overflowinc
0
900
生成AIで速度と品質を両立する、QAエンジニア・開発者連携のAI協調型テストプロセス
shota_kusaba
0
360
Astro Islandsの 内部実装を 「日本で一番わかりやすく」 ざっくり解説!
knj
0
180
visionOS 開発向けの MCP / Skills をつくり続けることで XR の探究と学習を最大化
karad
1
1.2k
大規模ECサイトのあるバッチのパフォーマンスを改善するために僕たちのチームがしてきたこと
panda_program
1
340
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
kaomi_wombat
0
210
Featured
See All Featured
Mind Mapping
helmedeiros
PRO
1
130
AI: The stuff that nobody shows you
jnunemaker
PRO
3
460
Chasing Engaging Ingredients in Design
codingconduct
0
150
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
9.9k
Producing Creativity
orderedlist
PRO
348
40k
Git: the NoSQL Database
bkeepers
PRO
432
67k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Abbi's Birthday
coloredviolet
2
5.6k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.2k
How GitHub (no longer) Works
holman
316
150k
Transcript
Node-RED でデバイス・アプリ連携 (ローカル通信もネット経由も) 2021年5月27日 (木) TECH Street @オンライン 豊田 陽介
( @youtoy )
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 自宅に各種デバイス等 がたくさん ビジュアルプログラミング・ IoTなどのテーマ関連 ガジェット好き その他 IT系イベント主催・運営、登壇なども、
子ども向けの活動いろいろ(IT系以外も) プライベートでの活動
今日の話はNode-REDで デバイス連携
デバイス間をつなぐ仕組み・できること ・HTTPリクエスト ・Websocket ・MQTT デバイス間で直接 ネット経由 ・シリアル通信 ・BLE ・MIDI つなぐ
仕組み できる こと ・既製品のデータ取得 (温湿度計など) ・電子工作デバイスで のプロトタイピング ・◦◦を検知したらLINE ・Slack等に通知 ・スマートホームの 仕組みを自前で作る Node-RED で利用可能なものの例(いろいろある中の一部)
PCを使い、まずは多機能な デバイスと組み合わせて プロトタイピングしてみる
例えばBluetooth搭載デバイスとの間で 温度 25.1℃ 湿度 56% M5Stack+センサー PC 部屋の環境モニタ センシング 可視化
具体的なフロー(プログラムの部分)
具体的なフロー(プログラムの部分) 値の取り出し、 グラフ化 BLE接続、データ取得など データ変換
デモ動画(温湿度のグラフ化)
テキストプログラミング でもできますが
Node-REDで手軽に実現 JavaScript の例 Node-REDの例 GUI上でボタン 操作・文字入力 で進める BLE の処理の流れ を把握しつつ
プログラミング
さらに仕組みを追加するのも手軽に 温度 25.1℃ 湿度 56% M5Stack+センサー PC 部屋の環境モニタ センシング 可視化
スマホアプリ通知 スマホ インターネット 経由
やりとりの仕組みを 別のものにしてみる
インターネットを経由させるように変更 デバイス +センサー PC 無線(BLE) デバイス +センサー (多地点) PC インターネット経由
MQTT ブローカー リアルタイム 通信(MQTT) 近距離無線 遠隔地間での通信
接続方法を変えるのも手軽に デバイス +センサー PC 無線 (BLE) デバイス +センサー PC 有線
(シリアル通信) BLE非対応 デバイス BLE対応 デバイス
実際に作ってみると(人感センサー利用) デバイス +センサー (多地点) PC インターネット経由 MQTT ブローカー リアルタイム 通信(MQTT)
画面表示 フロー
具体的なフロー(プログラムの部分) MQTTブローカーとの 接続、データ処理など 場所 A 場所 B 可視化
別アプリの制御にも
デモ動画(OBSのアプリ外からの制御)
デバイス関連の補足
【デバイス】 ・M5Stack関連 ・obniz 連携できるデバイス・アプリの例 たくさんの種類がある中で利用したことがあるものの一部 デバイス内/ローカル インターネット経由 【デバイス】 ・micro:bit ・toio
・M5Stack関連 ・MIDI対応デバイス 【アプリ】 ・LINE ・Slack(Discord、 Teams) 【アプリ】 ・OBS
デバイスで動作させたプログラム① ブロックベースのビジュアルプログラミング(UIFlow)で作成 BLE経由で温湿度の データを送信
デバイスで動作させたプログラム② MQTT経由で 人感センサーで 取得した値を送信
終わり!