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用の拡張機能を自分で実装 〜 / IoTLT vol.66
Search
you(@youtoy)
PRO
August 12, 2020
Technology
0
680
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)
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
100
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
160
技術コミュニティの中での生成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
53
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
93
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
オーナーシップを持つ領域を明確にする
konifar
11
2.6k
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
370
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
1
150
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
160
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
120
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
Clear Off the Table
cherdarchuk
83
310k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
Docker and Python
trallard
33
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Music & Morning Musume
bryan
41
5.6k
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Into the Great Unknown - MozCon
thekraken
10
980
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Code Review Best Practice
trishagee
54
15k
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(水) オンライン開催
終わり!