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
Scratch で IoT(MQTT)やってみた 〜 MQTT用の拡張機能を自分で実装 〜 /...
Search
you(@youtoy)
PRO
August 12, 2020
Technology
0
870
Scratch で IoT(MQTT)やってみた 〜 MQTT用の拡張機能を自分で実装 〜 / IoTLT vol.66
you(@youtoy)
PRO
August 12, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
16
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.5k
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
300
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
Agile PBL at New Grads Trainings
kawaguti
PRO
1
290
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
420
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
310
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
320
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.8k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
4
200
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
1
360
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
280
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
140
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.5k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
A better future with KSS
kneath
239
17k
Building Applications with DynamoDB
mza
96
6.6k
Agile that works and the tools we love
rasmusluckow
330
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
RailsConf 2023
tenderlove
30
1.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Transcript
Scratch で IoT(MQTT)やってみた 〜 MQTT用の拡張機能を自分で実装 〜 2020年8月12日 (水) IoTLT vol.66
@オンライン 豊田 陽介 ( @youtoy )
豊田陽介(@youtoy) 自己紹介 • 職場: 某通信会社の研究所 • プライベートでの活動: IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) •
その他: ガジェット好き IoTLT vol.66 @オンライン ビジュアルプログラミン グIoTLT共同主催、など 話題のものが、たぶん だいたい自宅にある
Scratch の話
豊田陽介(@youtoy) 自己紹介 • 職場: 某通信会社の研究所 • プライベートでの活動: IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) •
その他: ガジェット好き IoTLT vol.66 @オンライン このあたりの関係 でよく使ってる
IoTLT vol.66 @オンライン Scratch といえば 「子ども向けのプログラミング」の話題でよく見る ネコ ブロックによる プログラミング
IoTLT vol.66 @オンライン Scratch について ・MITメディアラボのライフロングキンダーガーテングループ のプロジェクトで無償提供 ・150以上の国と地域での利用(40以上の言語に対応) ・開発環境とSNS的なコミュニティの機能 ・画像や音の編集が行えるエディタも
・micro:bitやLEGO系のデバイスとの連携機能、カメラの モーションを使った機能も ・翻訳・音声合成も(Google・AmazonのAPIによる)
IoTLT vol.66 @オンライン 画像や音のエディタ 画像編集(ベクター、ビットマップ) 音声波形を見ながら各種編集
IoTLT vol.66 @オンライン 音声合成や翻訳の拡張機能
Scratch と IoT を 組みあわせたい!
標準機能で HTTPリクエストとか そういうのがない・・・
ないなら 作ろう!
IoTLT vol.66 @オンライン Scratch はオープンソース https://github.com/LLK/ scratch-vm https://github.com/LLK/ scratch-gui
言語は IoT界隈には嬉しい JavaScript ※ 個人の見解です 画像は公式のmicro:bit 拡張機能のソースの一部
IoTLT vol.66 @オンライン Scratch を独自の環境で動かすだけなら ステップ1)黒い画面を開く ステップ2)GitHubからクローン ステップ3)コマンドをポチポチ ステップ4)ブラウザで「http://localhost:8601」にアクセス
IoTLT vol.66 @オンライン Scratch で独自機能を実装する メインの部分は以下に作成したフォルダ内の index.js 先ほど例示 したもの
送受信を両方やりたい ↓ デバイスや他サービスと リアルタイム通信がやれると・・・ ↓ MQTTが良さそう
IoTLT vol.66 @オンライン Scratch での MQTT実装に向けて ・実装に node.js のパッケージを使える ・ベースとなる処理は別に作ってみて、それを移植できると
デバッグしやすそう ⇒ MQTT.js ・MQTTブローカーは外部サービスで ⇒ shiftr.io ・GUIフロントエンドがあると便利?
IoTLT vol.66 @オンライン MQTT の GUIフロントエンド 以前、調べたらいくつかあったけど、MQTT.fx を 設定画面 Pub
Sub マルチプラットフォーム対応(Win/Mac/Linux)
IoTLT vol.66 @オンライン HTML+JavaScript で実装してみて MQTT.js で Pub/Sub を実装 Pub
Sub Pub Sub
IoTLT vol.66 @オンライン その後 JavaScript の処理を Scratch へ Pub Sub
Pub Sub Scratch上に Pub/Sub の処理を移植
IoTLT vol.66 @オンライン HTML+JavaScript で MQTT URLとトピックを設定 shiftrのKey(Username)とSecret(Password)と、 クライアントIDを設定 設定まわり
IoTLT vol.66 @オンライン HTML+JavaScript で MQTT shiftrへの接続とSubscribe メッセージ受信時の処理 Publish
IoTLT vol.66 @オンライン Scratch に MQTT を実装 ブロックの定義と処理 ブロックの定義 (ブロックの種類や
変数の扱い) MQTT の Publish の処理
IoTLT vol.66 @オンライン デバイス間連携をやってみた PC上のScratchと、M5GO・Androidスマホなどを連携 1)M5GOの本体のボタン・デュアル ボタンユニットのボタンを押すと、 ネコが上下左右に移動 2)スマホで開いたWebページ上の ボタンを押すとネコが移動
IoTLT vol.66 @オンライン M5GO の UIFlow のプログラム URL等を設定 ボタン押下で 特定の文字を
Publish
IoTLT vol.66 @オンライン Scratch のプログラム ネコの初期設定 (位置や向きなど) MQTT用の設定 MQTTのメッセー ジ受信に合わせて
ネコを動かす部分
IoTLT vol.66 @オンライン Webページのデザインの実装 CSSフレームワークにおまかせ ⇒ https://bulma.io/
余談
他の方が開発されている独自拡張の例 ml5.jsで画像の機械学習実装 (Scratch上で学習も推論も) IFTTT連携 学習済みのモデル を使った画像の機 械学習(推論) Googleさん提供の機械学習の仕組み Teachable Machine
が使える 人のポーズを認識 する画像の機械学 習(PoseNet) TensorFlow の Handpose(手 の追跡) TensorFlow の Facemesh(顔 の追跡) PaSoRi(非接触IC カードリーダー) QRコード リーダー https://stretch3.github.io/
最後に
ビジュアルプログラミング + IoT
【宣伝】来週、IoTLT のスピンオフ! IoTLT vol.64 @オンライン https://iotlt.connpass.com/event/181558/ 8/19(水) オンライン開催
終わり!