ESP32・電子工作入門

【PC不要で確認可能！】ESP32とOLEDディスプレイで温湿度をリアルタイム表示！可視化ガジェットを作ろう

【PC不要で確認可能！】ESP32とOLEDディスプレイで温湿度をリアルタイム表示！可視化ガジェットを作ろう

前回の記事では、別売の温湿度センサー「DHT11」をESP32に接続し、部屋の温度と湿度をPC画面上のシリアルモニタに表示させることに成功しました。

センサーから送られてくる生データが画面にパラパラと流れてきた瞬間は、まさにスマート農園（スマ農）構築への第一歩を実感できたのではないでしょうか。

しかし、シリアルモニタでデータを見るためには、常にESP32をPCとUSBケーブルで接続しておく必要があります。

実際の農園や温室、あるいは部屋の観葉植物コーナーに設置して使うことを考えると、「PCなしで、その場でパッと温度や湿度を確認したい！」と思いますよね。

そこで今回は、手のひらサイズの超コンパクトな「0.96インチ OLEDディスプレイ」を導入します！

PCとの通信から独立させ、電源を入れるだけで手元の小さな液晶画面にリアルタイムの温湿度がパッと浮かび上がる、本格的な「スタンドアロン環境モニターガジェット」へと進化させていきましょう！

シリアルモニタ脱却！液晶画面で「スタンドアロン環境モニター」へ進化させよう

電子工作やIoT開発において、データを「画面に出力する」というステップは非常に重要です。

シリアルモニタは開発中のデバッグ（動作確認）には最適ですが、完成したシステムとして現場に設置して運用するのには向いていません。

ESP32にディスプレイ（液晶画面）を組み合わせることで、以下のような数多くのメリットが生まれます。

  • PCが不要になる：モバイルバッテリーやコンセント用USB電源アダプタに繋ぐだけで、単体で動作する。
  • 現場で直感的に確認できる：農園や温室の棚にポンと置いておくだけで、現在の環境が一目でわかる。
  • ガジェット感が一気に高まる：自作の機器に綺麗なディスプレイが付くだけで、一気に完成度と愛着が跳ね上がる。

今回使用するディスプレイは、Amazonや秋葉原などのパーツショップでも大人気の「0.96インチ OLEDディスプレイ（SSD1306）」です。

このディスプレイは自発光型の有機EL（OLED）を採用しているため、バックライトが不要で、暗い場所でも文字がはっきりとクッキリ見やすいのが大きな特徴です。

しかも消費電力が非常に小さく、手のひらに収まるコンパクトサイズのため、スマート農園の小さな制御ボックスにも余裕で組み込むことができます。

今回使用するパーツリスト

それでは、今回の実験・製作で使用するパーツを確認していきましょう。

基本キット（FNK0061 B）と、前回・今回で買い足したパーツを組み合わせて使用します。

  • ESP32開発ボード × 1（FNK0061 B付属）
  • ブレッドボード × 1（FNK0061 B付属）
  • ジャンパー線（オス-メスおよびオス-オス） × 必要数（FNK0061 B付属）
  • USB Type-Cケーブル × 1（FNK0061 B付属）
  • DHT11温湿度センサーモジュール × 1（前回準備したもの）
  • 0.96インチ OLEDディスプレイ（SSD1306 / I2C接続タイプ） × 1（今回買い足すもの）
ポイント

今回使用するOLEDディスプレイは、「I2C（アイ・スクエアド・シー）」という通信方式を採用しているモデルです。

通常、液晶画面をマイコンに繋ぐと10本以上の配線が必要になりますが、I2C対応モデルなら電源2本（VCC/GND）＋通信線2本（SDA/SCL）の「合計4本」だけで制御できます。

ブレッドボード上が配線でごちゃごちゃせず、ミスなく接続できる最高に扱いやすいパーツです。

今回買い足し必須の部品はこちら。

ideaspark 0.96インチ OLED ディスプレイモジュール 保護ケース付き 128x64 SSD1306 4ピン はんだ付け済み Arduino Raspberry Pi対応(白)
created by Rinker

メスメス、あるいはオスメスのジャンパーワイヤーがお手元にない場合は必要になります。

【送料無料】ジャンパーワイヤー 3本セット 10cm Emith ジャンパー線 Arduino Raspberry pi 用 ブレッドボード ジャンパーケーブル オス メス
created by Rinker

I2C通信の基本とESP32のピン配置を知ろう

配線に入る前に、今回使う通信方式「I2C（アイ・スクエアド・シー）」について少しだけ解説します。

仕組みを知っておくと、今後さらに新しいセンサーやパーツを増やす際にとても役立ちます。

I2C通信は、2本の信号線を使って複数のデバイスとデータをやり取りする仕組みです。

  • SDA（Serial Data）：データそのものをやり取りするための信号線
  • SCL（Serial Clock）：データを送受信するタイミング（リズム）を合わせるための時計信号線

ESP32には標準で割り当てられているI2C用ピンが存在します。

特別な設定をしない場合、Arduino環境での標準ピンは以下の通りです。

  • GPIO 21 ＝ SDA（データ線）
  • GPIO 22 ＝ SCL（クロック線）

つまり、今回導入するOLEDディスプレイの「SDAピン」をESP32の「GPIO 21」へ、「SCLピン」をESP32の「GPIO 22」へ接続するだけで、通信の準備が完了します。

ESP32・DHT11・OLEDの回路配線手順

それでは、ESP32、DHT11温湿度センサー、そしてOLEDディスプレイの3つをブレッドボード上で接続していきましょう。

配線作業に入る前に、安全のための鉄則を必ず守ってください。

注意！

配線作業を行う際は、必ずESP32からUSBケーブルを抜き、電源が完全に切れた状態（無通電）で行ってください。

通電したまま配線を変えると、特にOLEDディスプレイの電源ピン（VCCとGND）が誤って短絡（ショート）した場合、一瞬で基板が破損して二度と映らなくなる恐れがあります。

【ピン接続一覧表】 慎重に一本ずつジャンパー線を接続していきましょう。

DHT11温湿度センサーの配線
  • DHT11 「VCC」 ＝＞ ESP32 「3.3V」ピン
  • DHT11 「GND」 ＝＞ ESP32 「GND」ピン
  • DHT11 「DATA」 ＝＞ ESP32 「GPIO 13」ピン
OLEDディスプレイ（SSD1306）の配線
  • OLED 「VCC」 ＝＞ ESP32 「3.3V」ピン（※5Vでも動作可能）
  • OLED 「GND」 ＝＞ ESP32 「GND」ピン
  • OLED 「SDA」 ＝＞ ESP32 「GPIO 21」ピン
  • OLED 「SCL」 ＝＞ ESP32 「GPIO 22」ピン

※電源（3.3V）やグランド（GND）のピンが足りない場合は、ブレッドボードの電源レール（青ラインと赤ラインの列）を活用して電力を分配してください。

すべての配線が終わったら、ピンの挿し間違いや隣同士のピンが触れてショートしていないかを目視でしっかり確認しましょう。

Arduino IDEにOLED表示用ライブラリを追加しよう

配線が完璧に完了したら、PCとESP32をUSBケーブルで接続します。

次に、プログラムからOLEDディスプレイに文字や図形を簡単に描画できるようにするため、Arduino IDEへ専用ライブラリをインストールします。

今回は、電子工作で世界標準として使われている「Adafruit（アダフルーツ）」製のライブラリを使用します。

【ライブラリのインストール手順】

  1. Arduino IDEを起動します。
  2. 画面左側のサイドバーにある「本棚マーク（ライブラリマネージャー）」アイコンをクリックします。
  3. 検索窓に「Adafruit SSD1306」と入力します。
  4. 一覧から「Adafruit SSD1306 by Adafruit」を探し、「インストール」ボタンをクリックします。
  5. インストールの途中で「Dependencies（依存関係のあるライブラリも一緒にインストールしますか？）」というポップアップが表示されます。
  6. 必ず「Install all（すべてインストール）」をクリックしてください。

「Install all」を選択することで、文字や画像を描画するための基本ライブラリ（Adafruit GFX Libraryなど）も自動的に一括インストールされます。自分で追加のライブラリを個別検索する必要はないので、これだけで準備完了です！

温湿度表示プログラムの書き込みと動作確認

準備が整いましたので、DHT11から読み取った温度と湿度のデータを取得し、OLED画面上に綺麗に整列させて表示するプログラムを作成します。

以下のサンプルコードを丸ごとコピーして、Arduino IDEの新規ファイルに貼り付けてください。

サンプルコード

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "DHT.h"

// ディスプレイの設定
#define SCREEN_WIDTH 128 // OLED Display Width (pixels)
#define SCREEN_HEIGHT 64 // OLED Display Height (pixels)

// I2C接続用のOLEDオブジェクトを作成 (リセットピンなしは -1)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

// DHT11センサーの設定
#define DHTPIN 13 // DHT11のDATAピンを繋いだGPIO番号
#define DHTTYPE DHT11 // センサーの型番を指定

DHT dht(DHTPIN, DHTTYPE);

void setup() {
Serial.begin(115200);

// DHTセンサーの開始
dht.begin();

// OLEDディスプレイの初期化 (I2Cアドレスは一般的に 0x3C)
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;); // 初期化失敗時はここでストップ
}

// 画面の初期化設定
display.clearDisplay(); // 画面バッファをクリア
display.setTextColor(WHITE); // 文字色を白に設定
}

void loop() {
// センサーの安定読み取りのため2秒待機
delay(2000);

// 温度と湿度の取得
float h = dht.readHumidity();
float t = dht.readTemperature();

// 読み取り失敗チェック
if (isnan(h) || isnan(t)) {
Serial.println(F("Failed to read from DHT sensor!"));
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0, 0);
display.print("Sensor Error!");
display.display();
return;
}

// 画面表示の更新手順
display.clearDisplay(); // 描画前に前回の表示内容を消去

// タイトル部分の描画
display.setTextSize(1); // 文字サイズ1（小）
display.setCursor(0, 0); // 座標(X=0, Y=0)にカーソル移動
display.println("--- ENV MONITOR ---");//環境モニタの意味です。自由に書き換えてください。

// 温度の表示
display.setTextSize(2); // 文字サイズ2（中・見やすい大きさ）
display.setCursor(0, 20); // 座標(X=0, Y=20)へ移動
display.print("Temp:");
display.print(t, 1); // 小数点第1位まで表示
display.print("C");

// 湿度の表示
display.setCursor(0, 45); // 座標(X=0, Y=45)へ移動
display.print("Humi:");
display.print(h, 1); // 小数点第1位まで表示
display.print("%");

// 実際に画面へ描画（これを呼ばないと画面が更新されません）
display.display();
}

【文字色についてのワンポイント解説】

コード内にある display.setTextColor(WHITE) の WHITE は、「文字を白くする」という意味ではなく「画面を発光（点灯）させる」という意味の命令です。
今回使用している0.96インチOLEDディスプレイは単色（または上部と下部で色が固定された）仕様のため、プログラムで赤や青など好きな色に自由に変更することはできません。

文字色を反転させたい（背景を点灯させて文字を黒抜きにする）場合は、display.setTextColor(BLACK, WHITE) と書くことでハイライト表示に切り替えることができます。

【書き込み手順】

  1. Arduino IDEの画面左上にある「書き込みボタン（右矢印アイコン）」をクリックします。
  2. 画面下部のコンソールに「書き込みが完了しました（Done uploading）」と表示されるまで待ちます。

書き込みが成功すると、数秒後にOLEDディスプレイの画面がふわっと点灯し、1行目に「--- ENV MONITOR---」、2行目に温度「Temp: 24.5C」、3行目に湿度「Humi: 55.0%」とハッキリ表示されるはずです！

【完成！】

画面に数値が表示されたら、PCからUSBケーブルを抜き、スマホ用のモバイルバッテリーやUSB充電器に挿し替えてみてください。

PCと繋がっていなくても、手元のディスプレイでリアルタイムに温度と湿度が計測・表示され続けます！

まさに自分だけの小型環境モニターが誕生した最高の瞬間です！

コードのポイント解説：画面描画を自由自在にカスタマイズしよう

今回使用したプログラムの中で、特にOLEDディスプレイの制御において重要なポイントを解説します。
ここを理解しておくと、表示する文字やレイアウトを自分で自由に改造できるようになります。

  1. display.clearDisplay() 画面の描画データを消去する命令です。
    これを行わずに新しい文字を書くと、前回の文字と重なって画面がぐちゃぐちゃになってしまうため、描き替える直前に必ず実行します。
  2. display.setTextSize(サイズ) 文字の大きさを指定します。
    1は小さな標準フォント（タイトルなどに最適）、2は2倍の大きさで数値などのメインデータを見やすく表示するのに最適です。
  3. display.setCursor(X座標, Y座標) 文字を書き始める位置をピクセル単位（画面左上が0,0）で指定します。
    OLED画面は横128ピクセル×縦64ピクセルなので、縦位置（Y座標）を 0、20、45 とズラすことで、行が重ならないように配置しています。
  4. display.display() ★ここが最も重要です！
    print()などの命令は「画面バッファ（メモリ）」にデータを書き込んでいるだけなので、最後にこの display.display() を呼び出して初めて、実際の物理画面へ画像が反映されます。
    画面が変わらない時は、この書き忘れが一番の原因になります。

トラブルシューティング：画面が真っ黒で何も映らない時のチェックリスト

もしプログラムの書き込みが成功しているのに画面が真っ黒なままだったり、エラーが出る場合は、焦らず以下の項目を順番に確認してみてください。

・I2Cアドレスの違い コード内の 0x3C という数値はOLEDディスプレイの「I2Cアドレス（識別番号）」です。
市販されているSSD1306モジュールの9割以上は 0x3C ですが、稀に基板裏面のハンダ設定で 0x3D になっている個体があります。
画面が映らない場合は、コード内の 0x3C を 0x3D に変更して再度書き込んでみてください。

・SDAとSCLの逆接続 配線時に「SDA（GPIO 21）」と「SCL（GPIO 22）」が逆になっていないか確認してください。
通信線が逆だとESP32がディスプレイを認識できません。

・電源（VCC/GND）のピン接触 ブレッドボードのピンが浅く挿さっていたり、グラグラしていないか確認してください。

・ライブラリの依存関係抜け 「Adafruit GFX」が正しくインストールされているか、ライブラリマネージャーで再確認してください。

まとめ：自分だけの環境モニター完成！ここから広がる自動化の世界

今回は、ESP32に温湿度センサー（DHT11）と小型OLEDディスプレイ（SSD1306）を接続し、PCから独立して単体動作する「小型環境モニターガジェット」を作り上げました！

単なる学習用の電子工作から、実際に農園や室内栽培の現場に置いて使える「実用的なデバイス」へと大きく進化しましたね。

様々なセンサーの組み合わせなどを想像して、さらなる可能性を感じられたかと思います！

手元で環境データがリアルタイムに見えるようになると、スマート農園の構築はさらに面白いフェーズへと進んでいきます。

「現場で数値が見えるようになったら、次は離れた場所からスマホやWebブラウザでいつでも確認したい！」 「設定した温度や湿度を超えたら、自動でファンや自動水やりポンプを動かしたい！」

次回は、ESP32の最大の強みである「Wi-Fi機能」を解放します！

取得した温湿度データをWi-Fi経由でクラウドに送信し、スマホやPCのブラウザからいつでもどこでも農園の環境をチェックできる「Web遠隔監視システム」の構築に挑戦します！

スマート農園の本領発揮となりますので、ぜひ次回の記事も楽しみに待っていてくださいね！

おすすめの記事