公式版Scratchやtoio DoでIoT（ブラウザ上でのJavaScript実行で） / ビジュアルプログラミングIoTLT vol.11

公式版Scratchやtoio DoでIoT （ブラウザ上でのJavaScript実行で） 2022年6月15日 (水) ビジュアルプログラミングIoTLT vol.11 豊田陽介（） @youtoy

自己紹介ビジュアルプログラミングや IoT、ロボットトイ関連など豊田陽介（）普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ（IT系以外も）・
Microsoft MVP（2021/10 から）プライベートでの活動・ガジェット好き・今月開催のメーカーフェア＠仙台に出展予定その他

余談：展示に向けた試作やハマっていること展示イベントに向けた試作（センサー＋プロジェクション）カメラ画像からの画像認識と、パーティクルの仕組み両方ともプログラムはブラウザ上で動作（JavaScript）

今回の話題：公式版Scratch や toio Do で IoT （Node.js による独自拡張ではなく）

というのをやろうといろいろ試した内容

作ったものの例（おおまかな説明） ① toio の向き（姿勢）を変える ② toio の姿勢によって toio
Do上の表示が変わる ③ Scratch上の表示が toio Do上の表示と連動

作ったものの例（おおまかな説明） ① toio の向き（姿勢）を変える ② toio の姿勢によって toio
Do上の表示が変わる ③ Scratch上の表示が toio Do上の表示と連動ネットワーク上での通信を介し、Scratch と toio Do が連動

デモ：公式版Scratchとtoio Doを連動させる

ネットワーク通信を用いた連動のポイント toio ブラウザで開いた toio Do（公式） BLE WebSocket 仲介サーバーブラウザで開いた
Scratch（公式） WebSocket

ブラウザのコンソールでのJavaScript実行 toio ブラウザで開いた toio Do（公式） BLE WebSocket 仲介サーバーブラウザで開いた
Scratch（公式） WebSocket HTML で表示された数値の取得＆　取得した数値の外部送信外部から数値データを受信＆　その数値に応じたキーイベント発生

なぜこのような事を？

1）公式版Scratch の作品で物理連動などをさせてみたい（公式拡張で実現できなそうな内容の）

自分以外の人が作った Scratch作品に、外部機器・サービス連動の追加を気軽にテストできると面白そう？

ゲーム作品でゴールしたら複数のLEDテープが派手に光ったりとか？

公式版での実行にこだわらなければオープンソースの Scratch で独自拡張の開発をする形でも

公式版での実行にこだわらなければオープンソースの Scratch で独自拡張の開発をする形でも MQTT を扱える拡張を作った話＠2年前の IoTLT

これをやった最大の理由...

2）思いついたからやってみたかった

思いつきの元になったもの Joy-Con・micro:bit をプレゼンリモコンにする話の記事「【JavaScript】スイッチのJoy-Conをプレゼンリモコンにするワンライナー - Qiita」より

思いつきの元になったもの Joy-Con・micro:bit をプレゼンリモコンにする話の記事「【JavaScript】スイッチのJoy-Conをプレゼンリモコンにするワンライナー - Qiita」よりブラウザの開発者ツールのコンソールでプログラム実行というやり方の話が

・Scratch のサイトでも活用　できるだろうか？・実行できるプログラムの　制約が何かあるか？

必要そうな最小要件などを考えてみる JavaScript で情報取得可能な HTML の要素がページ上にあれば JavaScript で発生させたキーイベントが
そのままキー入力の代替になれば MQTT のライブラリを読み込むか、標準で扱える WebSocket が動けば Scratch上の情報を読み取る Scratch上に影響を及ぼすネットワークを介したやりとり

あとは試すのみ！

このあたりはサクッと・キーイベント利用・通信をとりあえず WebSocket で

残るは情報取得

ブラウザの開発者ツールで探る描画周りは Canvas要素内とりあえず数字が出ていて変化する部分を見てみたり

最終的には変数の中身を描画領域に表示させるこれが「div」！「中を見る」・「プロジェクトページ」のどちらでも出ている

詳細はQiitaの記事に #Scratch 3.0 のキー入力イベントをブラウザのコンソール（開発者ツール）の JavaScript からランダムに繰り返し発生させてみる #Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket
が関連、 #toio でも利用可） Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【ソースコード編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連）

独自拡張版のScratchでの事例 PC と有線接続して Groveモジュールなどが扱えるデバイス用の拡張に適用 ⇒ 「LINEアプリの操作」をネット経由で　Scratch に受信させる流れ

活用法の模索はこれから！

【とあるイベントの話】場所は仙台ですが...

6/25（土）＠産業見本市会館サンフェスタ toio のユーザーコミュニティで出展

終わり！

公式版Scratchやtoio DoでIoT（ブラウザ上でのJavaScript実行で） / ...