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)
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
140
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
61
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
170
Operating Operator
shhnjk
1
650
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
340
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
390
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
860
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
350
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
600
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Unsuck your backbone
ammeep
671
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Thoughts on Productivity
jonyablonski
69
4.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Making Projects Easy
brettharned
116
6.3k
Being A Developer After 40
akosma
90
590k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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 仕組みに関する記事