【プログラム】ESP32を使ってスマホでLED制御（ESP32編）

ESP32のWifiを使ってスマートフォンからLEDをオンオフするプログラムを作成します。

このプログラムでは、ESP32をWi-Fiアクセスポイントに接続し、Webサーバーを構築します。 スマートフォンからは、このWebサーバーにアクセスし、簡単なWebページを通じてLEDのオンオフを切り替えることができます。

必要なもの
回路図
Arduino IDEでの準備
ESP32のプログラミングコード
プログラムの説明
プログラムの実行手順
スマホから遠隔操作
トラブルシューティング

必要なもの

ESP32開発ボード
LED
抵抗器 (220Ω〜1kΩ程度)
ジャンパーワイヤー
ブレッドボード (任意)
USBケーブル (ESP32のプログラミング用)
Arduino IDE (ESP32ボードのサポートがインストールされていること)

回路図

ESP32ピン	接続先
GPIO (任意のデジタルピン、例: GPIO 2)	抵抗器の一端
抵抗器のもう一端	LEDの長い足 (アノード)
LEDの短い足 (カソード)	ESP32のGNDピン

Arduino IDEでの準備

ESP32ボードのインストール:
- Arduino IDEを開き、「ファイル」>「環境設定」を選択します。
- 「追加のボードマネージャーのURL」に以下のURLを追加します。 https://purl.espressif.com/arduino/esp32/package_esp32_index.json
- 「ツール」>「ボード」>「ボードマネージャー」を選択します。
- 検索バーに「esp32」と入力し、「esp32 by Espressif Systems」をインストールします。
ボードとポートの選択:
- 「ツール」>「ボード」で、使用しているESP32ボードを選択します（例:「ESP32 Dev Module」）。
- 「ツール」>「ポート」で、ESP32が接続されているCOMポートを選択します。

ESP32のプログラミングコード

下記ソースコード右上のアイコンボタンをクリックするとクリップボードにコピーされます。
ArduinoIDEの新規ファイルに張り付けてご利用ください。

#include <WiFi.h>
#include <WebServer.h>

// Wi-Fiアクセスポイントの設定
const char *ssid = "自宅Wifi親機のSSID"; // アクセスポイントの名前
const char *password = "自宅Wifi親機のパスワード";   // アクセスポイントのパスワード (最低8文字)

// Webサーバーのポート設定
WebServer server(80);

// LEDのピン番号
const int ledPin = 2;

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // 最初はLEDをオフにする

  // Wi-Fiアクセスポイントの起動
  Serial.print("Access Pointを起動中: ");
  Serial.println(ssid);
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP Address: ");
  Serial.println(IP);

  // Webサーバーのルートパスのハンドラ
  server.on("/", handleRoot);
  // "on"ボタンが押されたときのハンドラ
  server.on("/on", handleOn);
  // "off"ボタンが押されたときのハンドラ
  server.on("/off", handleOff);

  // サーバーの開始
  server.begin();
  Serial.println("HTTP Server started");
}

void loop() {
  server.handleClient(); // クライアントからのリクエストを処理
}

// ルートパス "/" のハンドラ
void handleRoot() {
  String html = "<!DOCTYPE html>";
  html += "<html lang='ja'>";
  html += "<head>";
  html += "<meta charset='UTF-8'>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>";
  html += "<title>LED操作パネル</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; background-color: #f0f0f0; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }";
  html += "h1 { color: #333; margin-bottom: 40px; font-size: 2.5em; }";
  html += ".button-container { display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 300px; }";
  html += "button { background-color: #4CAF50; color: white; padding: 20px; font-size: 2.2em; border: none; border-radius: 15px; cursor: pointer; width: 100%; box-shadow: 0 8px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; }";
  html += "button:hover { background-color: #45a049; transform: translateY(-3px); box-shadow: 0 12px 20px rgba(0,0,0,0.3); }";
  html += "button:active { transform: translateY(1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }";
  html += ".off-button { background-color: #f44336; }";
  html += ".off-button:hover { background-color: #da190b; }";
  html += "@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) { /* iPhone 13 (and similar) media queries */";
  html += "body { padding: 40px; }";
  html += "h1 { font-size: 3em; margin-bottom: 60px; }";
  html += ".button-container { max-width: 400px; gap: 40px; }";
  html += "button { padding: 30px; font-size: 2.8em; border-radius: 20px; }";
  html += "}";
  html += "</style>";
  html += "</head>";
  html += "<body>";
  html += "<h1>LED操作パネル</h1>";
  html += "<div class='button-container'>";
  html += "<button onclick=\"location.href='/on'\">On</button>";
  html += "<button class='off-button' onclick=\"location.href='/off'\">Off</button>";
  html += "</div>";
  html += "</body>";
  html += "</html>";
  server.send(200, "text/html", html);
}

// "/on" パスがリクエストされたときのハンドラ
void handleOn() {
  digitalWrite(ledPin, HIGH); // LEDをオン
  Serial.println("LED ON");
  server.sendHeader("Location", "/"); // ルートページにリダイレクト
  server.send(302, "text/plain", ""); // リダイレクトステータスコード
}

// "/off" パスがリクエストされたときのハンドラ
void handleOff() {
  digitalWrite(ledPin, LOW); // LEDをオフ
  Serial.println("LED OFF");
  server.sendHeader("Location", "/"); // ルートページにリダイレクト
  server.send(302, "text/plain", ""); // リダイレクトステータスコード
}

プログラムの説明

ライブラリのインクルード:
- WiFi.h: Wi-Fi接続を扱うためのライブラリです。
- WebServer.h: ESP32でWebサーバーを構築するためのライブラリです。
Wi-Fi設定:
- ssidとpassword変数に、あなたのWi-FiルーターのSSIDとパスワードを正確に入力してください。
Webサーバーの初期化:
- WebServer server(80);で、ポート80（HTTPの標準ポート）でWebサーバーを初期化します。
LEDピンの設定:
- const int ledPin = 2;で、LEDを接続するESP32のGPIOピン番号を設定します。この例ではGPIO 2を使用しています。
handleRoot()関数:
- WebサーバーのルートURL (/) にアクセスがあったときに実行されます。
- LEDの現在の状態を表示し、「LEDをオンにする」と「LEDをオフにする」ボタンがあるシンプルなHTMLページを生成してクライアントに送信します。
handleOn()関数とhandleOff()関数:
- /onにPOSTリクエストがあったときにhandleOn()が実行され、LEDをオンにします。
- /offにPOSTリクエストがあったときにhandleOff()が実行され、LEDをオフにします。
- どちらの関数も処理後にルートページにリダイレクトすることで、状態の変化を確認できるようにしています。
setup()関数:
- シリアル通信を開始します。
- ledPinをOUTPUTモードに設定し、初期状態をオフにします。
- WiFi.begin(ssid, password)でWi-Fiに接続します。接続が完了するまで待機し、接続成功後にESP32のIPアドレスをシリアルモニターに表示します。
- server.on()で、特定のURLとHTTPメソッドに対するハンドラー関数を登録します。
- server.begin()でWebサーバーを開始します。
loop()関数:
- server.handleClient()を繰り返し呼び出すことで、クライアントからのリクエストを処理します。

プログラムの実行手順

上記コードのssidとpasswordをあなたのWi-Fi情報に書き換えます。
Arduino IDEでこのコードをコンパイルし、ESP32にアップロードします。
アップロードが完了したら、Arduino IDEの右上の虫メガネアイコンからシリアルモニターを開きます。（通信速度115200に設定）
ESP32がWi-Fiに接続すると、シリアルモニターに「IP Address: 192.168.1.127」のようなIPアドレスが表示されます。（表示されるアドレスはWifi環境によって異なります）

スマホから遠隔操作

スマートフォンのWebブラウザを開き、この表示されたIPアドレスを入力してアクセスします。
LEDのオンオフを切り替えるボタンが表示されるので、それをタップしてLEDを操作してください。

トラブルシューティング

「WiFi connected」と表示されない: SSIDやパスワードの大文字小文字などが間違っていないか確認してください。また、Wi-FiルーターとESP32の距離を縮めてみてください。
IPアドレスにアクセスできない: スマートフォンとESP32が同じWi-Fiネットワークに接続されているか確認してください。ルーターのファイアウォール設定なども影響する場合があります。
LEDが点灯しない: 配線が正しいか、抵抗器の接続、LEDの向き（アノードとカソード）を確認してください。GPIOピン番号がプログラムと一致しているかも重要です。
「192.168.0」または「192.168.1」以外が表示される場合：一般家庭のWifi環境ではIP Adressの左3ブロックは「192.168.0」または「192.168.1」で固定されるはずです。
それ以外のアドレスが表示される場合は上手く接続ができません。
その際は、以下の方法でWifi環境を調べ、IP Adressに応じ以下のコードのどちらかをLEDのピン番号の下に追加してください。

①Windowsの検索ボックスに「cmd」と入力しEnter
②表示されたコマンドプロンプトに「ipconfig」と入力しEnter
③デフォルトゲートウェイの値を確認

// デフォルトゲートウェイが「192.168.1.0」の場合
IPAddress local_IP(192, 168, 0, 127);
IPAddress gateway(192, 168, 0, 127);
IPAddress subnet(255, 255, 255, 0);

// デフォルトゲートウェイが「192.168.1.1」の場合
IPAddress local_IP(192, 168, 1, 127);
IPAddress gateway(192, 168, 1, 127);
IPAddress subnet(255, 255, 255, 0);

これで、スマートフォンからESP32に接続されたLEDをオンオフできるようになるはずです。もし何か不明な点があれば、お気軽にご質問ください！