【ESP32/M5Stack】ブラウザだけでファームウェア書き込み！ESP Web Flasherが超便利
はじめに
ESP32やM5Stackのファームウェアを配布したいけど、相手に「PlatformIOインストールして」「esptool入れて」と言うのはハードルが高い...
そんな悩みを解決する ESP Web Flasher を紹介します。
受け取る側はブラウザだけでOK！ 🎉
対象読者
- ESP32/M5Stackのファームウェアを配布したい人
- 開発環境なしで書き込みしたい人
- チームメンバーに簡単に配布したい人
方法比較
| 方法 | 受け取る側に必要なもの | 難易度 | おすすめ度 |
|---|---|---|---|
| ESP Web Flasher | ブラウザのみ | ⭐ 超簡単 | ⭐⭐⭐ |
| esptool.py | Python + pip | ⭐⭐ 普通 | ⭐⭐ |
| M5Burner | 専用アプリ | ⭐ 簡単 | ⭐⭐ |
| PlatformIO | VS Code + 拡張機能 | ⭐⭐⭐ 面倒 | ⭐ |
方法1: ESP Web Flasher（最もおすすめ）🌐
必要なもの
- Chrome / Edge（WebSerial対応ブラウザ）
- USBケーブル
-
.binファイル（ファームウェア）
手順
Step 1: サイトにアクセス
Step 2: デバイスを接続
- ESP32/M5StackをUSBで接続
- 「CONNECT」をクリック
- COMポートを選択
Step 3: ファームウェア書き込み
- 「INSTALL」をクリック
-
.binファイルを選択 - 書き込み開始！
✅ 書き込み完了！
💡 ポイント
- ドライバ不要（CH340/CP210xドライバはOS標準で対応）
- インストール不要
- クロスプラットフォーム（Windows/Mac/Linux）
方法2: esptool.py（コマンドライン派向け）
インストール
pip install esptool
書き込みコマンド
# ESP32-S3の場合
esptool.py --chip esp32s3 --port COM71 --baud 921600 write_flash 0x10000 firmware.bin
# ESP32（無印）の場合
esptool.py --chip esp32 --port COM71 --baud 921600 write_flash 0x10000 firmware.bin
パラメータ説明
| パラメータ | 説明 | 例 |
|---|---|---|
--chip |
チップ種類 | esp32, esp32s3, esp32c3 |
--port |
COMポート | COM71, /dev/ttyUSB0 |
--baud |
通信速度 | 921600（高速）, 115200 |
write_flash |
書き込みアドレス | 0x10000（通常） |
方法3: M5Burner（M5Stack公式）
M5Stack専用なら公式ツールも便利です。
ダウンロード
使い方
- M5Burnerを起動
- 左メニューから「User Custom」を選択
-
.binファイルを読み込み - COMポート選択 → 「Burn」
配布パッケージの作り方
フォルダ構成
release_v1.0/
├── firmware.bin # ファームウェア本体
├── flash_easy.bat # Windows用書き込みスクリプト
├── flash_easy.sh # Mac/Linux用
└── README.txt # 使い方説明
flash_easy.bat（Windows用）
@echo off
echo ========================================
echo Firmware Flash Tool v1.0
echo ESP32-S3 / M5Stack CoreS3
echo ========================================
echo.
REM Check argument for COM port
if not "%1"=="" (
set PORT=%1
goto :flash
)
REM Show COM ports
echo [Connected COM Ports]
powershell -NoProfile -Command "Get-WmiObject Win32_SerialPort | Select-Object DeviceID, Caption | Format-Table -AutoSize"
echo.
REM Input COM port
set /p PORT="Enter COM port (e.g. COM71): "
:flash
REM Check esptool installed
pip show esptool >nul 2>&1
if errorlevel 1 (
echo Installing esptool...
pip install esptool
)
REM Check bin file
if not exist "firmware.bin" (
echo [ERROR] firmware.bin not found!
pause
exit /b 1
)
REM Flash firmware
echo Flashing... Port: %PORT%
python -m esptool --chip esp32s3 --port %PORT% --baud 921600 write_flash 0x10000 firmware.bin
if errorlevel 1 (
echo [ERROR] Flash failed!
) else (
echo [SUCCESS] Flash complete!
)
pause
使い方
# 方法1: ダブルクリック → COMポート入力
flash_easy.bat
# 方法2: 引数でCOMポート指定（自動化向け）
flash_easy.bat COM71
ポイント
| 項目 | 説明 |
|---|---|
| 日本語文字化け回避 | 英語メッセージを使用 |
| esptool呼び出し |
python -m esptool で確実に動作 |
| COMポート一覧表示 | 接続中のポートを自動表示 |
| 引数対応 |
flash_easy.bat COM71 で直接指定可能 |
README.txt
========================================
ファームウェア v1.0 書き込み手順
========================================
【方法1】ブラウザで書き込み（推奨）
1. Chrome/Edgeで https://web.esphome.io/ にアクセス
2. デバイスをUSB接続
3. 「CONNECT」→ COMポート選択
4. 「INSTALL」→ firmware.bin を選択
5. 完了！
【方法2】バッチファイルで書き込み
1. デバイスをUSB接続
2. flash_easy.bat をダブルクリック
3. COMポート番号を入力（例: COM71）
4. 完了！
【トラブルシューティング】
- COMポートが見つからない → USBケーブル確認、ドライバ確認
- 書き込みエラー → ボタン押しながらUSB接続してフラッシュモードへ
ビルド済みファームウェアの場所
PlatformIOでビルドすると、以下に生成されます：
.pio/build/[環境名]/firmware.bin
例：
.pio/build/m5stack-cores3-dmx-base/firmware.bin
.pio/build/m5stack-stamps3/firmware.bin
トラブルシューティング
Q: COMポートが表示されない
A: ドライバをインストール
| チップ | ドライバ |
|---|---|
| CH340 | https://www.wch.cn/download/CH341SER_EXE.html |
| CP210x | https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers |
| FTDI | https://ftdichip.com/drivers/vcp-drivers/ |
Q: 書き込みが途中で止まる
A: フラッシュモードで接続
- デバイスのボタンを押しながらUSBを接続
- ボタンを離す
- 再度書き込みを実行
Q: "A]fatal error occurred: Failed to connect"
A:
- 別のシリアルモニターが開いていないか確認
- COMポート番号を再確認
- USBケーブルを交換（データ転送対応のもの）
まとめ
| シーン | おすすめ方法 |
|---|---|
| 非開発者への配布 | ESP Web Flasher |
| 社内チームへの配布 | ESP Web Flasher + README |
| 自分用・開発中 | esptool.py / PlatformIO |
| M5Stack専用 | M5Burner |
ESP Web Flasher を使えば、ブラウザだけでファームウェア更新ができます。
配布時は .bin ファイルとURLを送るだけ！
ぜひ活用してみてください 🚀
DMX-TOOL DMX-BASE（DMX-TX） Art-net-Monitor パソコンでも操作できます
参考リンク
タグ: ESP32 M5Stack ファームウェア IoT PlatformIO