ウェザーマンがいるので、ニュースも教えてくれる

So I have a weatherman, which also tells me the news (part 1)

［画像: 完成したウェザーマンの写真：ブレッドボード上のLILYGO T5 e-paperディスプレイに天気、ToDo、市場、空気質、Hacker Newsのパネルが表示されており、その隣にはDHT22センサーが配線されている］

私の地域では夏は非常に乾燥し、暑く、耐え難いほどです。そのため、これらすべてから逃れるために、家の温度を下げるためのいくつかの異なる対策を試したいと思いました。そのための良い出発点は、ベースラインを確立し、標準偏差を見つけることだと考えました。これを行うには、一定期間、家の温度と湿度を観測する必要があることに気づきました。

［画像: 室内温度の1週間の読み取り値（最小26.1℃、最大29.4℃、平均27.8℃）と、その下の湿度統計の開始を示すGrafanaパネル］

同時に、特にYouTube、Instagram、Redditなどのソーシャルメディアでアルゴリズムから推奨されるコンテンツの量を減らそうとしています。Hacker Newsは、比較的透明性の高いアルゴリズムと、私が好きな著者のRSSフィードがあるため、消費するコンテンツを管理するための良い出発点となりました。そのため、minifluxを設定し、うまくいっています。ただ、AI/LLMの話題など、HNで定期的に登場する最先端の情報をいくつか見逃しがちです。

［画像: Minifluxフィードリスト：22件の購読済みフィード（未読数付き）が表示されており、Hacker News: Active, Hacker News: Best, Simon Willison's Weblog, LWN.net, The Cloudflare Blogなどが含まれる］

また、月による特定の星や惑星の隠蔽や食などの天文現象にも興味があり、望遠鏡で観測できるかどうかを判断したいと思っています。これは、家の周りの空気の質を知りたいという私の興味とも関連しています。

これらのことを考えているうちに、部屋の隅にある電子部品箱で埃をかぶっていたe-paperディスプレイがあることを思い出しました。ある日、Claude Codeを使ってついにそれを使った何かを構築し、上記のような情報を表示する静的なディスプレイとして使うことにしました。

これは数年前にhubtronics.inで購入したもので、STM32/MC60での組み込みプログラミングを含むプロジェクトに取り組んでいたときでした。LILYGOのT5 e-Paperモジュールで、ESP32チップが統合されており、WiFiとBluetoothをサポートしています。

User Interface

次に、このデータをディスプレイにどのように投影するかという問題がありました。コンテンツの構造、形式、そして最も注意を引くべき部分は何かということです。

First Attempt

私は非常に構造化されていない方法で始め、すぐに戸惑ってしまいました。レイアウトに全く注意を払わず、すべてを左揃えの単一のテキストの塊として印刷してしまいました。

それはかなり醜く、写真も撮りませんでした。

［画像: グリッドや階層が適用される前の、初期の単一段落レイアウトの再現］

Second Attempt

シンプルなデザインから始めることにしました。外部APIからすべてのフィードを収集し、HTTP経由でJSONとして提供するHTTPサーバーで構成されていました。このJSONは、固定されたスキーマ/コントラクトでESP32によってレンダリングされます。ESP32は、サーバーへのAPI呼び出しが成功した後、定期的に画面をリフレッシュします。

その後、Claudeに2x3（高さx幅）のグリッドを提案するように指示したところ、すぐに十分なレンダリング結果が得られました。

次に、最も関連性の高い情報がより大きく、簡潔で、注意を引きやすいように、注意を引く部分を生成するように指示しました。

上段には天気、ToDo、AQI +統計が表示されます。下段にはHN、読書リスト、日時が表示されます。

これはうまくいきましたが、HNの320pxのセルはヘッドラインには窮屈すぎました。また、日時と読書リストは、セル全体を占めるには薄すぎました。そのため、右下の2つのセルを結合して、HN用のダブルワイドゾーンを作成することにしました。ToDoと読書リストは、中央上部の1つのセルに統合しました。市場データは右上、AQIと月齢は左下に配置しました。日時は、ワイドHNゾーンの下部に配置しました。フォントも調整する必要があり、OpenSansから始め、後にMontserratに移行し、フィットするように異なるサイズを使用しました。画像アセットからすべてのプリミティブに移行し、タイトルを大文字にして下線を引くなどのいくつかのイディオムも追加しました。

Network Architecture

UIをイテレーションしている間、ESP32ファームウェアに静的なJSONをフラッシュしており、UIのレンダリングに使用していました。今度は、WiFi/Bluetooth経由でESP32を配線し、サーバーからワイヤレスでデータを取得できるようにする必要がありました。

サーバーの内部IPアドレスを含むHTTP URLでファームウェアを迅速に出荷することができました。Claudeに、静的なJSONを提供するClojureのサーバーを実装するように依頼しました。

［画像: システムアーキテクチャ：ESP32ディスプレイは、天気/AQI、Hacker News、市場データを集約するHTTPサーバーからJSONフィードを取得する］

その後、mDNSの実験を始め、ESPmDNSを解決に使用してみました。Claudeを使って数回イテレーションしてESPがmDNSホスト名を解決できない理由をデバッグしましたが、全く機能させることができませんでした。最終的には諦めました。この時点ではまだ問題なく動作しており、ESP32はサーバーからJSONを取得してレンダリングすることができました。

しかし、いくつかの問題がありました。

• レンダリング完了後にESP32をスリープさせ、10分後にウェイクアップして更新されたフィードを取得するように設定しましたが、全くウェイクアップしませんでした。
• サーバーでフェッチに失敗した場合、最後の正常な値をサービスするのではなく、サービスを停止してしまいました。

また、いくつかの機能を追加したいと思っていました。

• センサーを使用した室内空気質
• TODO/読書リストの統合
• データが変更されていない場合にe-paperのリフレッシュをスキップするための変更検出

これらは今後のブログ記事で取り上げます。

ディスプレイは以下のようになります。

［画像: LILYGO T5 e-paperディスプレイにレンダリングされた完成したダッシュボード］

お読みいただきありがとうございました！