GitHubの草を「ドラゴン育成ゲーム」に変えるアプリを作った
はじめに
GitHubの草（コントリビューショングラフ）、続けられていますか？
私は何度も途切れました。
「連続記録を守る」だけではモチベーションが続かない。
もっと楽しく、ゲーム感覚で続けられないか？
そう思って作ったのが Commit Dragon です。
🔗 https://commit-dragon.vercel.app/
どんなアプリ？
GitHubアカウントを連携すると、あなた専用のドラゴンが生まれます。
コミットするたびにドラゴンが経験値を獲得し、成長していきます。
主な機能
🥚 ドラゴン育成
- 最初は卵からスタート
- コミットでEXPが貯まる
- レベルアップで進化（卵 → 子供ドラゴン → 大人ドラゴン）
🎲 ガチャシステム
- コミットで貯まるジェムでガチャが引ける
- レアなドラゴンをコレクション
📊 GitHub連携
- GitHubアカウントでログイン
- コミット履歴を自動で取得
なぜ作ったか
正直に言うと、自分のために作りました。
プログラミングの勉強を始めた頃、「毎日コミットする」という目標を立てました。
でも、緑のマスが増えるだけでは達成感が薄い。
「もし自分のキャラクターが育つなら、もっと続けられるのでは？」
この発想から Commit Dragon が生まれました。
技術スタック
| 技術 | 用途 |
|---|---|
| Next.js (App Router) | フロントエンド・API |
| Neon | データベース・認証 |
| GitHub API | コミット情報取得 |
| Vercel | ホスティング |
技術選定の理由
Next.js を選んだのは、フロントエンドとAPIを1つのプロジェクトで管理できるから。個人開発では開発スピードが重要なので、この選択は正解でした。
Neon は無料枠がある程度あるので、セットアップが簡単なのが魅力でした。URLと繋げてmigrationしただけで利用を開始することができました。
工夫した点
1. ピクセルアートのデザイン
レトロゲーム風のピクセルアートを採用しました。
「育成ゲーム」という世界観に合うし、個人開発でも作りやすい。
2. シンプルな仕組み
最初は複雑な機能を考えていましたが、削ぎ落としました。
- コミットする → ドラゴンが育つ
この 1つのループ だけに集中しています。
3. すぐに始められる
GitHubでログインするだけ。
面倒な設定は一切ありません。
苦労した点
GitHub APIのレート制限
GitHub APIには1時間あたりのリクエスト制限があります。
ユーザーが増えた時のことを考えて、キャッシュ戦略を工夫しました。
ドラゴンの成長バランス
「簡単すぎると飽きる、難しすぎると挫折する」
このバランス調整が一番難しかったです。
現在も調整中で、フィードバックをもらいながら改善しています。
シンプルにAIを使って作成すればいいのではと思われる方もいらっしゃるかもしれません。
しかし同じ色合いやキャラの雰囲気を崩さずに進化系を出してもらうのはまだ難しそうでした(いいやり方があれば教えて欲しいです)
そのため、アプリ内で使用されているドラゴンは全て手書きとなっております(正直ここが一番大変でした。。。)
今後の予定
- 🐉 新しいドラゴン、アイテムの追加
- 🏆 ランキング機能
おわりに
「GitHubの草を続けたい」という自分の課題を、自分で解決するアプリを作りました。
もし同じ悩みを持っている方がいたら、ぜひ試してみてください。
🔗 https://commit-dragon.vercel.app/
フィードバックや感想は Twitter（X）でいただけると嬉しいです！
👉 @watari090164
最後まで読んでいただきありがとうございました。
「いいね」していただけると励みになります 🙏
Discussion