はじめに
第1回では、学校のChromebookからESP32を使いたいと考えた背景をまとめました。
第2回では、TurboWarpで7種類のESP32拡張を作り、Web Serial、ESP-NOW、環境指数などを実装した経緯を紹介しました。
第3回では、そのTurboWarp版を基に、Scratch Editorを使った独立したWebアプリ
ESP32 Education Editor
へ発展させ、GitHub Pagesで公開するまでをまとめます。
1. Scratch Editorをベースにする
TurboWarp版でESP32との通信方式は確立できました。
次の課題は、
学校で継続的に使える独立した教育用Editorにすること
でした。
そこで、Scratch Foundationが公開しているオープンソースのScratch Editorをベースにすることにしました。
基本構成は次の通りです。
Scratch Editor
+
ESP32用拡張
+
Web Serial
+
ESP32共通ファームウェア
名称は ESP32 Education Editor としました。
ブランド名は Davinichi です。
2. TurboWarpで作った7拡張を移植
TurboWarp版で作った構成を、ほぼそのままScratch Editorへ移しました。
現在のESP32 Education Editorには、次の7種類の拡張があります。
- ESP32 接続
- ESP32 GPIO
- ESP32 DHT
- ESP32 OLED
- ESP32 ESP-NOW
- ESP32 環境指数
- データ処理
Scratchの拡張機能一覧に、それぞれ別カードとして表示されます。
一つの巨大なESP32カテゴリにまとめるのではなく、機能ごとに分けたことで、授業で必要な機能だけ選びやすくなりました。
3. Serial接続は共通化
7つの拡張がそれぞれSerialポートを開く構成にはしていません。
内部では共通のWeb Serial Transportを使用しています。
ESP32 接続 ─┐
GPIO │
DHT │
OLED ├─ 共通Web Serial Transport ─ USB ─ ESP32
ESP-NOW │
環境指数 │
データ処理 ─┘
これにより、接続処理を一元化できます。
児童・生徒から見ると複数の拡張に分かれていますが、内部では同じESP32との接続を共有しています。
4. ESP32側の共通ファームウェア
ESP32側には、あらかじめ共通ファームウェアを書き込みます。
ブラウザ側からコマンドを送ることで、ESP32が処理を実行します。
この方式の利点は、授業中に毎回コンパイルや書き込みをしなくてよいことです。
ブロックを組む
↓
実行する
↓
Web Serialでコマンド送信
↓
ESP32が処理
Chromebookを中心に考えると、この構成は非常に扱いやすいと感じています。
5. 実機テスト
ESP32-WROOM-32を使って、7種類すべての機能を実機で確認しました。
| 機能 | 結果 |
|---|---|
| ESP32 接続 | OK |
| GPIO | OK |
| DHT | OK |
| OLED | OK |
| ESP-NOW | OK |
| 環境指数 | OK |
| データ処理 | OK |
ESP-NOWとデータ処理についても実機で確認しました。
これで、TurboWarp版からScratch Editorへ移植した主要機能が一通り動作することを確認できました。
6. GitHubで管理する
ソースコードはGitHubで管理しています。
リポジトリは、
です。
開発では、
main
↓
作業ブランチ
↓
Pull Request
↓
GitHub Actions
↓
mainへMerge
という流れを使っています。
個人開発でも、Pull Requestを使うことで変更内容を確認しやすくなります。
7. GitHub Pagesで公開
学校で使うことを考えると、
URLを開くだけで利用できる
ことが重要です。
そこでGitHub Pagesを利用しました。
公開URLは、
です。
GitHub ActionsでScratch Editorをビルドし、その成果物をGitHub PagesへDeployしています。
構成は、
GitHub
↓
GitHub Actions
↓
Scratch EditorをBuild
↓
GitHub PagesへDeploy
です。
8. 公開版からESP32実機へ接続
公開後、GitHub Pages版からもESP32へ接続して確認しました。
GitHub Pages
↓
HTTPS
↓
Chrome
↓
Web Serial
↓
USB
↓
ESP32
この経路で実際にESP32へ接続できました。
これで、
Windows用ソフトをインストールせず、ブラウザからESP32を使う
という当初の目標に大きく近づきました。
9. ESP32同士の通信は学校ネットワークを使わない
ESP32 Education Editorで特に重視しているのが、学校のネットワークを使わずに通信の学習ができることです。
ChromebookとESP32の制御はUSBのWeb Serialで行い、ESP32同士の無線通信にはESP-NOWを使います。
Chromebook
│
│ USB / Web Serial
↓
ESP32 A
↕
ESP-NOW
↕
ESP32 B
このESP32 AとESP32 Bの通信経路には、学校Wi-Fiや校内LANを使用しません。
そのため、
- 学校Wi-FiへのESP32登録
- SSIDやパスワードの設定
- IoT機器を校内LANへ接続するための設定変更
を行わなくても、実機による通信学習ができます。
授業では、
- MACアドレス
- ブロードキャスト
- ユニキャスト
- 送信と受信
- RSSI
- 通信距離
- データ欠損
といった内容を扱えます。
つまり、学校の本番ネットワークとは切り離した状態で、無線通信やセンサネットワークの学習環境を作れるわけです。
これはESP32 Education Editorを学校で使ううえで、非常に大きな意味があると考えています。
なお、GitHub Pages版を最初にブラウザへ読み込む際にはインターネット接続が必要です。しかし、ESP32同士のESP-NOW通信そのものは学校Wi-Fiや校内LANを経由しません。
10. ブランド表示を整理する
Scratch Editorをそのまま公開するのではなく、ESP32教育用Editorとして表示も整理しました。
v0.3系では、
- ヘッダーロゴ
- ブラウザタイトル
- favicon
- Aboutページ
- ファイルメニューの日本語表記
を ESP32 Education Editor 用に変更しました。
一方で、Scratch Editorをベースにしていることは明示しています。
上流プロジェクトのライセンスや商標に関する情報を保持し、Aboutや関連ドキュメントから確認できる構成にしています。
11. 意外に難しかったロゴ変更
ブランド変更で最も印象に残ったのが、左上ロゴの変更でした。
最初は menu-bar.jsx を変更して、
- 独自ロゴ
- Aboutリンク
を直接追加しました。
しかし実行すると、
うわっ! 何か問題が発生しました。
Scratchがクラッシュしたようです。
という状態になりました。
webpackのビルド自体は成功していました。
つまり、
Build成功
↓
ブラウザ実行時にReact側でクラッシュ
という状態です。
12. 原因切り分け
そこで、変更した部分を一つずつ戻しました。
menu-bar.jsx をv0.2の正常動作版に戻したところ、Editorは正常に起動しました。
これで、原因はブランド変更時に追加した menu-bar.jsx の処理にあると判断できました。
そこで方針を変更しました。
React側のmenu-bar.jsxは変更しない。
代わりに、既存のロゴSVGファイルそのものをESP32 Education Editor用に差し替える方式にしました。
13. 上流コードへの変更を最小限にする
この変更によって、Editorは安定して起動するようになりました。
今回の経験から、改めて重要だと感じたのが、
動いている上流コードへの変更は最小限にする
という考え方です。
特に大きなオープンソースプロジェクトをベースにする場合、内部ロジックを大きく変えるより、
- 既存の仕組みを利用する
- 画像や設定で対応する
- 独自機能はできるだけ分離する
方が保守しやすくなります。
14. faviconとブラウザタイトル
Scratch Editor 15.1.1では、ブラウザタイトルやfaviconの設定場所が単純なHTMLではありませんでした。
実際には、
packages/scratch-gui/src/playground/index.ejs
を変更する必要がありました。
最初のスクリプトでは .html だけを探していたため、
Updated browser title/favicon in 0 HTML file(s).
となりました。
そこで .ejs にも対応し、最終的には
ESP32 Education Editor
というブラウザタイトルと独自faviconを表示できるようになりました。
15. Aboutページ
最初は左上ロゴをクリックするとGitHubリポジトリが直接開く構成でした。
しかし、学校で使うEditorとしては、
いきなりGitHubへ移動するより、まず製品概要やライセンスを確認できる方が分かりやすい
と考えました。
そこでv0.3.3では、専用Aboutページを用意しました。
Aboutページには、
- ESP32 Education Editorの概要
- Davinichi
- Copyright表記
- Scratch Editorをベースにしていること
- ライセンス・商標に関する案内
- GitHubへのリンク
をまとめています。
16. ファイルメニューを日本語化
学校で児童・生徒が利用することを考え、ファイルメニューも日本語化しました。
例えば、
File
→ ファイル
Load from your computer
→ コンピューターから読み込む
Save to your computer
→ コンピューターに保存する
という形です。
小さな変更ですが、学校現場ではこうした部分が使いやすさに大きく影響します。
17. v0.3.3
現在の公開版は v0.3.3 です。
確認済みの内容は次の通りです。
ESP32 接続 OK
GPIO OK
DHT OK
OLED OK
ESP-NOW OK
環境指数 OK
データ処理 OK
GitHub Pages公開 OK
公開版からESP32接続 OK
独自favicon OK
専用Aboutページ OK
日本語ファイルメニュー OK
18. GitHub上でPull Requestを使って反映
v0.3.3では、
branding-v0.3
という作業ブランチを作成しました。
その後、
git add .
git commit
git push
でGitHubへ送り、Pull Requestを作成しました。
ESP32 Education用のチェックが成功したことを確認した上で、main へMergeしました。
さらに、GitHub Pages用のActionsを実行して公開版へ反映しました。
この流れによって、
ローカル
↓
GitHub branch
↓
Pull Request
↓
main
↓
GitHub Pages
という開発手順ができました。
19. v0.4 ― 接続の安定性と表示機能を改善
v0.3.3の公開後、実際にESP32を接続して使いながら、次の改善点を検討しました。
今回のv0.4では、機能を大きく増やすのではなく、
- USB接続をより安全に扱う
- センサ値などを見やすく表示する
という2点に絞って改善しました。
USBケーブル切断時の安全な処理
Web SerialでESP32へ接続している途中にUSBケーブルが抜かれることは、学校での利用では十分に考えられます。
そこでv0.4では、USBケーブルが抜かれたことを検出し、安全に未接続状態へ移行する処理を追加しました。
動作は次のようになります。
ESP32に接続
↓
Web Serialで通信
↓
USBケーブルが抜かれる
↓
切断を検出
↓
接続状態を「未接続」にする
↓
reader / writer / port の状態を整理
20. 現在の構成
現在の構成をまとめると、次のようになります。
┌─ GPIO
├─ DHT
├─ OLED
Scratch Editor ─────┼─ ESP-NOW
├─ 環境指数
└─ データ処理
↓
Web Serial Transport
↓
USB
↓
ESP32共通ファームウェア
公開側は、
GitHub
↓
GitHub Actions
↓
GitHub Pages
↓
Chrome / Chromebook
↓
ESP32
です。
21. KidsBlockとの役割分担
ESP32 Education Editorを作ったからといって、KidsBlock ESP32 Education Packが不要になるわけではありません。
むしろ、学校環境によって使い分けられるのが理想だと考えています。
Windows
→ KidsBlock ESP32 Education Pack
Chromebook
→ ESP32 Education Editor
機能や教材の考え方を共通化しながら、それぞれの端末環境に合った方法を選べるようにしたいと思っています。
22. 今後
今後取り組みたいことは、
- Chromebookでの学校現場テスト
- 教員向け教材
- サンプルプロジェクト
- ESP-NOW教材の充実
- 対応センサの追加
- UI改善
- 英語版
- KidsBlock版との機能共通化
などです。
また、学校で実際に使ってもらいながら、
児童・生徒が迷わず使えるか
という視点で改善していきたいと考えています。
おわりに
今回の開発は、
KidsBlock拡張
↓
TurboWarp拡張
↓
Web Serial
↓
ESP32共通ファームウェア
↓
Scratch Editorへ移植
↓
ESP32 Education Editor
↓
GitHub Pages公開
↓
公開版から実機接続
という形で少しずつ発展してきました。
最初から独自Editorを作る計画だったわけではありません。
学校で実際に使うことを考え、一つずつ問題を解決していった結果、現在のESP32 Education Editorになりました。
まだ開発途中ですが、
Chromebookのブラウザから、Scratch系のブロックでESP32を操作する
という基本環境は実現できました。
今後は、実際の教育現場で使いながら改善を続けていきたいと思います。
ファームウェア
ESP32 Education Editorを使用するには、ESP32へあらかじめ共通ファームウェアを書き込んでおきます。
GitHubリポジトリ内の次のファイルを使用します。
firmware/esp32-education-editor/esp32_education_editor_firmware_v0_2.ino
GitHub
https://github.com/davinichi/ESP32-Education-Editor
関連リンク
ESP32 Education Editor 公開版
GitHub
シリーズ
- 第1回：学校のChromebookからESP32を使いたい
- 第2回：TurboWarpでESP32拡張を作る
- 第3回：Scratch EditorからESP32 Education Editorへ