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
190
ビジュアルプログラミングで デバイス間をつなぐ / 出張IoTLT@くらでべ
出張IoTLT@くらでべ で LT登壇する際に作成した資料です。
(設定した日付は収録日になります)
you(@youtoy)
PRO
August 21, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
63
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
140
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
48
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
86
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
統計的学習理論読み Chapter 2
kmatsui
1
230
20240321_生成AI時代のDevOps
kzkmaeda
2
610
オブジェクト指向宗教史
tanakahisateru
14
12k
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
470
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
任意コード実行の原理
ffri
0
180
バッチ処理のSLOをどう設計するか
rynsuke
7
570
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
240
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
260
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Building Your Own Lightsaber
phodgson
97
5.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Happy Clients
brianwarren
91
6.3k
Code Review Best Practice
trishagee
54
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Being A Developer After 40
akosma
56
580k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Bash Introduction
62gerente
604
210k
Documentation Writing (for coders)
carmenintech
59
3.8k
What's new in Ruby 2.0
geeforr
335
31k
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 仕組みに関する記事