Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

なぜこのような事を？

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

あとは試すのみ！

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

残るは情報取得

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

終わり！