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
個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ ...
Search
you(@youtoy)
PRO
December 14, 2022
Technology
2
210
個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ TechFeed Experts Night#10
you(@youtoy)
PRO
December 14, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
16
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
6
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.7k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Other Decks in Technology
See All in Technology
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
200
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
400
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
テストを軸にした生き残り術
kworkdev
PRO
0
220
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
210
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
AWSで始める実践Dagster入門
kitagawaz
1
750
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Documentation Writing (for coders)
carmenintech
74
5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Transcript
None
個人で手軽に ブラウザやビジュアルプログラミングでIoT 2022年12月14日 (水) TechFeed Experts Night#10 〜 イマドキのIoTを支える技術 @オンライン
豊田陽介( ) @youtoy
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著)
大垣のメーカーフェアの会場の来場者の方から 複数の方に「Twitter で光学迷彩・透明マントやってる人ですよね」と言われた ブラウザ上での機械学習と描画処理を 使ったもの(MediaPipe Hands による 手の認識と、p5.js を使った描画)
自己紹介:書籍で書いた内容関連 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著) ブラウザ上でできる機械学習 や描画との組み合わせの話 ビジュアルプログラミング + IoT の話の作例
スライドは公開済みなので 発表中は文字などの記載を 追わなくても大丈夫です
今日の話の方向性
こういった構成を個人で手軽に試す 何らかの入力 インター ネット モノ モノ インター ネット 何らかの出力
「ちょっと試してみる」くらい のレベル感の内容を
個人で試しやすい IoT向けデバイス
先ほどの話でココに出てた
M5Stack社のデバイス(のごく一部) どんどん発売される、Wi-Fi にもつながる多種多様なデバイス群 産業用 切手サイズ USB メモリ型 防水型 電子ペー パー搭載
AIカメラ AWS 連携 スティッ ク型
M5Stack社のモジュール(のごく一部) センサーからアクチュエーターまで様々 計量 CO2、温湿度 非接触温度 カード型キーボード RFID フルカラーLED ジョイスティック 空気圧
心拍 モーター
直近でも新製品が どんどん出てきている
うちに大量にあります
うちにあるもののごく一部の写真 全部集めて写真を撮ろうとして、早々に諦めた状況のもの
オススメな理由
M5Stack製品のオススメポイントの例 • 本体は基本的に外装がついている • デバイス・モジュールの種類が豊富 • デバイス単体でもあれこれ活用できる • 公式のモジュールの接続が手軽 •
Wi-Fi・Bluetoothが使えてIoT・近接通信も! • 開発環境もいろいろ • M5Stack用のビジュアルプログラミング環境 • 開発環境はブラウザで簡単アクセス • 公式パーツを簡単に扱える • HTTPリクエストや MQTT等のネットワーク系 処理や Bluetooth も扱える
日本のユーザコミュニティが あったり、技術記事なども多い
ビジュアルプログラミング のみでIoT (ちょっとした仕組みを複数実装)
LINE のリッチ メニューの操作 試作概要1: 通信方向「LINE⇒デバイス」 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 (全て実行)
① M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ②
試作概要2: 通信方向「デバイス⇒LINE」 M5Stack系の デバイスで ボタン押下 LINE Notify でメッセージ通知 ② LINE
のリッチ メニューの操作 LEDテープの点灯、 電子ペーパーの 書きかえ デバイスで音の再生 (全て実行) ①
デモ動画
技術の部分をざっくりと
機器やサービスの構成
Botサーバー +α BotサーバーからMQTTブローカー経由でIoT M5Paper LINE Notify HTTP(POST) HTTP(POST) MQTT MQTT
HTTP (POST) M5StickC Plus M5Stack Core2 リッチメニュー の操作
(REST API、MQTT) M5Stack Core2 デバイスからHTTPリクエストでスマホ通知 M5StickC Plus M5Paper LINE Notify
スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
クラウド実行環境 (HTTPトリガー) Botサーバー +α (REST API、MQTT) M5Stack Core2 全体像はこのような構成で M5StickC
Plus M5Paper LINE Notify スマホのLINE アプリ リッチメニュー の操作 HTTP(POST) HTTP(POST) MQTT MQTT HTTP(POST)
プログラムの実装
M5Stack系デバイスの実装:UIFlow ブロック型のビジュアルプログラミング
サーバーもビジュアルプログラミング 【スマホへの通知】 デバイス ⇒ LINE Notify LINE(Bot) ⇒ デバイス 【MQTTへのつなぎ】
Beebotteとの連携 実装はenebular
実装は全てブラウザベース (環境構築の手間は大幅削減)
最新ではないけれど 個人で手軽にIoTをやるのに 便利なMQTTブローカー
Beebotte 無料プランあり データを可視化 できるダッシュ ボード機能あり
shiftr.io 無料で利用できる デスクトップ版が ある(GUI・CLI) 無料プランあり ※ 1日6時間の稼働 で停止する
Beebotte・shiftr.ioに共通する話 ・クラウドで動く MQTTブローカー ・REST API あり(MQTT と HTTP リクエストを混在させられる) ・無料プランあり
自前で用意する場合の選択肢
自分はMQTT.jsをよく使っています ・MQTTブローカー の実装だけでなく クライアントの 実装でも (Node.js、ブラウザ)
【余談】 M5Stack社のデバイスで 宅内通信 (今回の本筋と違う実装あり)
試作したもので実現しようとした内容 ・二酸化炭素濃度を計測 ⇒ 基準値以上/以下の値になったら お知らせ ・二酸化炭素濃度、温湿度のデータを 可視化
IoTコンテスト用の試作の一部で活用 MQTT MQTT POST(HTTP リクエスト) 二酸化炭素 濃度の値 Azure Functions Azure
IoT Hub LINE Notify LINE アプリ 二酸化炭素濃度の値を 見て、特定条件で通知 Azure Stream Analytics Power BI 宅内通知の仕組みを サクッと後で付け足し (音や光でお知らせ) センサーで取得 した値を可視化
【余談2】 日本での発売を待っている IoTに使えるデバイス
先ほどの話でココに出てた
Raspberry Pi Pico W 無線LAN機能搭載の安価なデバイス
ここは話す時間がなさそう...
ブラウザでデバイスを扱うAPIが楽しい! で外部デバイスとの通信 ブラウザの API でモノとインターネットをつなぐ ・Web Serial ・Web Bluetooth ・Gamepad
API ・WebHID ・Web MIDI API シリアル通信 BLE コントローラーなど MIDIデバイス (試作や展示用作品に使ってたりするものも)
終わり!