Due・Todoist・予定・天気をひとつに。自分用リビングダッシュボードを作った

やることはDueとTodoist。予定はGoogleカレンダー。天気や部屋の温度は、また別の場所。

それぞれを使いながら、知りたい情報はひとつの画面で見たい。そんな自分用の「リビングダッシュボード」を作った。ダッシュボードというのは、必要な情報をまとめて見渡せる画面のこと。車のメーターの、暮らし版みたいなものだ。

今回やりたかったこと
いつものアプリの情報をまとめて、カレンダーの見た目も自分好みに。外の天気と部屋の温度・湿度まで、ひとつの入口から確認したい。

俺はプログラミングができるわけではない。だからこの記事も、コードの説明より「どんなことができるのか」を中心に紹介する。裏で使っているCloudflareやAPIの話も、役割が分かるくらいに整理してみた。

※以下の実機写真・スクショに表示している予定・タスク・天気・温度・湿度は、すべてデモデータ。実際の生活記録や予報ではない。説明用のイラストも添えている。

使うアプリはそのまま、見る場所をひとつに

情報を集める場所を作り、アプリごとの役割は残す。まずは完成した画面から紹介する。

今の画面には、こんな情報を並べた

全体はこんな感じ。左側にタスク、右側にカレンダー。その下に天気と室内のグラフを並べている。各アプリの画面を小さく貼り付けるのではなく、必要な情報を取り出して、この画面の形に並べ直している。

まとめたもの	この画面で分かること
Due	期限のあるやること、繰り返しの用事
Todoist	プロジェクト別のタスク、期限を決めていない用事
Googleカレンダー	これからの予定と、日をまたぐ予定
Open-Meteo	時間ごとの気温・雨、週間予報
SwitchBotの温湿度データ	部屋の温度・湿度と、その変化

たとえば、出かける前に予定を見て、そのまま雨の予報を確認する。家の用事を見ながら、部屋がどのくらい暑いかも確かめる。こういう情報を近くに置けるのが、まとめる意味だと思う。

ここが便利
「どのアプリを開くか」より先に、「今、何を知りたいか」で画面を見られる。

元のアプリは引き続き使う。情報の持ち主はそれぞれのアプリで、ダッシュボードは共通の入口という関係だ。すべての機能を、この一画面へ詰め込む必要はない。

DueとTodoistを同じ画面から使う

タスクを無理に一つのアプリへ寄せず、それぞれを同じ入口から使う。必要な操作を、ここから選べるようにした。

タブを切り替えて、タスクを確認・編集

タスク欄の上にある「Due」「Todoist」で、表示するアプリを切り替えられる。Todoistではプロジェクトを選んで絞り込めるので、仕事や暮らしのタスクを分けたまま確認できる。

Dueは、決めた時刻の用事を思い出させるのが得意なアプリ。Todoistは、やることをプロジェクトごとに整理できるアプリ。それぞれの使い方を残して、入り口だけをまとめている。

• タスクの名前や期限を確認する
• 名前や日時を編集する
• 対応するタスクを完了にする
• Todoistのプロジェクトを切り替える

見るだけでなく、ダッシュボードから操作できる部分もある。Dueの編集画面には時刻や「＋30分」「＋1日」のボタンがあり、期限を調整できる。

さらに、DueからTodoistへ移す機能も付けた。編集画面の下に出ているプロジェクト名が移動先。「今すぐ時間を決める用事」から「あとで整理したいタスク」へ扱いを変えたいときの選択肢になる。

移動するときの注意
現在の移動は、タスク名をTodoistへ期限なしで登録する方式。Dueの期限・時刻・繰り返しは引き継がない。移動先への登録を確認してから、元のDueタスクを削除する。

つまり、二つの一覧を常に同じ内容へ揃える機能ではない。切り替えて使うことと、タスクを移すことは別だ。Dueの複雑な繰り返しなど、本家アプリで扱う操作も残している。

カレンダーも、自分の見やすさに合わせる

予定を保存する場所と、予定を見せる形は分けて考えられる。自分用に作ると、見やすさも調整の対象になる。

これからの12日間を大きく表示

俺が見せたかったのは、予定を集めることだけではなく、カレンダーの見た目を自分で決められること。Googleカレンダーに入っている予定を使いながら、こちらの画面では別の並べ方で表示している。

今の大きな画面では、今日から12日間を6日ずつ2段にしている。1か月を全部詰め込むより、近い予定へ場所を使う作りだ。日をまたぐ予定は帯でつながり、どこからどこまでかを追いやすくしている。

• 何日分を、何段に分けて見せるか
• 予定名の文字サイズや、予定の枠の高さ
• カレンダーごとの色分け
• 天気や室温に、どれくらい場所を使うか

こうした部分を、使う画面に合わせて作り替えられる。「文字が小さい」「カレンダーが場所を取りすぎる」といった希望も、調整する内容として伝えられる。実際に予定の枠や、下に置くグラフとの割合を調整してきた。

自由にできる、の意味
設定メニューから何でも変更できるという意味ではない。一覧／切り替えは画面の設定で選ぶ。文字サイズ・列数・細かな配色などは、AIに相談しながら画面の作りを調整する部分もある。

プログラミングの言葉で指示できなくても、「ここをもう少し大きく」「予定を読みやすく」と、見た目の希望から伝えられる。自分が見たい形を先に考えられるのが、この作り方の面白いところだ。

なお、今のGoogleカレンダー連携は読み取り専用。予定の追加や変更はGoogleカレンダー側で行い、ダッシュボードで表示する。色もこちらで設定した色を使い、Google側の色変更を自動追跡する方式ではない。

外の天気と、部屋の温度・湿度を並べる

外の空模様と、今いる部屋の様子。知りたい情報は近くに並べながら、予報と測定値の違いは残している。

上が天気、真ん中が室内のグラフ

予定の次に見たいのが、外と部屋の状況。上のグラフは24時間の天気、中央が室内の温度・湿度、下が週間予報だ。ひとつの「温度」にまとめず、外の予報と、部屋で測った値を分けて見るようにしている。

見たいこと	見るところ
あとで雨が降りそう？	24時間予報の雨マークと雨量
昼と夜で、どれくらい気温が変わる？	外の気温の線
今、部屋はどのくらい暑い？	室内の温度表示
室内は乾燥している？ さっきと変わった？	湿度の数値と、温湿度の履歴

天気はOpen-Meteoという、天気予報の情報を受け取れるサービスを使っている。室内はSwitchBotから受け取った温度・湿度。見る場所は同じでも、情報の出どころは別々だ。

室内のグラフは「30分」「1時間」「6時間」「12時間」「24時間」などへ切り替えられる。今の数値だけでなく、少し前からどう変わったかも確認できる。現在のクラウド側の収集は2分間隔なので、秒単位の実況ではない。

ここが便利
予定を見た流れで、外の天気も部屋の様子も確認できる。知りたい情報を、アプリの境目を越えて近くに置ける。

ここでいう「室内の状況」は、接続しているセンサーが分かる範囲のこと。今の画面で扱っているのは温度・湿度で、部屋のあらゆる状態が分かるわけではない。

裏側で働くサービスと、APIの話

画面をまとめる裏側では、いくつかのサービスに役割を分けている。名前だけだと難しそうなので、まずは「何を担当しているか」で見ると分かりやすい。クラウドは、ここでは自分のPCの外にある、インターネット上のコンピューターくらいの意味だ。

使っているもの	ざっくりした役割
Cloudflare Workers	情報の取得や更新など、裏側の処理を動かす係。決めた間隔で動かすこともできる
Cloudflare D1	集めた情報や処理の記録をしまう保管庫。今回は室温の履歴や、表示用の情報などに使う
Vercel	作ったWeb画面を置き、ブラウザーから開けるようにする場所。必要な裏側の処理も動かす
Dropbox	Dueの同期用ファイルを受け渡す場所
GitHub	画面や仕組みのコードと変更履歴を保管する場所。生活情報を表示するアプリではない

たとえば室温は、Cloudflare側で定期的に集めて記録する。画面を閉じている間も、別の場所で集める処理を動かせる。画面を開いたら、その記録をグラフとして見せる、という役割分担だ。

APIって何？
API（エーピーアイ）は、ソフト同士が、決められた方法で情報を受け渡すための窓口。たとえば「この地域の天気を教えて」と頼むと、気温や雨の情報が返ってくる。

人が天気アプリを開いて数字を読む代わりに、プログラムがその窓口へ問い合わせる。その返事を、自分のダッシュボードに合う形へ並べる。流れはこんなイメージだ。

1. ダッシュボードの裏側から、欲しい情報を問い合わせる
2. サービスから、気温やタスクなどの情報が返ってくる
3. 受け取った情報を、一覧やグラフにして表示する

APIには、読むだけの窓口も、追加・変更するための窓口もある。TodoistではAPIを通じてタスクを取得・編集している。ただし、今回の連携が全部同じ方式というわけではない。Googleカレンダーは予定を読むためのiCalリンク、DueはDropbox上の同期用ファイルを利用している。

サービスを登録しただけで全部つながるわけではなく、間をつなぐ処理は必要になる。APIで許されている操作や、利用回数の制限もある。ここはAIに作業を任せる場合でも、実際の表示や操作結果を確かめながら進めるところだ。

接続情報は公開しない
APIキーやトークンは、サービスを使うための鍵。Googleカレンダーの非公開リンクも、予定を読める大事な情報なので、記事やスクショには載せない。

大きな画面でも、スマホでも

同じ情報を見せる場合でも、大きな画面と小さな画面で読みやすい配置は違う。

スマホでは、見たい情報を選ぶ

リビングの大きな画面では、情報を並べて見渡したい。スマホでは、必要なものを読みやすい大きさで見たい。同じ情報でも、画面の広さによって見せ方は変えられる。

いまは「一覧」と「切り替え」の2種類を用意している。切り替え表示では、下のボタンから「タスク」「カレンダー」「天気・室温」を選ぶ。設定で選んだ表示は、そのブラウザーに保存される。

表示	向いている見方
一覧	タスク・予定・天気・室内を並べて、全体を見る
切り替え	小さい画面で、今見たい情報に集中する

スマホ幅のカレンダーは、同じ12日間でも4日ずつ3段。大きな画面の6日×2段を、そのまま小さく縮めているわけではない。画像のように長い予定名は省略されるので、何をどれくらい大きく見せるかは、これからも使いながら調整する部分だ。

俺が作りたかったもの
DueもTodoistも使いながら、カレンダーは自分の見やすい形に。天気や部屋の情報も並べて、自分に必要なものが集まる画面にしたかった。

プログラミングができない俺でも、「どの情報を一緒に見たいか」「何が小さくて読みにくいか」は考えられる。そこを言葉にして、AIと一緒に少しずつ形にしていく。アプリをまたいで、自分の暮らしに合わせた入口を作れるのが、このリビングダッシュボードの面白さだ。

※この記事は自分用に作った仕組みの紹介。冒頭の実機写真はデモ画面を表示して撮影したもの。各機能のスクショは2026年11月7日時点のローカル画面にデモデータを入れたもので、スマホ画像もスマホ相当の表示幅での撮影。各サービスの全機能や、全端末での動作を示すものではない。サービス説明は同日確認の公式情報を参照し、本文中のサービス名から確認できる。