Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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.6k
Node-RED でデバイス・アプリ連携(ローカル通信もネット経由も) / TECH Street _ Node-RED
you(@youtoy)
PRO
May 27, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
63
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
170
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
190
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
370
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
18
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
150
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
52
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
120
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
230
Other Decks in Technology
See All in Technology
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
konifar
9
3.2k
Playwrightのソースコードに見る、自動テストを自動で書く技術
yusukeiwaki
12
4.2k
日本Rubyの会の構造と実行とあと何か / hokurikurk01
takahashim
4
780
【pmconf2025】PdMの「責任感」がチームを弱くする?「分業型」から全員がユーザー価値に本気で向き合う「共創型開発チーム」への変遷
toshimasa012345
0
160
安いGPUレンタルサービスについて
aratako
2
2.5k
グレートファイアウォールを自宅に建てよう
ctes091x
0
130
Docker, Infraestructuras seguras y Hardening
josejuansanchez
0
150
バグハンター視点によるサプライチェーンの脆弱性
scgajge12
2
600
Playwright x GitHub Actionsで実現する「レビューしやすい」E2Eテストレポート
kinosuke01
0
100
たかが特別な時間の終わり / It's Only the End of Special Time
watany
27
7.4k
GitLab Duo Agent Platformで実現する“AI駆動・継続的サービス開発”と最新情報のアップデート
jeffi7
0
190
AIと二人三脚で育てた、個人開発アプリグロース術
zozotech
PRO
0
460
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
RailsConf 2023
tenderlove
30
1.3k
How STYLIGHT went responsive
nonsquared
100
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Visualization
eitanlees
150
16k
The Pragmatic Product Professional
lauravandoore
37
7.1k
How to Ace a Technical Interview
jacobian
280
24k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
Automating Front-end Workflow
addyosmani
1371
200k
Scaling GitHub
holman
464
140k
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経由で 人感センサーで 取得した値を送信
終わり!