🌻

🌱 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を今すぐ試す!

https://imshota1009.github.io/My-Contribution-Flower/

💡 今後は「季節ごとに花が変わる」「ランキングで競える」みたいな拡張もできそうでワクワクしています。

Discussion