Kotaro Studioでその昔M5Stackのwifi接続の記事がバズったことがあります。

ESP32はwifiもBluetoothも使えるので、便利ですね。

この記事では、M5Stack Basic（ESP32搭載）を使って、Wi-Fiに接続し、NTPサーバーから現在時刻を取得して表示する時計を作る方法を紹介します。

設定はとてもシンプルで、「00:00:00」のような形で現在時刻をディスプレイ中央に表示します。
「M5Stackに時刻を表示したい」「ネットから時刻を取りたい」という方にぴったりです。

#include <M5Unified.h>
#include <WiFi.h>
#include <time.h>

M5Unified: M5Stackシリーズを統合的に扱うライブラリ
WiFi.h: ESP32のWi-Fi接続用
time.h: NTPサーバーから現在時刻を取得するために使用

実際wifiへの接続は

WiFi.begin(SSID, PASSWD);

で行います。

これは接続状況をループで監視し、接続が確立したらNTP同期を行います。

時刻取得は

configTime(9 * 3600, 0, NTP_SERVER1, NTP_SERVER2, NTP_SERVER3);

で行います。
JST（日本標準時）はUTC+9なので、9 * 3600（秒）を指定します
NTPサーバーは信頼性の高い ntp.nict.jp や pool.ntp.org を使用

画面表示は

M5.Display.setTextSize(4);
M5.Display.setTextDatum(middle_center);
M5.Display.drawString(txt, M5.Display.width() / 2, M5.Display.height() / 2);

+---------------------------+
|                           |
|         13:45:21          |
|                           |
+---------------------------+

このように、画面中央に配置されます。

サンプルコードです

#include <M5Unified.h>
#include <WiFi.h>
#include <time.h>

//――― ご自宅Wi-Fi設定（画像より）
constexpr char SSID[]   = "使用するチャンネル";
constexpr char PASSWD[] = "ここにパスワード";

//――― NTPサーバ（日本）
const char* NTP_SERVER1 = "ntp.nict.jp";
const char* NTP_SERVER2 = "ntp.jst.mfeed.ad.jp";
const char* NTP_SERVER3 = "pool.ntp.org";

//――― テキスト描画関数（中央配置／画面収まるサイズ）
void drawCenterTime(const char* txt) {
  M5.Display.setTextSize(4);  // 画面に収まるサイズ（約32pt相当）
  M5.Display.setTextDatum(middle_center);  // 中央基準
  M5.Display.fillRect(0, 80, 320, 80, TFT_BLACK);  // 前の描画をクリア
  M5.Display.drawString(txt, M5.Display.width() / 2, M5.Display.height() / 2);
}

//――― Wi-Fi接続処理
void connectWiFi() {
  M5.Display.setTextSize(2);
  M5.Display.setCursor(20, 20);
  M5.Display.println("Connecting Wi-Fi...");
  WiFi.begin(SSID, PASSWD);
  uint8_t retry = 0;
  while (WiFi.status() != WL_CONNECTED && retry++ < 20) {
    delay(500);
  }
  if (WiFi.isConnected()) {
    M5.Display.println("Wi-Fi Connected.");
  } else {
    M5.Display.println("Wi-Fi Failed!");
  }
}

//――― NTP時刻同期
void syncTime() {
  configTime(9 * 3600, 0, NTP_SERVER1, NTP_SERVER2, NTP_SERVER3); // JST=UTC+9
  struct tm t;
  for (int i = 0; i < 10; ++i) {
    if (getLocalTime(&t)) return;
    delay(1000);
  }
  drawCenterTime("--:--:--");
}

//――― 現在時刻（HH:MM:SS）
String getTimeString() {
  struct tm t;
  if (!getLocalTime(&t)) return "--:--:--";
  char buf[10];
  sprintf(buf, "%02d:%02d:%02d", t.tm_hour, t.tm_min, t.tm_sec);
  return String(buf);
}

//――― SETUP
void setup() {
  M5.begin();
  M5.Display.setRotation(1);  // 横画面
  M5.Display.setTextColor(TFT_WHITE, TFT_BLACK);
  M5.Display.fillScreen(TFT_BLACK);
  connectWiFi();
  syncTime();
}

//――― LOOP
void loop() {
  static uint32_t lastUpdate = 0;
  M5.update();

  if (M5.BtnA.wasPressed()) {
    syncTime();
  }

  if (millis() - lastUpdate > 1000) {
    lastUpdate = millis();
    drawCenterTime(getTimeString().c_str());
  }
}

画面の向き？

M5Unified（内部的には M5GFX）は setRotation(n) に以下の値を取ります（すべて 0〜3）：

音楽家：朝比奈幸太郎

神戸生まれ。2025 年、40 年近く住んだ神戸を離れ北海道・十勝へ移住。
録音エンジニア五島昭彦氏より金田式バランス電流伝送 DC 録音技術を承継し、 ヴィンテージ機材で高品位録音を実践。
ヒーリング音響ブランド「Curanz Sounds」でソルフェジオ周波数音源を配信。
“音の文化を未来へ”届ける活動を展開中。

Instagram YouTubeチャンネル 金田式 DC 録音サイト ヒーリング音楽ブランド