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

Osoyoo社のNodeMCU ESP2866系 NodeMCU（ESP-12F搭載）
2025.07.11 
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// --- Wi-Fi設定 ---
// ご自身の環境に合わせて書き換えてください
const char *ssid = "ここにSSIDを入力";    // 接続するWi-FiのSSID (ネットワーク名)
const char *password = "ここにパスワードを入力";  // Wi-Fiのパスワード

// Webサーバーをポート80で作成
ESP8266WebServer server(80);

// LEDのピン番号をGPIO04に指定 (NodeMCUのD2ピンに相当)
const int ledPin = 4; 

// HTMLとCSSを文字列として定義
// スマホ画面で見やすいように、ボタンを大きくスタイリングしています
String getHtmlPage() {
  String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NodeMCU LED Control</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #2c3e50;
      font-family: sans-serif;
    }
    h1 {
      color: #ecf0f1;
      margin-bottom: 40px;
    }
    .button-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 80%;
    }
    a {
      text-decoration: none;
      width: 100%;
      margin: 15px 0;
    }
    button {
      width: 100%;
      padding: 30px 0;
      border: none;
      border-radius: 10px;
      font-size: 2em; /* 文字を大きく */
      font-weight: bold;
      color: white;
      cursor: pointer;
      transition: transform 0.2s;
    }
    button:active {
      transform: scale(0.95);
    }
    .on-button {
      background-color: #2ecc71; /* 緑色 */
    }
    .off-button {
      background-color: #e74c3c; /* 赤色 */
    }
  </style>
</head>
<body>
  <h1>💡 LEDコントロールパネル 💡</h1>
  <div class="button-container">
    <a href="/on"><button class="on-button">ON</button></a>
    <a href="/off"><button class="off-button">OFF</button></a>
  </div>
</body>
</html>
)rawliteral";
  return html;
}

// ルートURL ("/") にアクセスがあった場合の処理
void handleRoot() {
  server.send(200, "text/html", getHtmlPage()); // HTMLページをスマホに送信
}

// "/on" にアクセスがあった場合の処理
void handleOn() {
  digitalWrite(ledPin, HIGH); // LEDを点灯 (外部LEDはHIGHで点灯)
  server.sendHeader("Location", "/");
  server.send(302, "text/plain", ""); 
}

// "/off" にアクセスがあった場合の処理
void handleOff() {
  digitalWrite(ledPin, LOW); // LEDを消灯
  server.sendHeader("Location", "/");
  server.send(302, "text/plain", "");
}

// 存在しないURLにアクセスがあった場合の処理
void handleNotFound(){
  server.send(404, "text/plain", "404: Not found");
}

// 初期設定 (一度だけ実行)
void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // 最初はLEDを消しておく

  // Wi-Fi接続処理
  Serial.println("");
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  // 接続が完了するまで待機
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  // 接続情報をシリアルモニタに表示
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP()); // IPアドレスを表示

  // 各URLに対する処理関数を登録
  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.onNotFound(handleNotFound);

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

// メインループ (繰り返し実行)
void loop() {
  // クライアントからのリクエストを待機
  server.handleClient();
}

コメント