はじめに

第1回では、学校のChromebookからESP32を使いたいと考え、Web SerialとTurboWarpを使った試作を始めた経緯を紹介しました。

今回は、実際にTurboWarpで開発したESP32拡張についてまとめます。

最終的には、機能を次の7種類に分けました。

ESP32 接続
ESP32 GPIO
ESP32 DHT
ESP32 OLED
ESP32 ESP-NOW
ESP32 環境指数
データ処理

この構成は、後にScratch Editorベースの ESP32 Education Editor へそのまま引き継がれることになります。

1. Web SerialによるESP32接続

まず必要なのは、ブラウザからESP32へ接続する機能です。

TurboWarp拡張からWeb Serial APIを使い、ESP32とUSBシリアル通信を行います。

通信条件は115200bpsとし、ESP32側には共通ファームウェアを書き込んでおきます。

構成は次のようになります。

TurboWarp
   ↓
ESP32拡張
   ↓
Web Serial
   ↓
USB
   ↓
ESP32共通ファームウェア

拡張側では、接続だけでなく、

接続解除
接続状態
MACアドレス取得
Wi-Fiチャンネル取得

なども扱えるようにしました。

MACアドレスは、後述するESP-NOWで非常に便利です。

2. ESP32 GPIO

GPIOは電子工作の基本です。

最初に確認したのもGPIO23を使ったLED点灯でした。

ブロックとしては、

GPIO 23 を 出力 に設定
GPIO 23 に HIGH を出力

のような形です。

さらにデジタル入力にも対応しました。

使用可能ピンを選択式にすることで、児童・生徒が存在しないGPIO番号を入力してしまうことを減らしています。

3. ESP32 DHT

次にDHT11 / DHT22温湿度センサに対応しました。

取得できる値は、

温度
湿度
読み取り状態

です。

温湿度センサは教材として非常に扱いやすく、ここから熱中症対策、乾燥対策、環境測定へ発展できます。

単に数値を表示するだけでなく、後述する環境指数と組み合わせることで学習の幅が広がります。

4. ESP32 OLED

表示装置として、SSD1306 128×64 OLEDにも対応しました。

標準構成は次の通りです。

I2C Address : 0x3C
SDA         : GPIO21
SCL         : GPIO22

主な機能は、

OLED初期化
画面消去
カーソル位置指定
文字表示
指定範囲の消去

です。

特に「指定範囲の消去」は、センサ値だけを更新したいときに便利です。

毎回画面全体を消去するとちらつきやすいため、必要な部分だけ黒で塗りつぶして更新できるようにしました。

5. ESP32 ESP-NOW

今回の中でも、教育用途として特に重要だと考えているのがESP-NOWです。

ESP-NOWを使えば、学校のWi-Fiやインターネットを使わずにESP32同士を直接通信できます。

ESP32 A
   ↓
ESP-NOW
   ↓
ESP32 B

送信方法は、

MACアドレス未指定 → ブロードキャスト
MACアドレス指定 → ユニキャスト

としました。

例えば、

送信先MAC [          ] に [HELLO] を送信

のMAC欄が空ならブロードキャスト、指定すれば特定のESP32だけに送信します。

6. 学校ネットワークを使わずに通信の基本を学ぶ

ESP-NOWの教育的な価値は、単に「無線でデータが送れる」ことだけではありません。

学校のWi-Fiや校内LANへESP32を接続しなくても、実機を使って通信の基本概念を学べます。

例えば、

送信側と受信側
MACアドレスによる相手の識別
ブロードキャスト
ユニキャスト
送信成功／失敗
RSSI
通信距離
データ欠損
再送や中継の考え方

などを扱えます。

授業では、例えば2台のESP32を使って、

AからBへ送る
↓
Bが受信する
↓
受信した内容を表示する

という最小構成から始められます。

次に、

Aから全員へ送る

ブロードキャストと、

AからBだけへ送る

ユニキャストを比較できます。

さらに距離を変えたり、教室・廊下・別の階などで実験したりすれば、通信品質について考える学習にも発展します。

学校のネットワーク設定を変更したり、ESP32を校内Wi-Fiへ登録したりする必要がないため、通信技術の学習を学校ネットワークから切り離して実施できることは大きな利点です。

なお、ESP-NOWは2.4GHz帯を使う無線通信ですが、通常の学校Wi-Fiアクセスポイントを経由して通信する方式ではありません。

7. ESP-NOWの実験

ESP-NOWについては、屋内・屋外で通信実験も行いました。

見通し環境では数百m規模で通信でき、鉄骨建物内でもLong Rangeモードの効果を確認できました。

教育で重要なのは、通信距離だけではありません。

例えば、

教室
  ↓
廊下
  ↓
保健室

のように、学校内の離れた場所から環境データを集めることができます。

また、ESP-NOWはWi-Fiアクセスポイントを必要としないため、学校ネットワークの制約を受けにくいという利点があります。

8. 環境指数

温度と湿度から求められる環境指数をまとめた拡張も作りました。

実装した主な指標は、

不快指数
Heat Index
Humidex
露点温度
絶対湿度
湿球温度
VPD
水蒸気圧
THI
簡易WBGT

です。

この中でも、学校教材として面白いと感じているのが絶対湿度です。

例えば、

夏
→ WBGT
→ 熱中症対策

冬
→ 絶対湿度
→ 乾燥状態の確認

のように、同じ温湿度センサを一年を通して活用できます。

9. データ処理

ESP-NOWで複数の値を送るとき、例えば次のような文字列を使うことがあります。

25.3,60.2,22.8,TX-01

そこで、データ処理用の拡張も作りました。

主な機能は、

CSV分割
指定位置の文字列取得
指定位置の数値取得
項目数
左からN文字
右からN文字
指定位置からの部分文字列
文字列結合

です。

これによって、ESP-NOWで受信したデータをScratch上で分解し、それぞれの値として扱いやすくなりました。

10. なぜ7つの拡張に分けたのか

当初は一つのESP32拡張にまとめる方法も考えました。

しかし、教育用途では機能ごとに分かれていた方が分かりやすいと判断しました。

接続
GPIO
DHT
OLED
ESP-NOW
環境指数
データ処理

と分かれていれば、「今日はDHTとOLEDだけ使う」といった授業構成がしやすくなります。

また、カテゴリごとに色が違うため、児童・生徒がブロックを見分けやすいという利点もあります。

11. TurboWarp Extension Galleryへの提案

完成した拡張機能は、TurboWarp Extension Galleryへの掲載も考え、Pull Requestを作成しました。

結果としては採用には至りませんでした。

理由は、ESP32という特定のハードウェアと、別途ESP32側ファームウェアを必要とする構成が、一般的なExtension Galleryの対象としては用途が限定的だったためです。

重要なのは、動作しなかったから不採用になったわけではないという点です。

実際に、

Web Serial
GPIO
DHT
OLED
ESP-NOW
環境指数
データ処理

は実機で動作していました。

12. 「Galleryに載せる」から「教育用Editorを作る」へ

この経験から考え方が変わりました。

それまでは、

TurboWarpにESP32拡張を追加する

という発想でした。

しかし、学校で継続的に使うことを考えると、

ESP32教育用として独立したEditorを用意した方がよいのではないか

と考えるようになりました。

つまり、

TurboWarpの拡張

から、

ESP32を使うための教育用Scratch系Editor

へ発想が変わったことになります。

13. 次の選択肢としてScratch Editor

そこで次に検討したのが、Scratch Foundationが公開しているオープンソースのScratch Editorです。

Scratch Editorをベースにすれば、

Scratchに近い操作性
拡張カテゴリ
ブロックプログラミング
Webアプリとしての公開

を維持しながら、ESP32向けの機能を組み込めます。

TurboWarpで作った7つの拡張構成も、そのまま移植できます。

この段階で、現在の名称である

ESP32 Education Editor

という方向性が固まりました。

14. TurboWarpでの開発が無駄にならなかった理由

TurboWarp版は、最終製品そのものにはなりませんでした。

しかし、ここで得たものは非常に大きいものでした。

Web Serial通信方式
ESP32共通ファームウェア
GPIOコマンド
DHT読み取り
OLED制御
ESP-NOW通信
環境指数
データ処理
7カテゴリ構成

これらは、そのままScratch Editor版へ引き継ぐことができました。

つまりTurboWarp版は、

ESP32 Education Editorの機能を検証するプロトタイプ

として非常に重要な役割を果たしました。

15. 第3回へ

第3回では、

Scratch Editorへの移植
7つの拡張の実装
GitHubでの管理
GitHub Actions
GitHub Pages公開
ブランド変更
menu-bar.jsx変更によるクラッシュ
安全なブランド変更方式
v0.3.3公開
公開版からのESP32実機接続

までをまとめます。

関連リンク

ESP32 Education Editor 公開版

GitHub

シリーズ

第1回：学校のChromebookからESP32を使いたい
第2回：TurboWarpでESP32拡張を作る
第3回：Scratch EditorからESP32 Education Editorへ