Scratch で IoT（MQTT）やってみた 〜 MQTT用の拡張機能を自分で実装 〜 / IoTLT vol.66

1. Scratch で IoT（MQTT）やってみた 〜 MQTT用の拡張機能を自分で実装 〜 2020年8月12日 (水) IoTLT vol.66 @オンライン 　　豊田 陽介 ( @youtoy )
2. 豊田陽介（@youtoy） 自己紹介 • 職場： 某通信会社の研究所 • プライベートでの活動： IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） • その他： ガジェット好き IoTLT vol.66 @オンライン ビジュアルプログラミン グIoTLT共同主催、など 話題のものが、たぶん だいたい自宅にある
3. Scratch の話
4. 豊田陽介（@youtoy） 自己紹介 • 職場： 某通信会社の研究所 • プライベートでの活動： IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） • その他： ガジェット好き IoTLT vol.66 @オンライン このあたりの関係 でよく使ってる
5. IoTLT vol.66 @オンライン Scratch といえば 「子ども向けのプログラミング」の話題でよく見る ネコ ブロックによる プログラミング
6. IoTLT vol.66 @オンライン Scratch について ・MITメディアラボのライフロングキンダーガーテングループ 　のプロジェクトで無償提供 ・150以上の国と地域での利用（40以上の言語に対応） ・開発環境とSNS的なコミュニティの機能 ・画像や音の編集が行えるエディタも ・micro:bitやLEGO系のデバイスとの連携機能、カメラの 　モーションを使った機能も ・翻訳・音声合成も（Google・AmazonのAPIによる）
7. IoTLT vol.66 @オンライン 画像や音のエディタ 画像編集（ベクター、ビットマップ） 音声波形を見ながら各種編集
8. IoTLT vol.66 @オンライン 音声合成や翻訳の拡張機能
9. Scratch と IoT を 組みあわせたい！
10. 標準機能で HTTPリクエストとか そういうのがない・・・
11. ないなら 作ろう！
12. IoTLT vol.66 @オンライン Scratch はオープンソース https://github.com/LLK/ scratch-vm https://github.com/LLK/ scratch-gui
13. 言語は IoT界隈には嬉しい JavaScript ※ 個人の見解です 画像は公式のmicro:bit 拡張機能のソースの一部
14. IoTLT vol.66 @オンライン Scratch を独自の環境で動かすだけなら ステップ1）黒い画面を開く ステップ2）GitHubからクローン ステップ3）コマンドをポチポチ ステップ4）ブラウザで「http://localhost:8601」にアクセス
15. IoTLT vol.66 @オンライン Scratch で独自機能を実装する メインの部分は以下に作成したフォルダ内の index.js 先ほど例示 したもの
16. 送受信を両方やりたい ↓ デバイスや他サービスと リアルタイム通信がやれると・・・ ↓ MQTTが良さそう
17. IoTLT vol.66 @オンライン Scratch での MQTT実装に向けて ・実装に node.js のパッケージを使える ・ベースとなる処理は別に作ってみて、それを移植できると 　デバッグしやすそう ⇒ MQTT.js ・MQTTブローカーは外部サービスで ⇒ shiftr.io ・GUIフロントエンドがあると便利？
18. IoTLT vol.66 @オンライン MQTT の GUIフロントエンド 以前、調べたらいくつかあったけど、MQTT.fx を 設定画面 Pub Sub マルチプラットフォーム対応（Win/Mac/Linux）
19. IoTLT vol.66 @オンライン HTML＋JavaScript で実装してみて MQTT.js で Pub/Sub を実装 Pub Sub Pub Sub
20. IoTLT vol.66 @オンライン その後 JavaScript の処理を Scratch へ Pub Sub Pub Sub Scratch上に Pub/Sub の処理を移植
21. IoTLT vol.66 @オンライン HTML＋JavaScript で MQTT URLとトピックを設定 shiftrのKey（Username）とSecret（Password）と、 クライアントIDを設定 設定まわり
22. IoTLT vol.66 @オンライン HTML＋JavaScript で MQTT shiftrへの接続とSubscribe メッセージ受信時の処理 Publish
23. IoTLT vol.66 @オンライン Scratch に MQTT を実装 ブロックの定義と処理 ブロックの定義 （ブロックの種類や 　変数の扱い） MQTT の Publish の処理
24. IoTLT vol.66 @オンライン デバイス間連携をやってみた PC上のScratchと、M5GO・Androidスマホなどを連携 1）M5GOの本体のボタン・デュアル ボタンユニットのボタンを押すと、 ネコが上下左右に移動 2）スマホで開いたWebページ上の ボタンを押すとネコが移動
25. IoTLT vol.66 @オンライン M5GO の UIFlow のプログラム URL等を設定 ボタン押下で 特定の文字を Publish
26. IoTLT vol.66 @オンライン Scratch のプログラム ネコの初期設定 （位置や向きなど） MQTT用の設定 MQTTのメッセー ジ受信に合わせて ネコを動かす部分
27. IoTLT vol.66 @オンライン Webページのデザインの実装 CSSフレームワークにおまかせ ⇒ https://bulma.io/
28. 余談
29. 他の方が開発されている独自拡張の例 ml5.jsで画像の機械学習実装 （Scratch上で学習も推論も） IFTTT連携 学習済みのモデル を使った画像の機 械学習（推論） Googleさん提供の機械学習の仕組み Teachable Machine が使える 人のポーズを認識 する画像の機械学 習（PoseNet） TensorFlow の Handpose（手 の追跡） TensorFlow の Facemesh（顔 の追跡） PaSoRi（非接触IC カードリーダー） QRコード リーダー https://stretch3.github.io/
30. 最後に
31. ビジュアルプログラミング ＋ IoT
32. 【宣伝】来週、IoTLT のスピンオフ！ IoTLT vol.64 @オンライン https://iotlt.connpass.com/event/181558/ 8/19（水） オンライン開催
33. 終わり！