PUBLIC
PRACTICEWI-FI11 MIN READ

ESP32 で Wi-Fi につなぐブラウザで値を見る、Raspberry Pi 5 に送る

ESP32 の最大の特徴は Wi-Fi が入っていること。家の Wi-Fi につなぎ、センサーの値を Raspberry Pi 5 や PC に送れば、離れた場所の温度や明るさをブラウザで見られます。ここでは「つなぐ」「ブラウザに表示する」「Pi 5 に送る」の 3 段階で進めます。

  • ESP32-S3
  • Raspberry Pi 5 8GB
  • M5Stack CoreS3
CONTENTSこの記事の目次

01 — CONNECT

Wi-Fi につなぐ

CPPwifi_connect.ino
#include <WiFi.h>

const char* SSID = "your-wifi-name";
const char* PASSWORD = "your-wifi-password";

void setup() {
  Serial.begin(115200);
  WiFi.begin(SSID, PASSWORD);
  Serial.print("connecting");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());       // 例: 192.168.1.42
}

void loop() {}
  • ESP32 は 2.4GHz のみ。5GHz 専用の SSID にはつながらない
  • SSID とパスワードはコードに直書きせず、別ファイル(secrets.h)に分けて git に入れない
  • 表示された IP アドレスをメモする。ブラウザからここにアクセスする

02 — WEB SERVER

ブラウザで値を見る

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

WebServer server(80);

void handleRoot() {
  int light = analogRead(2);                       // CdS(→ ADC でセンサーを読む)
  String html = "<h1>Light: " + String(light) + "</h1>";
  server.send(200, "text/html; charset=utf-8", html);
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("your-wifi-name", "your-wifi-password");
  while (WiFi.status() != WL_CONNECTED) delay(500);
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
}

void loop() {
  server.handleClient();     // リクエストを処理。loop で必ず呼ぶ
}

同じ Wi-Fi につないだスマホや PC のブラウザで http://192.168.1.42/(表示された IP)を開くと、センサーの値が出ます。再読み込みするたびに最新の値になります。

03 — SEND TO PI 5

Raspberry Pi 5 に送る(HTTP POST)

逆に、ESP32 から定期的に Pi 5 へ値を送る形です。Pi 5 側で小さな受け口(Python の Flask)を立てておきます。

PYTHONreceiver.py(Raspberry Pi 5)
# python3 -m venv venv && source venv/bin/activate && pip install flask
from flask import Flask, request

app = Flask(__name__)

@app.post("/data")
def data():
    body = request.get_json()
    print("received:", body)
    return "ok"

app.run(host="0.0.0.0", port=8000)
CPPpost_to_pi.ino(ESP32-S3)
#include <WiFi.h>
#include <HTTPClient.h>

const char* PI5_URL = "http://192.168.1.10:8000/data";   // Pi 5 の IP

void setup() {
  Serial.begin(115200);
  WiFi.begin("your-wifi-name", "your-wifi-password");
  while (WiFi.status() != WL_CONNECTED) delay(500);
}

void loop() {
  int light = analogRead(2);

  HTTPClient http;
  http.begin(PI5_URL);
  http.addHeader("Content-Type", "application/json");
  int code = http.POST("{\"light\":" + String(light) + "}");
  Serial.printf("POST -> %d\n", code);
  http.end();

  delay(10000);    // 10 秒ごと
}

Pi 5 のターミナルに received: {'light': 1234} と出れば成功。Pi 5 の IP は hostname -I で分かります。ここから先は Pi 5 側で保存・グラフ化・通知など、Linux でできることは何でもできます。

04 — CORES3

CoreS3 の場合

コードは同じです(WiFi.h は共通)。M5.Display.println(WiFi.localIP()) のように IP アドレスや送信結果を画面に出すと、PC につながずに状態が分かります。

05 — NEXT

発展

  • mDNS(ESPmDNS.h):http://esp32.local/ のように IP を覚えなくてよくする
  • MQTT(PubSubClient):多数のセンサーを扱うときの定番。Pi 5 に Mosquitto を立てる
  • deep sleep:電池で動かすなら、送信したら数分眠る(esp_deep_sleep_start())
  • 時刻:configTime() で NTP から時刻を取り、データにタイムスタンプを付ける

06 — WATCH OUT

注意点

パスワードをコードに残さない

共有・公開するときに漏れます。secrets.h に分けて .gitignore に入れます。

家の外に公開しない

ESP32 の Web サーバーには認証も暗号化もありません。まずは LAN の中だけで使います。

Wi-Fi は電気を食う

送信時に数百 mA 流れます。電源が弱いと接続が切れます(→ 電源と電池)。Wi-Fi 使用中は ADC2(GPIO11〜20)も読めなくなります。

07 — CHECK YOURSELF

理解チェック

Q1WiFi.status() が WL_CONNECTED にならない。まず疑うことは?

5GHz の SSID を指定している、パスワードの打ち間違い、電源不足。

Q2ブラウザから ESP32 の値が見えるのはどんな範囲?

同じ Wi-Fi(LAN)の中の端末だけ。外から見るには別の仕組みが必要。