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
670
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)
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
120
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
46
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
84
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
100
M5Stack Core2とUIFlowの「リモコン+」でお手軽IoT(仕組みをシンプルに試してみた) / IoTLT vol.102
you
PRO
0
3.9k
Other Decks in Technology
See All in Technology
庁舎DX推進事例集
senryakuka
0
1.6k
App Runnerでパラメーターストアの値を使ってみた
miura55
0
230
「わたしたちのコード」を安定させるためにフレームワークとの距離を保つ / phperkaigi2024
blue_goheimochi
5
790
出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 「【速報】AWSの生成AIサービスであるAmazon Bedrock がリリースされたので朝イチで触ってみた」について語る
oshanqq
0
290
[AWS Expert Online for JAWS-UG]AWS SAW を使ったトラブルシューティング効率化のススメ
furuton
0
170
The Twelve-Factor App とクラウドアプリケーションのコスト
ny7760
3
260
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
13
2.5k
OpenStack再入門「アーキテクチャ編」
kajinamit
0
240
Automate your changelogs! Release Drafter
onenashev
PRO
2
410
Node-AI のリッチな WEB フロントエンドを支える技術
nenonaninu
2
970
スケジュール指定のFargate Spotと友達になれた話
news_it_enj
0
240
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
130
Featured
See All Featured
A Tale of Four Properties
chriscoyier
150
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
What the flash - Photography Introduction
edds
64
11k
Product Roadmaps are Hard
iamctodd
43
9.6k
Agile that works and the tools we love
rasmusluckow
323
20k
Building Adaptive Systems
keathley
29
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
The Brand Is Dead. Long Live the Brand.
mthomps
48
19k
Scaling GitHub
holman
456
140k
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(水) オンライン開催
終わり!