AstroでGitHub風の勉強ログカレンダーを作る

結論

Google Calendar APIで学習時間を取得し、Astroのビルド時にGitHubの「草」のようなカレンダーとして静的HTMLにレンダリングするコンポーネントを構築できる。

Googleカレンダーの予定から学習時間を自動で集計し、GitHubの「草」のようなカレンダー形式で表示するコンポーネントを作成した。 学習の記録を可視化することで、モチベーションの維持に繋げるための取り組みである。

合計勉強時間: 201.5 時間 (2026年)

Mon

Wed

Fri

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Less

More

※ 4時間以上で最大、30分以上4時間未満は色付き

GitHubでソースコードを見る

技術的な仕組み

このカレンダーは以下の仕組みで動作している。

1. Astro (SSG): ビルド時に Google Calendar API を叩いてデータを取得し、静的なHTMLとして書き出す。
2. Google Calendar API: 特定のカレンダーから予定を取得し、日付ごとに合計時間を集計する。
3. GitHub Actions: 1日1回、深夜に自動でビルド・デプロイを実行することで、毎日最新の学習ログが反映される。

セットアップ手順

詳細な手順はGithubリポジトリのREADMEを参照すること。

1. Google Cloud Console での準備

   • Google Cloud コンソールでプロジェクトを作成。
   • Google Calendar API を有効化。
   • APIキー を発行。

2. Googleカレンダー側の設定

   • カレンダーの設定で「一般公開」を有効にする。
   • 「カレンダー ID」をコピー。

3. 環境変数の設定 GitHubの Repository secrets または .env に設定する。

   GOOGLE_CALENDAR_API_KEY="あなたのAPIキー"
   PUBLIC_GOOGLE_CALENDAR_ID="あなたのカレンダーID"

まとめ

• Googleカレンダーの予定データを元に学習時間を集計し、GitHub風カレンダーコンポーネントとして表示できる。
• AstroのSSGとGitHub Actionsを組み合わせることで、定期的に静的サイトとして更新される仕組みを実現できる。