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
ビジュアルプログラミングで デバイス間をつなぐ / 出張IoTLT@くらでべ
Search
you(@youtoy)
PRO
August 21, 2020
Technology
0
210
ビジュアルプログラミングで デバイス間をつなぐ / 出張IoTLT@くらでべ
出張IoTLT@くらでべ で LT登壇する際に作成した資料です。
(設定した日付は収録日になります)
you(@youtoy)
PRO
August 21, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
170
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
97
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
50
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
55
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
230
Other Decks in Technology
See All in Technology
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
2
1.1k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
フィンテック養成勉強会#54
finengine
0
180
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
1.5k
本が全く読めなかった過去の自分へ
genshun9
0
270
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
GitHub Copilot の概要
tomokusaba
1
130
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Embracing the Ebb and Flow
colly
86
4.7k
How to Ace a Technical Interview
jacobian
277
23k
Designing Experiences People Love
moore
142
24k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Docker and Python
trallard
44
3.4k
Transcript
ビジュアルプログラミングで デバイス間をつなぐ 豊田 陽介 ( @youtoy ) 出張IoTLT@くらでべ
豊田陽介(@youtoy) 自己紹介 • 職場: 某通信会社の研究所 • プライベートでの活動: IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) •
その他: ガジェット好き ビジュアルプログラミング IoTLT共同主催、など 話題のものをたくさん 購入している気がする
ビジュアルプログラミングが できる環境がいろいろ
そして機能も様々 (例:デバイス連携・IoT)
【事例】ビジュアルプログラミングでIoTなLチカ IoTLT vol.61 の LTより https://www.youtube.com/watch?v=9-kfvPtjvb8
Microsoft MakeCode for micro:bit 利用しているビジュアルプログラミング環境 Node-RED UIFlow
実装している機能 ・センサーの値の取得 ・LED制御 ・シリアル通信 (数値・文字列の送受信) ・フルカラーLEDの制御 ・ボタンの処理 ・MQTTの通信 (数値・文字列の送受信) ・シリアル通信
・MQTTブローカー ・MQTTの通信
他のデバイス間通信
【事例】MIDIコントローラーの入力の可視化 https://www.youtube.com/watch?v=kiJtJbwYCg4
フローで実装している機能 数値のGUI表示 MIDIの入力取得 Node-REDのフロー 入力値の分岐など
ビジュアルプログラミングを 使ったメリット 〜 今回の事例の場合 〜
環境構築が簡単 ・ブラウザベースで扱えるものも多数 ⇒ 開発を始めるまでの準備段階の手間を削減できる ・デバイス連携の仕組み ⇒ ブラウザからデバイスへの直接書き込みや転送の仕組み 実装の手間が少ない ・手間がかかる実装を内包した機能の提供 ⇒
可視化の部分をサクッと試せた ⇒ 二次元で配置されたLEDの点灯箇所の指定を見た目通りに
提供されている機能が限定的な場合も ・自分がやりたいことを実現する機能がないこともあり ⇒ 拡張機能が多数用意されている場合もあるがサービス依存 (自分で拡張機能を作成可能なものもあるが・・・) デバッグしづらいことも ・問題が起きたときのデバッグがやりにくい環境がある (デバッグの機能を持ったものもあるが・・・) 注意点: もちろん向き不向きはあり
テキストプログラミング も混じりますが・・・
OBSを別デバイスから遠隔で制御 ⇒ シーンの切り替えをM5GO・スマホといったデバイスで 先ほど登場したMQTTを活用してみた例 https://www.youtube.com/watch?v=Q3wINpPLj8E
構成など UIFlow Node.js HTML + JavaScript MQTT MQTT WebSocket
https://qiita.com/youtoy/items/23fb0e16f1a4428b5c9b 仕組みに関する記事