「初心者ガイド: ESP32とDHT11を使って携帯ブラウザで温湿度モニタリング」

この記事では、ESP32とDHT11センサーを使って、携帯のブラウザを通じて温湿度をモニタリングする方法について解説します。IoT（モノのインターネット）プロジェクトに初めて取り組む方や、家庭で簡単に環境モニタリングを始めたい方に最適です。
ChatGPTを使用してプログラム作成の様子も載せていますので、興味がありましたら見てください。

アイコン名を入力

・ESP32やDHT11がわからないけど、このプロジェクトを始めることができるのかな？
・プログラミングが初心者でも、センサーデータをWebページに表示できるの？
・難しい設定は必要ないの？簡単に始められるのかな？

この記事では、こんな疑問に答えます。
ESP32マイクロコントローラとDHT11温湿度センサを使って、実際にデータを測定し、それをWebページに表示する方法を分かりやすく説明します。プログラミング初心者でも理解しやすいように、コードの各部分を詳しく解説します。

この記事の対象者

・IoTに興味がある初心者
・家の温湿度を遠隔でモニタリングしたい方
・プログラミングや電子工作に少し慣れている方

Contents

Chat GPTによるプログラムの様子
はじめに – ESP32とDHT11の基本
必要な材料とセットアップ
コード解説 – セットアップとWiFi接続
コード解説 – データの取得とWebページへの表示
プロジェクトの展開と今後の可能性

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

Chat GPTによるプログラムの様子

CHat GPTによるプログラムの様子をYouTubeに載せているので是非ご覧ください。

はじめに – ESP32とDHT11の基本

ESP32は、Wi-FiとBluetooth機能を備えた強力なマイクロコントローラです。DHT11は、環境の温度と湿度を測定する廉価で手軽なセンサーです。この組み合わせにより、低コストで環境データを収集し、インターネット上で共有することができます。

必要な材料とセットアップ

今回必要な材料を紹介します。

必要な材料

ESP32 マイクロコントローラボード: このボードはWi-FiとBluetooth機能を搭載しており、さまざまなセンサーやデバイスを制御できます。
DHT11 温湿度センサー: 環境の温度と湿度を測定するのに使用します。
ジャンパーワイヤー: ESP32とDHT11を接続するために必要です。
ブレッドボード (オプショナル): 配線を容易にするために使用します。
USBケーブル: ESP32をコンピュータに接続し、プログラムをアップロードするために使用します。

下記から購入することができます。

リンク

次にセットアップ手順を紹介します。

セットアップ手順:

Arduino IDEのインストールと設定:
- Arduino IDEをダウンロードし、インストールします。
- ESP32ボードのサポートを追加するために、ボードマネージャにESP32のURLを追加し、ESP32ボードパッケージをインストールします。
ESP32へのDHT11の接続:
- DHT11センサーのVCCピンをESP32の3.3Vピンに接続します。
- DHT11のデータピンをESP32の任意のデジタルピン（このプロジェクトでは5番ピン）に接続します。
- DHT11のGNDピンをESP32のGNDピンに接続します。
プログラムのアップロード:
- Arduino IDEで提供されたプログラムを開きます。
- 正しいESP32ボードとポートを選択します。
- 「アップロード」ボタンをクリックして、プログラムをESP32に転送します。
WiFi情報の設定:
- プログラム内のssidとpassword変数に、あなたのWiFiネットワークの情報を設定します。

これらについては通常の流れと同じです。
これらの手順を完了すると、ESP32はDHT11センサーから温度と湿度のデータを読み取り、それをWebページに表示する準備が整います。

コード解説 – セットアップとWiFi接続

この章では、提供されたプログラムのsetup()関数の各部分について詳しく説明し、WiFiへの接続プロセスを理解しやすくします。

setup()関数の概要:

setup()関数は、ESP32が起動するときに一度だけ実行される部分です。この関数は、センサーの初期化、WiFi接続、ファイルシステムのマウント、Webサーバーの設定を行います。

シリアル通信の開始

Serial.begin(115200);

このコマンドは、115200ボーの速度でシリアル通信を開始します。これにより、ESP32とコンピュータ間でデータのやり取りが可能になり、デバッグメッセージをシリアルモニタで確認できます。

DHTセンサーの初期化

dht.begin();

DHTセンサーライブラリのbegin()メソッドを呼び出して、センサーを動作可能な状態にします。

WiFiへの接続

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");

ここでは、設定されたSSIDとパスワードを使ってWiFiネットワークへの接続を試みます。接続が確立されるまで、1秒ごとにステータスをチェックし、シリアルモニタに進行状況を表示します。SSID, Passwordに自分のwifiのPass, SSIDを入力してください。

SPIFFSファイルシステムのマウント

if (!SPIFFS.begin(true)) {
  Serial.println("An error occurred while mounting SPIFFS");
  return;
}

SPIFFS（Serial Peripheral Interface Flash File System）は、ESP32の内蔵フラッシュメモリ上でファイルシステムを提供します。このコードはSPIFFSの初期化を行い、失敗した場合はエラーメッセージを表示します。

Webサーバーの設定:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){...});
server.serveStatic("/", SPIFFS, "/");
server.begin();

この部分では、ESP32上で動作するWebサーバーを設定します。最初のserver.on()はルートURL（/）にアクセスがあったときの処理を定義し、serveStatic()はSPIFFS上の静的ファイルを提供するための設定を行います。最後にserver.begin()でWebサーバーを起動します。

コード解説 – データの取得とWebページへの表示

この章では、ESP32とDHT11センサーからのデータを読み取り、それをWebページに表示するプロセスについて詳しく説明します。この部分は、プログラムのserver.on()関数内で行われます。

Webサーバーのリクエストハンドラーの設定:

server.on()関数は、Webサーバーに特定のURLパス（この場合はルートパス"/"）へのアクセスがあった際の動作を定義します。以下のコードブロックは、ルートURLへのGETリクエストを処理する方法を記述しています。

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  float humidity = dht.readHumidity();
  float temperature = dht.readTemperature();

  if (isnan(humidity) || isnan(temperature)) {
    request->send(200, "text/html", "Failed to read from DHT sensor!");
  } else {
    String html = "<html><body>";
    html += "<h1>ESP32 DHT11 Sensor Data</h1>";
    html += "<p>Humidity: " + String(humidity) + "%</p>";
    html += "<p>Temperature: " + String(temperature) + "°C</p>";
    html += "</body></html>";

    request->send(200, "text/html", html);
  }
});

コードの解析と説明:

センサーデータの読み取り:
- dht.readHumidity()とdht.readTemperature()は、それぞれDHT11センサーから湿度と温度のデータを読み取ります。
データの検証:
- isnan()関数を使って、読み取ったデータが無効（NaN、つまり”Not a Number”）でないことを確認します。データが無効な場合は、エラーメッセージをWebページに表示します。
HTMLコンテンツの生成:
- 有効なデータが得られた場合、HTML形式の文字列を作成して、センサーからのデータを含むWebページを構築します。
Webページの送信:
- request->send()関数を使って、生成したHTMLコンテンツをクライアント（Webブラウザ）に送信します。ステータスコード200は、リクエストが成功したことを意味します。

コード全文がこちらになります。

#include <DHT.h>
#include <WiFi.h>
#include <ESPAsyncWebSrv.h>

#define DHTPIN 5 // DHT11センサーのデータピンをESP32の5番ピンに接続する定義です。
#define DHTTYPE DHT11 // 使用するDHTセンサーの型番を定義します。
DHT dht(DHTPIN, DHTTYPE); // DHTオブジェクトを作成し、ピン番号とセンサー型番を指定します。

const char* ssid = "Your SSID"; // WiFiネットワークのSSIDを定義します。
const char* password = "Your Password"; // WiFiネットワークのパスワードを定義します。

AsyncWebServer server(80); // ポート80でWebサーバーを起動するためのオブジェクトを作成します。

void setup() {
  Serial.begin(115200); // シリアル通信を115200ボーで開始します。
  dht.begin(); // DHTセンサーを初期化します。

  // WiFi接続処理
  WiFi.begin(ssid, password); // WiFiネットワークに接続を開始します。
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000); // 接続が完了するまで1秒ごとに待機します。
    Serial.println("Connecting to WiFi..."); // シリアルモニターに接続状況を表示します。
  }
  Serial.println("Connected to WiFi"); // 接続完了をシリアルモニターに表示します。

  // SPIFFSファイルシステムのマウント処理
  if (!SPIFFS.begin(true)) {
    Serial.println("An error occurred while mounting SPIFFS"); // エラー発生時のメッセージを表示します。
    return; // エラーが発生した場合、これ以降の処理を行わないようにします。
  }

  // ルートページの設定
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    float humidity = dht.readHumidity(); // 湿度を読み取ります。
    float temperature = dht.readTemperature(); // 温度を読み取ります。

    // センサーからのデータが無効でないかチェックします。
    if (isnan(humidity) || isnan(temperature)) {
      request->send(200, "text/html", "Failed to read from DHT sensor!"); // データ読み取り失敗時のメッセージを表示します。
    } else {
      String html = "<html><body>";
      html += "<h1>ESP32 DHT11 Sensor Data</h1>"; // タイトルを追加します。
      html += "<p>Humidity: " + String(humidity) + "%</p>"; // 湿度データを表示します。
      html += "<p>Temperature: " + String(temperature) + "°C</p>"; // 温度データを表示します。
      html += "</body></html>";
      
      request->send(200, "text/html", html); // 作成したHTMLをクライアントに送信します。
    }
  });

  // 静的ファイル（例えばindex.htmlなど）の提供設定
  server.serveStatic("/", SPIFFS, "/");

  server.begin(); // Webサーバーを開始します。
}

void loop() {
  // ループ内では特に処理は行いませんが、必要に応じて追加の処理をここに記述できます。
}

プロジェクトの展開と今後の可能性

この章では、ESP32とDHT11を使用した基本的な温湿度センサープロジェクトをさらに発展させ、今後の可能性について探ります。ここでは、いくつかのアイデアと改善点を提案し、読者が自分のプロジェクトをカスタマイズし、拡張するためのインスピレーションを提供します。

リアルタイムデータの更新:
- 現在のプロジェクトでは、Webページを更新するたびに最新のセンサーデータが表示されます。JavaScriptとAJAXを使用して、Webページを自動的に更新し、リアルタイムでデータを表示することができます。
データのグラフ表示:
- 温度と湿度のデータをグラフとして視覚的に表示することで、データの変化をよりわかりやすく追跡できます。オープンソースのJavaScriptチャートライブラリを利用して、動的なグラフをWebページに組み込むことが可能です。
追加センサーの統合:
- 環境モニタリングをさらに充実させるために、空気質センサーや光センサーなど、他のタイプのセンサーを追加することができます。これにより、温湿度だけでなく、より広範な環境データを収集し、分析することが可能になります。
データの記録と分析:
- センサーデータをデータベースに保存し、長期的な環境変化を追跡することも一つの方法です。これにより、データを基にした詳細な分析や、環境変化の傾向の把握が可能になります。
IoTとの統合:
- ESP32はIoTデバイスとしても活用できます。IFTTTやMQTTプロトコルを使用して、センサーデータに基づいて他のスマートデバイスを制御することができます。例えば、特定の温度や湿度が検出されたときに自動的にエアコンを調整するなどです。
モバイルアプリケーションとの連携:
- 専用のモバイルアプリを開発し、スマートフォンやタブレットからセンサーデータを監視し管理することも可能です。これにより、外出先からでも自宅やオフィスの環境をチェックできます。

このブログを通じて、ESP32とDHT11を使った温湿度センサープロジェクトの基礎から応用までを一緒に学びました。初心者から中級者まで幅広い読者に向けて、技術的な側面を分かりやすく解説し、実際に手を動かしながら学ぶ楽しさを伝えられたことを願っています。

このプロジェクトは、プログラミングや電子工作の世界への第一歩として最適です。ここで学んだ基本的な概念や技術は、他の多くのプロジェクトやアイデアへと応用することができます。また、創造的な問題解決や、新しい技術の学習に対する自信を育む良い機会となったはずです。

技術は日々進化しており、常に新しいことを学ぶ機会があります。このプロジェクトが皆さんの学習の旅の一部となり、これからも新しい知識と技術を探求するきっかけになれば幸いです。最後に、どんな小さなプロジェクトでも、それが未来の大きな発見につながる可能性があることを忘れないでください。皆さんの創造力と熱意が、これからの技術の進展を形作る大きな力となることでしょう。