室内の温度や湿度を、スマートフォンのブラウザーで確認できる小さな装置。画面上の数字が変わるだけでも、自分で配線し、書いたプログラムが現実の部屋を計測している実感があります。ESP32 Webサーバー 自作 初心者におすすめなのは、まずこの「温湿度モニター」を完成させることです。LEDを点滅させる次の一歩として、Wi-Fiとセンサーを組み合わせてみましょう。
ESP32は、Wi-Fi機能を内蔵したマイコンです。パソコンやクラウド上に大きなサーバーを用意しなくても、ESP32自身が小さなWebサーバーになれます。同じ家庭内ネットワークにつないだスマートフォンからアクセスすれば、センサー値を表示したり、LEDをオン・オフしたりできます。電子工作を「机の上の回路」から「暮らしの中で使う道具」へ進める、扱いやすい題材です。
ESP32 Webサーバーを自作すると何ができる？
Webサーバーとは、ブラウザーからの要求に応じて、HTMLなどのデータを返す役割です。この作例では、スマートフォンでESP32のIPアドレスを開くと、ESP32が温度と湿度を含んだWebページを返します。スマートフォン側に専用アプリを作る必要がない点が大きな利点です。
ただし、最初から外出先でも見られる仕組みにする必要はありません。インターネットへ公開する設定には、認証やセキュリティの知識が必要です。まずは自宅や教室のWi-Fi内だけで動かし、配線、プログラム、ネットワークの関係を確かめてください。ここまででも、植物の栽培箱、ペットのいる部屋、工作スペースの環境記録などに十分応用できます。
用意するもの
今回使うのは、ESP32開発ボード、データ通信対応のUSBケーブル、ブレッドボード、ジャンパーワイヤー、DHT11またはDHT22温湿度センサーです。DHT11は手に入りやすく、表示実験には十分です。より広い測定範囲や精度を求めるならDHT22を選びます。
センサーは単体部品と、端子が整理されたモジュール品があります。初めてなら、VCC、GND、DATAと印字された3ピンまたは4ピンのモジュール品が配線しやすいでしょう。単体のDHTセンサーにはプルアップ抵抗が必要になる場合があるため、説明書や基板の印字をよく確認します。
ESP32のGPIOは基本的に3.3Vで動作します。5V専用の信号をGPIOへ直接入れると故障の原因になります。DHT11やDHT22の多くのモジュールは3.3Vでも使えますが、購入した部品の仕様を確認してから接続してください。
Arduino IDEでESP32を動かす準備
Arduino IDEを起動し、ボードマネージャーからESP32用のボード定義を追加します。追加後は、メニューのボード選択で使用しているESP32開発ボードを選び、USB接続したときに表示されるシリアルポートも選択します。ここでボードやポートを間違えると、プログラムを書き込めません。
次に、ライブラリマネージャーでDHT sensor libraryを追加します。あわせて依存ライブラリの追加を求められた場合は、指示に従ってください。ライブラリは、センサーから数値を読む複雑な通信処理をまとめた部品です。最初は中身をすべて理解しなくても構いません。使いながら、どの関数が何を担当しているかを少しずつ確かめるのが、電子工作を続ける近道です。
書き込み前に、ESP32だけで簡単なLED点滅プログラムを動かしておくと安心です。USBケーブルには充電専用のものもあります。電源は入るのにポートが表示されないときは、別のUSBケーブルへ交換してください。
温湿度センサーを配線する
ここでは、DHTセンサーのDATA端子をESP32のGPIO 4へ接続する例にします。VCCは3.3V、GNDはGNDへつなぎます。モジュールによって端子の並び順は異なるため、「左からVCC、DATA、GND」と決めつけないことが大切です。基板のシルク印刷、販売時の資料、センサーの型番を照合してから電源を入れましょう。
ブレッドボードでは、同じ列の穴が内部で導通している場所があります。見た目だけで配線せず、電源レールと中央の溝の構造を理解して使うと、配線ミスが大幅に減ります。ジャンパーワイヤーを挿したら、軽く引いて抜けないかも確認してください。
温湿度を表示するプログラム
下の例では、Wi-Fiに接続し、ESP32の80番ポートでWebサーバーを起動します。`YOUR_SSID`と`YOUR_PASSWORD`を、自分が接続するWi-Fiの名前とパスワードに書き換えてください。2.4GHz帯のWi-Fiが必要なESP32ボードが多いため、5GHz専用のネットワークを指定していないかも確認します。
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
// Wi-Fiの設定 (ご自身の環境に合わせて書き換えてください)
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
// DHTセンサーの設定
#define DHTPIN 4
#define DHTTYPE DHT11 // DHT22を使う場合はここを DHT22 に変更
DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);
// --- HTMLのテンプレート ---
// R"rawliteral(...)rawliteral" を使うと、長いHTMLを綺麗に書けます
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 温湿度モニター</title>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 50px; }
h1 { color: #333; }
p { font-size: 1.5em; }
.sensor-val { font-weight: bold; color: #0066cc; }
.btn { display: inline-block; padding: 10px 20px; font-size: 1.2em; text-decoration: none; color: white; background-color: #007bff; border-radius: 5px; margin-top: 20px;}
.error { color: red; font-weight: bold; }
</style>
</head>
<body>
<h1>ESP32 温湿度モニター</h1>
%SENSOR_DATA%
<br>
<a href="/" class="btn">更新する</a>
</body>
</html>
)rawliteral";
// ルートURL (/) にアクセスされた時の処理
void handleRoot() {
float humidity = dht.readHumidity();
float temperature = dht.readTemperature();
String sensorDataHtml = "";
// センサーの読み取りに失敗した場合
if (isnan(humidity) || isnan(temperature)) {
sensorDataHtml = "<p class='error'>センサーを読み取れません。配線を確認してください。</p>";
Serial.println("DHTセンサーの読み取りエラー！");
} else {
// 成功した場合
sensorDataHtml += "<p>温度: <span class='sensor-val'>" + String(temperature, 1) + "</span> ℃</p>";
sensorDataHtml += "<p>湿度: <span class='sensor-val'>" + String(humidity, 1) + "</span> %</p>";
// シリアルモニターにも出力（確認用）
Serial.print("Temp: "); Serial.print(temperature); Serial.print("C, ");
Serial.print("Humidity: "); Serial.print(humidity); Serial.println("%");
}
// HTMLテンプレートの %SENSOR_DATA% の部分を実際の値に置き換える
String finalHtml = String(index_html);
finalHtml.replace("%SENSOR_DATA%", sensorDataHtml);
// ブラウザへHTMLを送信
server.send(200, "text/html; charset=utf-8", finalHtml);
}
void setup() {
Serial.begin(115200);
dht.begin();
// Wi-Fi接続開始
Serial.println();
Serial.print("Wi-Fiに接続中: ");
Serial.println(ssid);
WiFi.begin(ssid, password);
// 接続完了するまで待つ
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// 接続成功時の表示
Serial.println("");
Serial.println("Wi-Fi 接続完了！");
Serial.print("IPアドレス: ");
Serial.println(WiFi.localIP()); // このIPアドレスをブラウザに入力します
// URLへのアクセスを関数に割り当てる
server.on("/", handleRoot);
// サーバー起動
server.begin();
Serial.println("HTTPサーバーを起動しました。");
}
void loop() {
// クライアントからのリクエストを処理
server.handleClient();
}プログラムを書き込んだら、シリアルモニターを115200bpsに設定して開きます。Wi-Fi接続後に表示される `192.168.x.x` のような数字がESP32のIPアドレスです。その数字を、同じWi-Fiへ接続したスマートフォンやパソコンのブラウザーに入力します。温度と湿度のページが表示されたら成功です。数値はページを更新するたびに読み直されます。
表示されないときの確認ポイント
シリアルモニターにIPアドレスが出ない場合は、SSIDやパスワードの入力間違い、2.4GHzと5GHzの違い、Wi-Fiルーターの電波状況を確認します。パスワードをプログラムへ書くときは、全角の記号や余分な空白が混ざらないように注意してください。
IPアドレスは出ているのにブラウザーで開けない場合は、スマートフォンが別のゲスト用Wi-Fiやモバイル通信へつながっていないかを見ます。同じネットワーク名でも、端末どうしの通信を遮断する設定になっている環境ではアクセスできないことがあります。学校や施設のネットワークでは管理者のルールも確認しましょう。
「センサーを読み取れません」と表示される場合は、VCC、GND、DATAの順番を最優先で確認します。DATAの接続先をGPIO 4以外へ変えたなら、`DHTPIN`の数字も同じ番号に変更します。また、DHTセンサーは連続して速く読みすぎると値が不安定になります。この作例のように、ブラウザー更新時だけ読む方式は初心者にも扱いやすい方法です。
ケースに入れて作品へ育てよう
回路が動いたら、次は「使える形」を考える楽しい段階です。ブレッドボードのままでは配線が抜けやすいため、厚紙や木材の台に固定するだけでも実用性が上がります。レーザーカッターで前面パネルを切り、温湿度センサー用の穴とUSBケーブル用の切り欠きを設ければ、部屋に置きやすい作品になります。
3Dプリンターを使えるなら、通気用のスリットを入れたケースも作れます。ただし、ESP32本体の発熱や直射日光の影響で、ケース内部の温度が実際の室温より高くなることがあります。センサーを基板から少し離す、通気口を増やす、窓際を避けるといった工夫を試してください。数値を表示するだけで終わらせず、測定条件を変えて比較することも立派な実験です。
次はWebページにLED操作ボタンを加えたり、一定温度を超えたらブザーを鳴らしたりしてみましょう。自分の部屋、植物、工作机で「測りたいこと」を一つ選ぶと、ESP32はただの基板ではなく、自分で育てられる道具になります。小さな改善を一つずつ形にして、電子工作を楽しもう！
