デジタル時計「ESPTimeCast」を作ります

Web技術

2026.06.05

ネットサーフィン(死語)をしていて見つけた「ESPTimeCast

ESP32開発ボートとMAX7219 8×32ドットマトリックスで作成するデジタル時計です。

Wi-Fi接続でNTPサーバーに接続するため、時刻は電波時計と同じく正確です。

OpenWeatherでAPIを取得(無料です)すれば気温と天気も表示します。

とても小さい、ESP32-C3 スーパーミニ開発ボード

10円玉と同じぐらいの大きさをした「ESP32-C3」です。

アマゾンで2枚組 1,154円で購入しました。

この大きさで、Wi-FiとBluetoothに対応しています。

こちらは、「MAX7219 8×32ドットマトリックス」です。

アマゾンで2パック 1,699円で購入しました。

ESP32-C3に5本のケーブルを接続するだけでデジタル時計が完成します。

Geminiにお願いして配線図を作ってもらう

ぱっと見で分かるように、Geminiにお願いして配線図を作ってもらいました。

図を見ながら開発ボードとMAX7219を接続後、PCからファームウェアをインストールしましたが、うんともすんとも動きません。

実はここに大きな落とし穴がありました。

Geminiの作成したESP32-C3側の端子番号は、まったくの大嘘で、端子番号は

CLK ⇔ GPIO4
CS ⇔ GPIO10
DIN ⇔ GPIO6
VCC ⇔ 5V
GND ⇔ GND

が、正解でした。

やりやがったな!Gemini!おまえはゆるさん!

おかげでESP32-C3のWi-Fiが壊れたみたいで反応しなくなりました。

ファームウェアのインストールは超簡単♪

気を取り直して、もう一枚のESP32-C3で組みなおしてファームウェアをインストールしました。

ファームウェアのインストールは、なんとブラウザからできるんです。

ESP32-C3とPCをUSBケーブルで接続後、ESPTimeCastのトップにある「Install Now」のボタンをクリックするとESP32-C3にファームウェアが書き込まれます。

ここで一点注意が必要です。

初めてESP32-C3をPCに接続する場合には、ESP32-C3にあるBOOTボタンを押しながら接続する必要があります。

ファームウェアをインストール後、再起動するとアクセスポイントの設定を促す表示をします。

スマホからWi-Fiを検索すると「ESPTimeCast」が見つかります。

パスワードは「12345678」です。

ESPTimeCastにアクセスすると設定画面が表示されます。

Wi-Fi Settingsで宅内のWi-Fiを設定、Time&RegionでAsia/Tokyoを設定、Save Settingsボタンをクリックすれば、とりあえず動くようになります。

むき出しのままでは扱いにくいので、3Dプリンターでケースを作ります。

3Dプリンターでケースを作る

まずは、ESP32-C3とMAX7219 8×32ドットマトリックスを固定する土台から作成します。

次に土台を収めるケースと表示窓を作成します。

組み立てて完成です。

ESP32-C3は意外と熱くなるので、熱がこもらないように空気口を作りました。

LEDが赤色なので、ケースも赤色で作成しました。

実際に動いている動画がこちらです。

Wi-Fi接続時に表示されるIPアドレスにブラウザからアクセスすると、設定画面が表示されます。

設定画面からWeather Settingsを設定すれば天気予報を表示するようになります。(反映されるまでしばらく時間がかかります。)


🏢 株式会社ハジメクリエイトについて

この記事は、 株式会社ハジメクリエイト のエンジニアが執筆しました。


💻 Webシステム開発のプロフェッショナル

私たちは、ビジネスの成長をサポートするため、 PHPを用いたオーダーメイドのシステム開発 を提供しています。
お客様一人ひとりのニーズに応じたカスタムシステムを、 企画から開発・運用まで一貫してサポート
さらに、 React Nativeを活用したiOS/Android対応のアプリ開発 も得意としています。

単に「作る」だけでなく、
課題の本質に向き合い、最適な解決策を提案する のがハジメクリエイトのスタイルです。


🧑‍💻 一緒に働く仲間を探しています!

株式会社ハジメクリエイトでは、 自ら考え行動できるエンジニア を募集しています。
「私はこれがしたい!」という想いを持つあなた、一緒にモノづくりを楽しみませんか?

  • 技術で人の役に立ちたい
  • 意見が通る小さなチームで働きたい
  • フロントエンドもバックエンドも、いろいろ挑戦してみたい
  • お客さんと一緒にプロジェクトを育てたい

そんな気持ちがある方なら、きっと居心地のいい環境だと思います。
正社員はもちろん、パートタイムでの参加も歓迎中! 柔軟な関わり方で、あなたらしく働いてください。

👉 採用情報を見る
👉 お問い合わせはこちら


ちょっとでも「この会社、気になるな」と思ったら、ぜひお気軽にご連絡ください📩
最後まで読んでいただきありがとうございました!

  • Web技術
  • ガジェット

この記事を書いた人

キューロ小坂

シニアエンジニア キューロ小坂

PhpStormのAIコード補間に「そうそう、今からそのコードを書こうと思ってたんよ。おまえ賢いな~。」とつぶやきながらコードを書いているプログラマーです。

キューロ小坂の書いた記事一覧へ

ハジメクリエイトでは一緒に働く仲間を募集しています!

関連記事