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

by you（@youtoy）

Slide 1

Slide 1 text

Scratch で IoT（MQTT）やってみた〜 MQTT用の拡張機能を自分で実装〜 2020年8月12日 (水) IoTLT vol.66 @オンライン　　豊田陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介（@youtoy）自己紹介 ● 職場：某通信会社の研究所 ● プライベートでの活動： IT系イベント主催・登壇・運営、多数参加子ども向けの活動いろいろ（IT系以外も） ● その他：ガジェット好き IoTLT vol.66 @オンラインビジュアルプログラミングIoTLT共同主催、など話題のものが、たぶんだいたい自宅にある

Slide 3

Slide 3 text

Scratch の話

Slide 4

Slide 4 text

豊田陽介（@youtoy）自己紹介 ● 職場：某通信会社の研究所 ● プライベートでの活動： IT系イベント主催・登壇・運営、多数参加子ども向けの活動いろいろ（IT系以外も） ● その他：ガジェット好き IoTLT vol.66 @オンラインこのあたりの関係でよく使ってる

Slide 5

Slide 5 text

IoTLT vol.66 @オンライン Scratch といえば「子ども向けのプログラミング」の話題でよく見るネコブロックによるプログラミング

Slide 6

Slide 6 text

IoTLT vol.66 @オンライン Scratch について・MITメディアラボのライフロングキンダーガーテングループ　のプロジェクトで無償提供・150以上の国と地域での利用（40以上の言語に対応）・開発環境とSNS的なコミュニティの機能・画像や音の編集が行えるエディタも・micro:bitやLEGO系のデバイスとの連携機能、カメラの　モーションを使った機能も・翻訳・音声合成も（Google・AmazonのAPIによる）

Slide 7

Slide 7 text

IoTLT vol.66 @オンライン画像や音のエディタ画像編集（ベクター、ビットマップ）音声波形を見ながら各種編集

Slide 8

Slide 8 text

IoTLT vol.66 @オンライン音声合成や翻訳の拡張機能

Slide 9

Slide 9 text

Scratch と IoT を組みあわせたい！

Slide 10

Slide 10 text

標準機能で HTTPリクエストとかそういうのがない・・・

Slide 11

Slide 11 text

ないなら作ろう！

Slide 12

Slide 12 text

IoTLT vol.66 @オンライン Scratch はオープンソース https://github.com/LLK/ scratch-vm https://github.com/LLK/ scratch-gui

Slide 13

Slide 13 text

言語は IoT界隈には嬉しい JavaScript ※ 個人の見解です画像は公式のmicro:bit 拡張機能のソースの一部

Slide 14

Slide 14 text

IoTLT vol.66 @オンライン Scratch を独自の環境で動かすだけならステップ1）黒い画面を開くステップ2）GitHubからクローンステップ3）コマンドをポチポチステップ4）ブラウザで「http://localhost:8601」にアクセス

Slide 15

Slide 15 text

IoTLT vol.66 @オンライン Scratch で独自機能を実装するメインの部分は以下に作成したフォルダ内の index.js 先ほど例示したもの

Slide 16

Slide 16 text

送受信を両方やりたい ↓ デバイスや他サービスとリアルタイム通信がやれると・・・ ↓ MQTTが良さそう

Slide 17

Slide 17 text

IoTLT vol.66 @オンライン Scratch での MQTT実装に向けて・実装に node.js のパッケージを使える・ベースとなる処理は別に作ってみて、それを移植できると　デバッグしやすそう ⇒ MQTT.js ・MQTTブローカーは外部サービスで ⇒ shiftr.io ・GUIフロントエンドがあると便利？

Slide 18

Slide 18 text

IoTLT vol.66 @オンライン MQTT の GUIフロントエンド以前、調べたらいくつかあったけど、MQTT.fx を設定画面 Pub Sub マルチプラットフォーム対応（Win/Mac/Linux）

Slide 19

Slide 19 text

IoTLT vol.66 @オンライン HTML＋JavaScript で実装してみて MQTT.js で Pub/Sub を実装 Pub Sub Pub Sub

Slide 20

Slide 20 text

IoTLT vol.66 @オンラインその後 JavaScript の処理を Scratch へ Pub Sub Pub Sub Scratch上に Pub/Sub の処理を移植

Slide 21

Slide 21 text

IoTLT vol.66 @オンライン HTML＋JavaScript で MQTT URLとトピックを設定 shiftrのKey（Username）とSecret（Password）と、クライアントIDを設定設定まわり

Slide 22

Slide 22 text

IoTLT vol.66 @オンライン HTML＋JavaScript で MQTT shiftrへの接続とSubscribe メッセージ受信時の処理 Publish

Slide 23

Slide 23 text

IoTLT vol.66 @オンライン Scratch に MQTT を実装ブロックの定義と処理ブロックの定義（ブロックの種類や　変数の扱い） MQTT の Publish の処理

Slide 24

Slide 24 text

IoTLT vol.66 @オンラインデバイス間連携をやってみた PC上のScratchと、M5GO・Androidスマホなどを連携 1）M5GOの本体のボタン・デュアルボタンユニットのボタンを押すと、ネコが上下左右に移動 2）スマホで開いたWebページ上のボタンを押すとネコが移動

Slide 25

Slide 25 text

IoTLT vol.66 @オンライン M5GO の UIFlow のプログラム URL等を設定ボタン押下で特定の文字を Publish

Slide 26

Slide 26 text

IoTLT vol.66 @オンライン Scratch のプログラムネコの初期設定（位置や向きなど） MQTT用の設定 MQTTのメッセージ受信に合わせてネコを動かす部分

Slide 27

Slide 27 text

IoTLT vol.66 @オンライン Webページのデザインの実装 CSSフレームワークにおまかせ ⇒ https://bulma.io/

Slide 28

Slide 28 text

余談

Slide 29

Slide 29 text

他の方が開発されている独自拡張の例 ml5.jsで画像の機械学習実装（Scratch上で学習も推論も） IFTTT連携学習済みのモデルを使った画像の機械学習（推論） Googleさん提供の機械学習の仕組み Teachable Machine が使える人のポーズを認識する画像の機械学習（PoseNet） TensorFlow の Handpose（手の追跡） TensorFlow の Facemesh（顔の追跡） PaSoRi（非接触IC カードリーダー） QRコードリーダー https://stretch3.github.io/

Slide 30

Slide 30 text

最後に

Slide 31

Slide 31 text

ビジュアルプログラミング＋ IoT

Slide 32

Slide 32 text

【宣伝】来週、IoTLT のスピンオフ！ IoTLT vol.64 @オンライン https://iotlt.connpass.com/event/181558/ 8/19（水）オンライン開催

Slide 33

Slide 33 text

終わり！