ESP32でWiFi設定をブラウザから設定できるようにWiFi Managerを構築する

「ESP32のWiFi設定を変えるたびに、コードを書き直して再書き込みしなきゃいけないの？」
そんな悩みは、WiFi Managerを構築することで完全に解決できます。
一度作ってしまえば、スマホやPCのブラウザだけでWiFiの設定・変更が可能になります。

この記事で使用しているのは ESP32-WROOM-32D です。コスパが高く、WiFi・Bluetoothを内蔵しているためIoTプロジェクトの入門に最適なボードです。類似のEPS32でも同じようにWiFi Managerを構築できるのでお手持ちのESP32でお試しください。

あなたはこんな悩みを抱えていませんか？

ESP32を使ったIoTプロジェクトを進めていると、こんな場面に必ず直面します。

自宅WiFiのパスワードを変えたら、ESP32が接続できなくなった
友人の家や職場に持っていくたびに、コードを書き直して再書き込みしている
そもそもSSIDやパスワードをコードに直書きするのが気持ち悪い

「マイコンなんだからしょうがない」と思いがちですが、実はそれは思い込みです。
WiFi Managerという仕組みを使えば、コードを一切触らずにブラウザだけでWiFi設定を変更できるようになります。

WiFi Managerが無い場合のフロー

WiFi Managerとはどんな仕組みか？

WiFi Managerとは、ESP32自身がWiFiのアクセスポイント（AP）になり、ブラウザ経由でWiFiの設定を受け付けるという仕組みです。

動作フロー

WiFi Manager動作フロー図

NVS（Non-Volatile Storage）とは？
ESP32が内蔵しているフラッシュメモリ上のKey-Value Storeです。電源を切ってもデータが消えないため、WiFi認証情報の保存に最適です。Preferences ライブラリで簡単に読み書きできます。

使用するライブラリと役割

このプロジェクトで使うライブラリは以下の5つです。ArduinoJson のみ外部ライブラリですが、PlatformIOなら platformio.ini に書くだけで自動インストールされるため、手動での導入作業は不要です。

ライブラリ名	役割	取得方法
`WiFi.h`	WiFi接続・APモードの管理	自動（ボードパッケージ）
`WebServer.h`	HTTPサーバーの起動・ルーティング	自動（ボードパッケージ）
`Preferences.h`	NVSへのデータ保存・読み込み	自動（ボードパッケージ）
`ArduinoJson.h`	JSONのシリアライズ・デシリアライズ	自動（`platformio.ini`で管理）
`esp_mac.h`	MACアドレスの取得	自動（ボードパッケージ）

コードの仕組みを読み解く

ここからは、GitHubで公開しているサンプルコードの中身を順番に解説します。

APモードの起動

WiFiに接続できない場合、ESP32はAPモードに切り替わります。
APのSSIDは esp32-test-XXYY の形式（MACアドレスの4桁）で自動生成されるため、複数台使っても名前が衝突しません。

void startAP() {
  // Generate AP SSID from the last 2 octets of the MAC address
  uint8_t mac[6] = {0};
  esp_efuse_mac_get_default(mac);
  char apSsid[30];
  snprintf(apSsid, sizeof(apSsid), AP_SSID_PREFIX "%02X%02X", mac[4], mac[5]);

  WiFi.mode(WIFI_AP_STA);
  WiFi.softAP(apSsid, AP_PASSWORD);
  Serial.println("[AP] AP Mode started");
  Serial.print("[AP] SSID: ");
  Serial.print(apSsid);
  Serial.print(", IP: ");
  Serial.println(WiFi.softAPIP());
}

WIFI_AP_STAはESP32が子機として自宅のWiFiに接続しながら、同時に自分自身でも親機としてWi-Fiを出すモードです。APモード中でもWiFiスキャンや接続試行が可能になる重要なポイントです。

HTTPサーバーのエンドポイント一覧

メソッド	パス	説明
GET	`/`	設定ページのHTMLを返す
GET	`/scan`	周辺WiFiのSSID一覧をJSONで返す
GET	`/api/status`	接続状態・IPアドレスをJSONで返す
POST	`/connect`	SSID・パスワードを受け取り接続テストする

WiFiスキャン（GET: /scan）

ブラウザが設定ページを開いたとき、周辺のWiFi一覧を自動取得します。
WiFi.scanNetworks() でスキャンし、SSID名をJSON配列として返しています。

void handleScan() {
  int n = WiFi.scanNetworks();
  StaticJsonDocument<1024> doc;
  JsonArray array = doc.to<JsonArray>();
  if (n > 0) {
    for (int i = 0; i < n; ++i) {
      if (WiFi.SSID(i).length() > 0) {
        array.add(WiFi.SSID(i));
      }
    }
    WiFi.scanDelete();
  }
  String out;
  serializeJson(doc, out);
  server.send(200, "application/json", out);
}

WiFi接続とNVSへの保存（POST: /connect）

ブラウザからSSIDとパスワードがPOSTで送られると、実際に接続を試みます。

// 指定回数WiFi接続を試みる
WiFi.mode(WIFI_AP_STA);
WiFi.begin(ssid.c_str(), pass.c_str());

int retries = 0;
while (WiFi.status() != WL_CONNECTED && retries < WIFI_RETRY_TEST) {
  delay(WIFI_RETRY_DELAY);
  Serial.print(".");
  retries++;
}
Serial.println();

接続に成功した場合のみ、Preferences（NVS）に認証情報を保存します。

// 接続成功時のみNVSに保存
prefs.begin("wifi", false);
prefs.putString("ssid", ssid);
prefs.putString("pass", pass);
prefs.end();

接続に失敗した場合、認証情報は保存されません。次回起動時もAPモードに戻ります。SSIDやパスワードを正確に入力してください。

セットアップ手順

必要なもの

この記事では ESP32-WROOM-32D を使用しています。WiFi・Bluetoothを内蔵し、入手性も高いためIoTプロジェクトの入門に最適な一枚です。類似のEPS32でも同じようにWiFi Managerを構築できるのでお手持ちのESP32でお試しください。

【重要】日本国内で利用する際のご注意

ESP32などの無線通信機器を日本国内で使用する場合、技適マーク（技術基準適合証明） がついているボードであるか必ず確認してください。技適マークのない機器でWi-FiやBluetoothの電波を発信すると、電波法違反になる恐れがあります。 Amazon等で購入する際は、「技適認証済み」と明記されているものや、信頼できる国内の電子部品ショップ（秋月電子通商やスイッチサイエンスなど）から購入することをおすすめします。記事内のAmazonリンクのESP32は技適マークがあるので安心してお使いいただけます。

ESP32-WROOM-32D 実物写真

その他に必要なもの：

USBケーブル（データ転送対応のMicro-USBまたはType-C）
PC（Windows / macOS / Linux）
PlatformIO（VS Code拡張機能として導入推奨）

PlatformIO CLIのインストール

VSCodeの拡張機能でもできますが、本記事では再現性が高くて安定動作するCLI版での手順を紹介します。

1. Pythonと必要パッケージをインストールする

sudo apt update
sudo apt install -y python3 python3-pip python3-venv wget

2. PlatformIO Coreのインストーラスクリプトを取得して実行する

cd ~
wget -O get-platformio.py https://raw.githubusercontent.com/platformio/platformio-core-installer/master/get-platformio.py
python3 get-platformio.py

3. インストール確認を行う

~/.platformio/penv/bin/platformio --version

4. `pio` コマンドを使いやすくするため、PATHを通す

echo 'export PATH=$PATH:$HOME/.platformio/penv/bin' >> ~/.bashrc
source ~/.bashrc

5. 動作確認をする

pio --version

コードのダウンロード

1. ターミナルでリポジトリをクローンする

git clone https://github.com/saitogo555/esp32-wifi-manager.git
cd esp32-wifi-manager

2. 必要に応じて作業ディレクトリを確認する

pwd
ls

PlatformIOは platformio.ini をもとに、必要な依存ライブラリ（ArduinoJson v6系）を自動取得します。

platformio.ini の中身を確認する

[platformio]
src_dir = .

[env:esp32dev]
platform = espressif32
board    = esp32dev
framework = arduino
monitor_speed = 115200
extra_scripts = pre:tools/embed_html.py
lib_deps =
    bblanchon/ArduinoJson @ ^6.21.4

board = esp32dev：ESP32-WROOM-32D を含む汎用ESP32開発ボード設定
lib_deps：ArduinoJson v6系を自動取得するよう指定済み
extra_scripts：HTMLファイルをヘッダーに変換するスクリプトをビルド前に実行

ビルド・書き込み・モニター

ESP32をPCにUSB接続したあと、PlatformIO CLIでビルド・書き込み・シリアルモニターを実行できます。

ビルドする

pio run

シリアルポートを確認する

ls /dev/ttyUSB* /dev/ttyACM* 2>/dev/null

たとえば /dev/ttyUSB0 が表示された場合は、そのポートを使って書き込みとモニターを行います。

書き込み

pio run -e esp32dev -t upload --upload-port /dev/ttyUSB0

シリアルモニター

pio device monitor -b 115200 -p /dev/ttyUSB0

このリポジトリには scripts/build.sh、scripts/write.sh、scripts/monitor.sh も含まれています。CLIコマンドを毎回手で打つのが面倒な場合は、これらのスクリプトを使ってもOKです。

# ① ビルドのみ
./scripts/build.sh

# ② 書き込み
./scripts/write.sh

# ③ シリアルモニター
./scripts/monitor.sh

WSL2でESP32を扱う場合、USBデバイスがそのまま見えないことがあります。その場合はWindows側で usbipd を使ってESP32をWSLにアタッチする必要があります。詳しくはよくある質問

WiFiを設定する手順

ブラウザで表示される設定ページ

1. `./scripts/write.sh` で書き込み完了後、シリアルモニターを起動する

./scripts/monitor.sh

2. 以下のようなログが表示されたら正常に起動している

--- WiFi Manager Starting ---
[AP] AP Mode started
[AP] SSID: esp32-test-A1B2, IP: 192.168.4.1
[HTTP] Server started

スマホまたはPCで esp32-test-XXYY（XXYYはMACアドレスの末尾4桁）に接続する
- パスワード: 12345678
ブラウザで http://192.168.4.1 を開く
接続したいWiFiのSSIDを選択し、パスワードを入力して「接続テスト & 保存」を押す
「接続成功!」と表示されれば設定完了！

WiFi接続成功時と失敗時の画面

次回起動時からは、保存したWiFiに自動的に接続されます。設定をやり直したい場合は、以下のPlatformIOのコマンドで全フラッシュを消去できます。

pio run --target erase

カスタマイズポイント

main.ino 冒頭の定数を変更するだけで動作を調整できます。

#define AP_SSID_PREFIX    "esp32-test-"  // APのSSIDプレフィックス（自由に変更可）
#define AP_PASSWORD       "12345678"     // APのパスワード（8文字以上必須）
#define WIFI_RETRY_MAX    20             // 起動時の接続リトライ回数
#define WIFI_RETRY_DELAY  500            // リトライ間隔（ミリ秒）

AP_PASSWORD は8文字以上でないとソフトAPが正常に起動しません。短くしすぎないよう注意してください。

よくある質問

http://192.168.4.1にアクセスしても画面が開かない

スマホのモバイルデータ通信がオンの場合、ESP32のAPではなくモバイル回線が使われることがあります。WiFi接続後、一時的にモバイルデータをオフにして再度アクセスしてみてください。

保存済みのWiFi設定をリセットしたい

PlatformIOのターミナルで pio run --target erase を実行すると、NVSを含む全フラッシュが消去されます。

WSL2（Windows Subsystem for Linux）から書き込めますか？

USBデバイスをWSL2に転送する usbipd コマンドを使うことで対応できます。

winget install --interactive --exact dorssel.usbipd-win

# Windows PowerShell（管理者）で実行
usbipd list
usbipd bind --force --busid <BUSID>
usbipd attach --wsl --busid <BUSID>

接続後、WSL2上では /dev/ttyUSB0 としてデバイスが認識されます。

APのパスワードをなくしてオープンにできる？

WiFi.softAP(apSsid) のようにパスワード引数を省略するとオープンAPになります。ただし誰でも接続できるためセキュリティリスクがあります。テスト環境のみでの使用を推奨します。

ESP32-WROOM-32D以外のボードでも動く？

ESP32シリーズ全般（ESP32-S3など）でも基本的な動作は可能ですが、MACアドレス取得のAPIや一部ピン配置が異なる場合があります。動作確認済みなのはESP32-WROOM-32Dです。

まとめ

WiFi Managerを使えば、コードを一切触らずにブラウザだけでESP32のWiFi設定を変更できるようになります。

WiFiのパスワードが変わっても再書き込み不要
複数台あっても台ごとにSSIDが変わるため管理しやすい
NVSへの保存で電源を切っても設定が保持される
PlatformIOでライブラリ管理もコード管理もまとめてできる

ESP32-WROOM-32Dはコスパが良く入手性も高いため、IoTプロジェクトの入門に最適な一枚です。ぜひこのWiFi Managerと組み合わせて試してみてください。

あなたはこんな悩みを抱えていませんか？

ESP32を使ったIoTプロジェクトを進めていると、こんな場面に必ず直面します。

自宅WiFiのパスワードを変えたら、ESP32が接続できなくなった
友人の家や職場に持っていくたびに、コードを書き直して再書き込みしている
そもそもSSIDやパスワードをコードに直書きするのが気持ち悪い

WiFi Managerが無い場合のフロー

WiFi Managerとはどんな仕組みか？

WiFi Managerとは、ESP32自身がWiFiのアクセスポイント（AP）になり、ブラウザ経由でWiFiの設定を受け付けるという仕組みです。

動作フロー

WiFi Manager動作フロー図

使用するライブラリと役割

ライブラリ名	役割	取得方法
`WiFi.h`	WiFi接続・APモードの管理	自動（ボードパッケージ）
`WebServer.h`	HTTPサーバーの起動・ルーティング	自動（ボードパッケージ）
`Preferences.h`	NVSへのデータ保存・読み込み	自動（ボードパッケージ）
`ArduinoJson.h`	JSONのシリアライズ・デシリアライズ	自動（`platformio.ini`で管理）
`esp_mac.h`	MACアドレスの取得	自動（ボードパッケージ）

コードの仕組みを読み解く

ここからは、GitHubで公開しているサンプルコードの中身を順番に解説します。

APモードの起動

void startAP() {
  // Generate AP SSID from the last 2 octets of the MAC address
  uint8_t mac[6] = {0};
  esp_efuse_mac_get_default(mac);
  char apSsid[30];
  snprintf(apSsid, sizeof(apSsid), AP_SSID_PREFIX "%02X%02X", mac[4], mac[5]);

  WiFi.mode(WIFI_AP_STA);
  WiFi.softAP(apSsid, AP_PASSWORD);
  Serial.println("[AP] AP Mode started");
  Serial.print("[AP] SSID: ");
  Serial.print(apSsid);
  Serial.print(", IP: ");
  Serial.println(WiFi.softAPIP());
}

HTTPサーバーのエンドポイント一覧

メソッド	パス	説明
GET	`/`	設定ページのHTMLを返す
GET	`/scan`	周辺WiFiのSSID一覧をJSONで返す
GET	`/api/status`	接続状態・IPアドレスをJSONで返す
POST	`/connect`	SSID・パスワードを受け取り接続テストする

WiFiスキャン（GET: /scan）

ブラウザが設定ページを開いたとき、周辺のWiFi一覧を自動取得します。
WiFi.scanNetworks() でスキャンし、SSID名をJSON配列として返しています。

void handleScan() {
  int n = WiFi.scanNetworks();
  StaticJsonDocument<1024> doc;
  JsonArray array = doc.to<JsonArray>();
  if (n > 0) {
    for (int i = 0; i < n; ++i) {
      if (WiFi.SSID(i).length() > 0) {
        array.add(WiFi.SSID(i));
      }
    }
    WiFi.scanDelete();
  }
  String out;
  serializeJson(doc, out);
  server.send(200, "application/json", out);
}

WiFi接続とNVSへの保存（POST: /connect）

ブラウザからSSIDとパスワードがPOSTで送られると、実際に接続を試みます。

// 指定回数WiFi接続を試みる
WiFi.mode(WIFI_AP_STA);
WiFi.begin(ssid.c_str(), pass.c_str());

int retries = 0;
while (WiFi.status() != WL_CONNECTED && retries < WIFI_RETRY_TEST) {
  delay(WIFI_RETRY_DELAY);
  Serial.print(".");
  retries++;
}
Serial.println();

接続に成功した場合のみ、Preferences（NVS）に認証情報を保存します。

// 接続成功時のみNVSに保存
prefs.begin("wifi", false);
prefs.putString("ssid", ssid);
prefs.putString("pass", pass);
prefs.end();

接続に失敗した場合、認証情報は保存されません。次回起動時もAPモードに戻ります。SSIDやパスワードを正確に入力してください。

セットアップ手順

必要なもの

【重要】日本国内で利用する際のご注意

ESP32-WROOM-32D 実物写真

その他に必要なもの：

USBケーブル（データ転送対応のMicro-USBまたはType-C）
PC（Windows / macOS / Linux）
PlatformIO（VS Code拡張機能として導入推奨）

PlatformIO CLIのインストール

VSCodeの拡張機能でもできますが、本記事では再現性が高くて安定動作するCLI版での手順を紹介します。

1. Pythonと必要パッケージをインストールする

sudo apt update
sudo apt install -y python3 python3-pip python3-venv wget

2. PlatformIO Coreのインストーラスクリプトを取得して実行する

cd ~
wget -O get-platformio.py https://raw.githubusercontent.com/platformio/platformio-core-installer/master/get-platformio.py
python3 get-platformio.py

3. インストール確認を行う

~/.platformio/penv/bin/platformio --version

4. `pio` コマンドを使いやすくするため、PATHを通す

echo 'export PATH=$PATH:$HOME/.platformio/penv/bin' >> ~/.bashrc
source ~/.bashrc

5. 動作確認をする

pio --version

コードのダウンロード

1. ターミナルでリポジトリをクローンする

git clone https://github.com/saitogo555/esp32-wifi-manager.git
cd esp32-wifi-manager

2. 必要に応じて作業ディレクトリを確認する

pwd
ls

PlatformIOは platformio.ini をもとに、必要な依存ライブラリ（ArduinoJson v6系）を自動取得します。

platformio.ini の中身を確認する

[platformio]
src_dir = .

[env:esp32dev]
platform = espressif32
board    = esp32dev
framework = arduino
monitor_speed = 115200
extra_scripts = pre:tools/embed_html.py
lib_deps =
    bblanchon/ArduinoJson @ ^6.21.4

board = esp32dev：ESP32-WROOM-32D を含む汎用ESP32開発ボード設定
lib_deps：ArduinoJson v6系を自動取得するよう指定済み
extra_scripts：HTMLファイルをヘッダーに変換するスクリプトをビルド前に実行

ビルド・書き込み・モニター

ESP32をPCにUSB接続したあと、PlatformIO CLIでビルド・書き込み・シリアルモニターを実行できます。

ビルドする

pio run

シリアルポートを確認する

ls /dev/ttyUSB* /dev/ttyACM* 2>/dev/null

たとえば /dev/ttyUSB0 が表示された場合は、そのポートを使って書き込みとモニターを行います。

書き込み

pio run -e esp32dev -t upload --upload-port /dev/ttyUSB0

シリアルモニター

pio device monitor -b 115200 -p /dev/ttyUSB0

# ① ビルドのみ
./scripts/build.sh

# ② 書き込み
./scripts/write.sh

# ③ シリアルモニター
./scripts/monitor.sh

WiFiを設定する手順

ブラウザで表示される設定ページ

1. `./scripts/write.sh` で書き込み完了後、シリアルモニターを起動する

./scripts/monitor.sh

2. 以下のようなログが表示されたら正常に起動している

--- WiFi Manager Starting ---
[AP] AP Mode started
[AP] SSID: esp32-test-A1B2, IP: 192.168.4.1
[HTTP] Server started

スマホまたはPCで esp32-test-XXYY（XXYYはMACアドレスの末尾4桁）に接続する
- パスワード: 12345678
ブラウザで http://192.168.4.1 を開く
接続したいWiFiのSSIDを選択し、パスワードを入力して「接続テスト & 保存」を押す
「接続成功!」と表示されれば設定完了！

WiFi接続成功時と失敗時の画面

次回起動時からは、保存したWiFiに自動的に接続されます。設定をやり直したい場合は、以下のPlatformIOのコマンドで全フラッシュを消去できます。

pio run --target erase

カスタマイズポイント

main.ino 冒頭の定数を変更するだけで動作を調整できます。

#define AP_SSID_PREFIX    "esp32-test-"  // APのSSIDプレフィックス（自由に変更可）
#define AP_PASSWORD       "12345678"     // APのパスワード（8文字以上必須）
#define WIFI_RETRY_MAX    20             // 起動時の接続リトライ回数
#define WIFI_RETRY_DELAY  500            // リトライ間隔（ミリ秒）

AP_PASSWORD は8文字以上でないとソフトAPが正常に起動しません。短くしすぎないよう注意してください。

よくある質問

http://192.168.4.1にアクセスしても画面が開かない

保存済みのWiFi設定をリセットしたい

PlatformIOのターミナルで pio run --target erase を実行すると、NVSを含む全フラッシュが消去されます。

WSL2（Windows Subsystem for Linux）から書き込めますか？

USBデバイスをWSL2に転送する usbipd コマンドを使うことで対応できます。

winget install --interactive --exact dorssel.usbipd-win

# Windows PowerShell（管理者）で実行
usbipd list
usbipd bind --force --busid <BUSID>
usbipd attach --wsl --busid <BUSID>

接続後、WSL2上では /dev/ttyUSB0 としてデバイスが認識されます。

APのパスワードをなくしてオープンにできる？

ESP32-WROOM-32D以外のボードでも動く？

まとめ

WiFi Managerを使えば、コードを一切触らずにブラウザだけでESP32のWiFi設定を変更できるようになります。

WiFiのパスワードが変わっても再書き込み不要
複数台あっても台ごとにSSIDが変わるため管理しやすい
NVSへの保存で電源を切っても設定が保持される
PlatformIOでライブラリ管理もコード管理もまとめてできる

ESP32-WROOM-32Dはコスパが良く入手性も高いため、IoTプロジェクトの入門に最適な一枚です。ぜひこのWiFi Managerと組み合わせて試してみてください。

あなたはこんな悩みを抱えていませんか？

WiFi Managerとはどんな仕組みか？

動作フロー

使用するライブラリと役割

コードの仕組みを読み解く

APモードの起動

HTTPサーバーのエンドポイント一覧

WiFiスキャン（GET: /scan）

WiFi接続とNVSへの保存（POST: /connect）

セットアップ手順

必要なもの

PlatformIO CLIのインストール

1. Pythonと必要パッケージをインストールする

2. PlatformIO Coreのインストーラスクリプトを取得して実行する

3. インストール確認を行う

4. pio コマンドを使いやすくするため、PATHを通す

5. 動作確認をする

コードのダウンロード

1. ターミナルでリポジトリをクローンする

2. 必要に応じて作業ディレクトリを確認する

ビルド・書き込み・モニター

ビルドする

シリアルポートを確認する

書き込み

シリアルモニター

WiFiを設定する手順

1. ./scripts/write.sh で書き込み完了後、シリアルモニターを起動する

2. 以下のようなログが表示されたら正常に起動している

カスタマイズポイント

よくある質問

まとめ

あなたはこんな悩みを抱えていませんか？

WiFi Managerとはどんな仕組みか？

動作フロー

使用するライブラリと役割

コードの仕組みを読み解く

APモードの起動

HTTPサーバーのエンドポイント一覧

WiFiスキャン（GET: /scan）

WiFi接続とNVSへの保存（POST: /connect）

セットアップ手順

必要なもの

PlatformIO CLIのインストール

1. Pythonと必要パッケージをインストールする

2. PlatformIO Coreのインストーラスクリプトを取得して実行する

3. インストール確認を行う

4. pio コマンドを使いやすくするため、PATHを通す

5. 動作確認をする

コードのダウンロード

1. ターミナルでリポジトリをクローンする

2. 必要に応じて作業ディレクトリを確認する

ビルド・書き込み・モニター

ビルドする

シリアルポートを確認する

書き込み

シリアルモニター

WiFiを設定する手順

1. ./scripts/write.sh で書き込み完了後、シリアルモニターを起動する

2. 以下のようなログが表示されたら正常に起動している

カスタマイズポイント

よくある質問

まとめ

4. `pio` コマンドを使いやすくするため、PATHを通す

1. `./scripts/write.sh` で書き込み完了後、シリアルモニターを起動する

4. `pio` コマンドを使いやすくするため、PATHを通す

1. `./scripts/write.sh` で書き込み完了後、シリアルモニターを起動する