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

Transcript

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. 終わり！