デフォルトでは外部と自由に通信をする機能がない
「公式版の Scratch（ https://scratch.mit.edu/ ）」
や、
「toio Do（ https://toio.github.io/toio-visual-programming/beta/?category=do ）」
を、以下のようにリアルタイム通信で連動させることができたりする仕組みの話を、この記事で取り扱います。詳細は続きの記事で書こうと思っていて、今回は概要を記事化してみます。
今回の仕組みに関係してくる主なキーワードは、以下のとおりです。
- ブラウザの開発者ツール（の中のコンソール）
- JavaScript（Node.js を使うもの、ブラウザ上で動かすバージョン）
- リアルタイム通信（WebSocket のサーバー・クライアント）
ちなみに、1つ前に書いていた以下の記事の内容も、今回の話に少し関連していたりします。
●#Scratch 3.0 のキー入力イベントをブラウザのコンソール（開発者ツール）の JavaScript からランダムに繰り返し発生させてみる - Qiita
https://qiita.com/youtoy/items/f9e4ab248d3bdd0463f0
今回の仕組みの概要
まずは、今回の仕組みの概要を「構成要素」・「」示します。
こちらが今回の構成要素の話です。
- Scratch を開いたブラウザタブ（開発者ツールのコンソールで JavaScript を実行）
- toio Do を開いたブラウザタブ（開発者ツールのコンソールで JavaScript を実行）
- Node.js のプログラム（WebSocketサーバー機能を動かすだけのもの）
「Scratch」と「toio Do」の 2つのタブをシンクロさせるリアルタイム通信は、Node.js のプログラムを介した WebSocket で実現しています。また、toio Do と Scratch を開いたブラウザタブでは、「以下に書いたそれぞれのブロックのプログラム」を動かしつつ、さらにそれと合わせて「ブラウザの開発者ツールのコンソールを開いて入力した、以下の処理を実行する JavaScript のプログラムが動いています。
次は、ブロックのプログラムで実装した内容の話です。
- toio Do：
- toio の姿勢検出を動かし、toio のどの面が上を向いているかによって、それに対応した出力（数字）を得る
- 上記の姿勢検出の出力を画面上に表示する（変数ブロックを利用）
- 一定時間ごとに、上記の姿勢検出の出力を取得し、その結果によってスプライトの位置や背景の内容を変える
- Scratch：
- 矢印キーが押されたら、その結果によってスプライトの位置や背景の内容を変える
そして以下は、ブラウザの開発者ツールのコンソールで動かしているプログラムで実行している内容の話です。
- toio Do を開いたタブ：
- toio Do の画面上に表示されている変数の出力の数字（姿勢検出の結果）を、定期的に取得する
- 上記の取得した数字を、WebSocketサーバーに送る
- Scratch を開いたタブ：
- WebSocketサーバーから情報を受けとる
- 情報を受けとったタイミングで、ブラウザ上でのキー押下イベントをプログラムから発生させる
あとは、上記の「WebSocketサーバー」に該当するプログラムを、Node.js で動かしています。その内容は、パッケージの「ws」を使った 10行くらいのプログラムになっています。
以上のどの内容も、シンプルな内容になるよう作っています。これにより、冒頭に掲載していた動画のような内容を実現しました。
おわりに
ひとまず概要編を書いたので、実際に使ったプログラムの詳細についてなどは、続きの記事として別で書ければと思っています。
※ 【追記】 続きの記事を書きました
●Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【ソースコード編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連） - Qiita
あとは、今回使ったものと別の環境も組み合わせて使ってみるようなことや（例えば、個人的には Stretch3 や AkaDako などいったものを組み合わせてみようと思っています）、通信部分に MQTT といった IoT の通信に使われる仕組みも組み合わせた「公式の Scratch（や他のサービス等）での IoT の活用」といった、デバイス連携も試して紹介できればと思います（簡単な動作確認はできているので、実現可能なことは確認済みだったりします）。
【追記】 Stretch3・AkaDako でインターネット経由の LINEアプリ連携（IoT的なこと）
インターネット経由での HTTPリクエストを組み合わせた、IoT的なことができました。
LINE Botサーバーがブラウザとの WebSocket通信も行う、といった構成です。
【追記2】 Scratch のソースにてを加えて IoT をやる話
Scratch で IoT的なことや外部との通信をやる話は、公式の Scratch を使うやり方ではない方向であれば、過去に自分がやった事例で MQTT が扱える独自拡張を作ってしまう、というものががありました。Node.js で実装できる機能であれば、こちらのほうが王道という感じではあります。