NodeMCU(ESP8266)と超音波センサー(HC-SR04)を使い、測定した距離をWi-Fi経由でスマートフォンのブラウザに表示するソースコードと手順を解説します。
測定値はリアルタイムに更新され、小数点第1位まで「cm」単位で表示されます。
必要なもの

回路図
まず、以下のようにNodeMCUとHC-SR04センサーを接続します。HC-SR04は5Vで動作するのが一般的ですので、NodeMCUのVinピンから電源を取ります。
| HC-SR04 | NodeMCU |
| VCC | Vin (5V) |
| Trig | D1 (GPIO5) |
| Echo | D2 (GPIO4) |
| GND | GND |
超音波センサーHC-SR04について
丸いスピーカーの様な部品は、1つがスピーカーで音波を発生するトリガー(Trig)で、もう1つがマイクで障害物に当たって跳ね返ってくる音波を拾うマイク(Echo)です。
音は1秒間に約343m進みます。
例えば、雷がピカっと光ってから2秒後にゴロゴロ~!っと音が鳴った場合は、音速343m×2秒=686m先に雷が落ちた計算になります。
HCーSR04では、この雷の音に相当する音波を発射し、跳ね返ってきた時間から距離を測定しますが、往復の時間なので、片道にするために半分に割ります。
計算式は、距離=音速×往復時間÷2 となります。
プログラム上では、関数 pulseIn()がカウントし返す時間の単位は、㎲(100万分の1秒:マイクロセカンド)で、100万で割る必要があります。
音速(34,300 cm/s)×時間(1/1,000,000 μs)=0.0343 cm/μs
これは「音は1マイクロ秒あたり0.0343cm進む」ことを意味しますが、往復の距離なので片道に換算するにはさらに2で割る必要があります。
片道の距離=0.043 cm/μs = 0.01715cm/μs
これを分数に直すと約(1/58.2)cm/μs となり、音速としてプログラム上で利用される数値になります。
仮に往復で1,000μs(0.001秒)の時間がカウントされた場合
片道の距離=音速 (1/58.2)cm/μs × 時間 1,000μs =約17.1cm
という計算になります。
ソースコード
以下のコードをArduino IDEにコピー&ペーストしてください。
事前にArduino IDEにESP8266ボードをインストールしておく必要があります。
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// --- ここから設定 ---
// 接続するWi-FiのSSIDとパスワードを設定してください
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
// HC-SR04のピン設定
const int trigPin = D1; // TrigピンをD1 (GPIO5)に接続
const int echoPin = D2; // EchoピンをD2 (GPIO4)に接続
// --- ここまで設定 ---
// Webサーバーをポート80で起動
ESP8266WebServer server(80);
// 距離を測定する関数
float measureDistance() {
// Trigピンを一度LOWにしてから、10マイクロ秒のパルスを送信
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
// EchoピンがHIGHになっている時間を測定(マイクロ秒)
long duration = pulseIn(echoPin, HIGH);
// 距離を計算 (時間 / 58.2 = 距離cm)
// 音速から導出された一般的な計算式です
float distance = duration / 58.2;
return distance;
}
// Webページを生成して表示する関数
void handleRoot() {
// 距離を測定
float dist = measureDistance();
// 表示するHTMLを生成
String html = "<!DOCTYPE html><html>";
html += "<head><meta charset='UTF-8'>";
html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
// 2秒ごとにページを自動更新
html += "<meta http-equiv='refresh' content='2'>";
html += "<title>超音波センサー距離計</title>";
html += "<style>";
html += "body { font-family: 'Helvetica', 'Arial', sans-serif; text-align: center; margin-top: 50px; background-color: #f0f8ff; }";
html += "h1 { color: #333; }";
html += ".distance-box { background-color: #fff; border-radius: 15px; padding: 30px; display: inline-block; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }";
html += ".distance { font-size: 5rem; font-weight: bold; color: #0056b3; }";
html += ".unit { font-size: 1.5rem; color: #555; margin-left: 10px; }";
html += "</style></head>";
html += "<body>";
html += "<h1>🚀 WiFi 距離計</h1>";
html += "<div class='distance-box'>";
html += "<span class='distance'>";
// 測定結果を小数点第1位まで文字列に変換して追加
html += String(dist, 1);
html += "</span>";
html += "<span class='unit'>cm</span>";
html += "</div>";
html += "</body></html>";
// 生成したHTMLをクライアント(ブラウザ)に送信
server.send(200, "text/html", html);
}
void setup() {
Serial.begin(115200);
delay(10);
// ピンのモードを設定
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
// Wi-Fi接続を開始
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
// 接続が完了するまで待つ
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// 接続成功したらIPアドレスをシリアルモニタに表示
Serial.println("");
Serial.println("WiFi connected! 🎉");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// WebサーバーのルートURL ("/") にアクセスがあったらhandleRoot関数を呼ぶように設定
server.on("/", handleRoot);
// Webサーバーを開始
server.begin();
Serial.println("HTTP server started");
}
void loop() {
// クライアントからのリクエストを処理
server.handleClient();
}使い方
- コードの編集:
- 上記のソースコードの
YOUR_WIFI_SSIDとYOUR_WIFI_PASSWORDを、お使いのWi-FiのSSIDとパスワードに書き換えてください。
- 上記のソースコードの
- 書き込み:
- Arduino IDEで「ツール」メニューから、お使いのNodeMCUボード(例: “NodeMCU 1.0 (ESP-12E Module)”)と正しいCOMポートを選択します。
- 「マイコンボードに書き込む」ボタンを押して、プログラムをNodeMCUに転送します。
- IPアドレスの確認:
- 書き込みが完了したら、Arduino IDEの「シリアルモニタ」(通信速度: 115200 bps)を開きます。
- Wi-Fiへの接続が成功すると、以下のようにNodeMCUのIPアドレスが表示されます。
WiFi connected! 🎉 IP address: 192.168.1.XX - スマートフォンで表示:
- スマートフォンをNodeMCUと同じWi-Fiネットワークに接続します。
- スマートフォンのブラウザを開き、シリアルモニタに表示されたIPアドレス(例:
http://192.168.1.XX)を入力してアクセスします。 - ブラウザの画面に現在の距離が表示され、約2秒ごとに自動で更新されます。
これで、超音波センサーで測定した距離をスマホで確認できます。




コメント