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
860
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)
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
860
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額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
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
730
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
150
shake-upを科学する
rsakata
7
900
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
470
TLSから見るSREの未来
atpons
2
190
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
250
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
A designer walks into a library…
pauljervisheath
207
24k
Why Our Code Smells
bkeepers
PRO
336
57k
Embracing the Ebb and Flow
colly
86
4.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building Adaptive Systems
keathley
43
2.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for humans not robots
tammielis
253
25k
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(水) オンライン開催
終わり!