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

Cd931bc05e7cee46b9a950a63e47ba4c?s=47 yo-to
August 12, 2020

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

Cd931bc05e7cee46b9a950a63e47ba4c?s=128

yo-to

August 12, 2020
Tweet

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