はじめに
前回（#5 Webサーバー編）でCO2濃度をグラフ表示できるようになりました。
ただ、グラフの横軸（X軸）は 1, 2, 3... という単なる番号でした。
今回は NTPで時刻を取得 して、X軸に実際の時刻を表示します。
なぜ時刻を表示するのか
グラフのX軸が番号のままだと「いつ濃度が上がったのか」がわかりません。
時間の流れを横軸にした方が、データの変化を直感的に読み取れると考えました。
「14時頃に上がった」「換気したら下がった」など、時刻があると分析しやすくなります。
NTPとは
NTP（Network Time Protocol）はインターネットから正確な時刻を取得する仕組みです。
ESP32はWi-Fiに繋がっているので、時刻サーバーから現在時刻をもらえます。
[ESP32] → 時刻サーバー（pool.ntp.org）に問い合わせ
← 現在時刻をもらう
使用ライブラリ
-
time.h（ESP32標準）
追加インストールは不要です。
NTPの設定
const char* ntpServer = "pool.ntp.org";
const long gmtOffset_sec = 9 * 3600; // 日本時間（UTC+9）
const int daylightOffset_sec = 0; // サマータイムなし
-
ntpServer→ 時刻サーバーの住所 -
gmtOffset_sec→ 日本はUTC+9なので9時間分の秒数 -
daylightOffset_sec→ 日本はサマータイムがないので0
時刻取得のコード
configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
delay(2000); // 時刻取得を待つ（重要！）
時刻を取得して文字列にする部分：
struct tm timeinfo;
if (getLocalTime(&timeinfo)) {
char timeStr[6];
sprintf(timeStr, "%02d:%02d", timeinfo.tm_hour, timeinfo.tm_min);
timeHistory[historyIndex] = String(timeStr);
}
-
struct tm→ 時刻情報をまとめた箱 -
sprintf→14:30の形式に変換 -
%02d→ 2桁表示（1桁なら0を補う）
一番ハマったポイント
時刻が取得できず空白になる
最初、グラフのX軸に時刻が表示されず空白のままでした。
Serial Monitorで確認しても時刻が取れていませんでした。
原因は configTime() を呼んだ直後に時刻を使おうとしていたことでした。
解決方法：configTimeの後に待つ
NTPサーバーから時刻を取得するには少し時間がかかります。
configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
delay(2000); // ← これを追加
configTime() の後に 2秒待つ ことで、確実に時刻を取得できるようになりました。
これに気づくまで「なぜ時刻が空白なんだろう」と悩みました。同じ症状の人は試してみてください。
グラフのX軸を時刻にする
データを保存するときに時刻も一緒に保存します。
String timeHistory[20] = {}; // 時刻を保存する配列
グラフのラベル部分で時刻を使います。10件おきに表示すると見やすくなります。
String timeLabels = "";
for (int i = 0; i < 20; i++) {
int index = (historyIndex + i) % 20;
if (i % 10 == 0) {
timeLabels += String("'") + timeHistory[index] + String("'");
} else {
timeLabels += String("' '"); // 空白
}
if (i < 19) timeLabels += ",";
}
動かしてみた
グラフのX軸に時刻が表示されるようになりました。
14:30 14:35 14:40
時間の流れがわかるようになり、データの分析がしやすくなりました。
まとめ
- NTPで現在時刻を取得できた
- configTime後にdelay(2000)を入れるのが重要
- グラフのX軸に時刻を表示できた
configTime 後の待ち時間は見落としがちなポイントでした。
次回はいよいよ最終回、RGB LEDでCO2レベルを色表示します！
#7 RGB LED編へ続く