🌱 GitHubの草が花に育つ!?「Contribution Flower」を作りました 🌸
GitHubを毎日使っていると、緑色の草(Contribution)がどんどん増えていくのを見るのが楽しいですよね。
でもその草が「花」になって育ったら、もっとワクワクすると思いませんか?
そこで作ったのが、GitHubの貢献を美しい花の成長に変えるWebアプリ「Contribution Flower」 です。
Github 👉 https://github.com/imshota1009/Push-up-counter/tree/main
🌼 どんなアプリ?
「Contribution Flower」は、あなたのGitHub活動を花の成長に見立てて可視化してくれるアプリです。
コントリビューションをすると、種 → 芽 → 葉 → 花 へと成長
プライベートリポジトリの貢献も反映(PATを利用)
花が咲いていくアニメーションをリアルタイムで楽しめる
つまり、あなたの日々の努力が、画面上で花開く瞬間を見られるんです 🌸
🙋 実際に使ってみた感想
自分のアカウントで試してみると、普段「草が埋まったな〜」で終わっていた日々の貢献が、花として成長していくのを見るだけでモチベーションが上がるんです。
「今日はどんな花になったかな?」と気になって、ついGitHubにプッシュしたくなる。
気づいたら草を育てるだけじゃなく、花を育てるのが楽しみになってました。
🚀 使い方
利用には GitHubのPersonal Access Token (PAT) が必要です。
アプリを開く
GitHubユーザー名 と PAT を入力
「花を育てる」をクリック
あなたの花がスクリーンに咲きます 🌸
PATの作り方はアプリ内に丁寧に説明があります。
🔒 セキュリティについて
PATはパスワード並みに重要!外部に共有しないでください
本アプリは入力したPATを ブラウザのlocalStorageのみに保存 します
外部サーバーには一切送信されないので安心です
🛠️ 技術的な裏側
フロントエンド: HTML5 + Tailwind CSS + JavaScript
データ取得: GitHub GraphQL API v4
アニメーション: JavaScriptとCSSで成長を表現
特にGitHub GraphQL APIを使うことで、公開・非公開を含めた正確なコントリビューション数を反映できるのがポイントです。
🌸 まとめ
GitHubの草が「花」として咲く瞬間は、見ていて本当に嬉しくなります。
「今日はどんな花が咲いたかな?」と確認するだけでも、モチベーションにつながるはずです。
👉 💪 My Contribution Flowerを今すぐ試す!
💡 今後は「季節ごとに花が変わる」「ランキングで競える」みたいな拡張もできそうでワクワクしています。
Discussion