きっかけは、朝の「あれ、今日ゴミの日だっけ？」
朝ごはんを食べながらスマホで天気予報を開いて、次にカレンダーアプリでその日の予定を確認して、ゴミ出しの日はうろ覚えのまま「多分今日じゃないよな」で出かける——そんな小さな確認の積み重ねが、地味にストレスでした。
情報自体はどれもスマホの中にあるのに、アプリをいくつも開かないと全体が見えない。家族に「今日の予定なに？」と聞かれても、自分もパッと答えられない。
だったら、リビングに置いてあるディスプレイを見るだけで「今日必要な情報」がひと目でわかるようにできないか——というのが、このダッシュボードを作り始めた動機でした。
技術的に真新しいことをしたかったわけではなく、あくまで「自分の家の生活を少し楽にしたい」という、わりと地味な出発点です。
最初に「欲しい情報」を洗い出してみた
作り始める前に、家族の生活の中で毎日確認しているものを紙に書き出してみました。出てきたのはこんな項目です。
- 今日・明日の天気（気温、降水確率）
- ゴミ出しの予定（何ゴミの日か）
- 家族の予定（保育園・仕事・通院など）
- 月の満ち欠け
- 潮の満ち引き（自宅近郊の潮位情報）
- 電車・バスの時刻とリアルタイムの運行状況
我ながら欲張りなリストだと思いますが、「毎朝スマホで確認しているもの」を素直に並べただけです。
全部乗せにしたら、逆に誰も見なくなった
最初のバージョンは、思いついた情報を片っ端から画面に詰め込みました。結果、情報量が多すぎて視線がどこにも定まらない、文字が小さくて離れた場所から読めない、という状態に。
「便利にしたい」と思って作ったはずが、家族からは「情報多すぎて逆に見なくなった」という率直な感想をもらいました。これは地味にこたえましたが、大事な指摘でした。
そこから、画面を意味のあるブロックに分けて、それぞれのブロックは「3秒で読み取れる情報量」に絞る、という方針に切り替えました。文字サイズも、キッチンから見える距離を実際に歩いて確認しながら調整しています。ここは生成AIに聞いても答えが出るものではなく、結局は自分の家で何度も距離を測って決めました。
天気・ゴミ出し・月齢・潮汐——まずは静的な情報から実装
家族の予定（TimeTree）は少し手強かったので後回しにして、まずは実装しやすいところから手を付けました。
天気
天気情報はOpen-Meteoという無料の気象APIを使っています。APIキーの登録が不要で、緯度・経度を指定するだけで気温や降水確率、天気アイコン用のコードが取得できるため、個人開発の最初の一歩としてはかなり扱いやすいAPIでした。
// 天気取得の例（緯度・経度はダミー値）
const params = new URLSearchParams({
latitude: "35.00",
longitude: "139.00",
daily: "weathercode,temperature_2m_max,temperature_2m_min,precipitation_probability_max",
timezone: "Asia/Tokyo",
});
const res = await fetch(`https://api.open-meteo.com/v1/forecast?${params}`);
const weather = await res.json();緯度経度は自宅周辺のおおよその位置を指定していますが、記事内では実際の値ではなくダミーの数値に置き換えています。
ゴミ出し予定
自治体が公開しているゴミ収集カレンダーの情報を元に、曜日ごとの収集品目をコード内に定義しているだけのシンプルな仕組みです。API化されているわけではなく、「今日は何ゴミの日か」を曜日から判定するロジックを自分で書きました。地味ですが、実生活で一番「見てよかった」と言われる機能です。
月齢・潮汐
月齢は計算式で求められるため、外部APIなしで実装しています。潮汐（潮の満ち引き）については、自宅近郊の潮位情報を公開しているサイトのデータを参考に、グラフ表示を組み込みました。潮位観測地点の具体名は本記事では伏せていますが、海や川が近いエリアにお住まいの方であれば、同様の公開データを使って似たような機能を作れると思います。
ここまでは天気・ゴミ出し・月齢・潮汐と、外部サービスに依存しすぎない範囲で実装できたので、比較的スムーズに進みました。
一番苦労したのは「家族の予定」表示だった
家族の予定共有には、もともとTimeTreeを使っていました。せっかくなら、このカレンダーの予定もダッシュボードに表示したい——ここで最初につまずきます。
TimeTreeには公式APIが存在するのですが、個人開発者が自由に使える形では公開されておらず、法人向けの申請フローが必要でした。「ちょっと自分の家で使うダッシュボードを作りたいだけなんだけどな」という個人開発にはハードルが高く、しばらくここで手が止まりました。
代わりに使えないかと調べて見つけたのが、TimeTreeの「カレンダー共有（公開URL）」機能です。TimeTreeには、カレンダーを外部に公開してiframeなどで埋め込める共有リンクを発行する機能があり、これを使えば公式APIなしでも予定表示ができることがわかりました。
<!-- 実際のURLではなくイメージです -->
<iframe
src="https://timetreeapp.com/public_calendars/xxxxxxxx"
width="100%"
height="400"
frameborder="0"
></iframe>ただし、これはあくまで「カレンダー全体を埋め込む」ための機能なので、ダッシュボードの他の要素とデザインを揃えるのに一苦労しました。iframe内のフォントサイズや配色はこちら側から自由にいじれないため、外側の余白やレイアウトを調整して、見た目の違和感をできるだけ減らす方向で妥協しています。
なお、この記事に掲載しているカレンダー表示のイメージは、実際の家族の予定ではなく「今日の予定」のようなダミーの文言に差し替えたものです。実際の予定内容や、家族の名前が予定タイトルに入っている状態のスクリーンショットはそのまま使っていません。
ここまでで見えてきたこと
天気、ゴミ出し、月齢、潮汐、家族の予定——ひとまず「見たかった情報」はブラウザ上のWebページとして表示できるところまでこぎつけました。この時点ではまだ、普通のノートPCやスマホのブラウザで動作確認をしている段階です。
次にぶつかったのは、「これをどうやってリビングに常時表示するか」という、地味だけど地味に難しい問題でした。ノートPCを置きっぱなしにするわけにもいかず、かといって専用のスマートディスプレイを買うのも大げさな気がする——このあたりの試行錯誤と、Fire TV Stickにたどり着くまでの話は後編で書きます。
後編では、常時表示ディスプレイ化の検討（PC・Raspberry Pi・Fire TV Stickの比較）と、電車・バスのリアルタイム運行情報をODPT Challenge 2026 APIで取り込んだ際に踏んだエラーの話を書く予定です。
（後編に続く）