GitHub Contributionを経験値にしたら、開発者向けSNSみたいになった
Codex開発で収益化するまで #5。
前回まで、いくつかのWebサービス案を試していました。
ただ、作っていて気付いたことがあります。
「実用性」だけでは、開発が続かない。
個人開発って、結局は“自分が触りたくなるか”がかなり重要でした。
そこで今回は、完全に方向性を変えます。
テーマは、
GitHub Contribution RPG
です。
GitHubの草を、
そのまま“経験値”として扱う。
- commitするとレベルが上がる
- 連続commitでstreakボーナス
- 深夜commitすると「狂戦士」の称号
そんな、半分ネタみたいな発想からスタートしました。
でも考えているうちに、
「これ、学習継続サービスとして成立するのでは？」
と思い始めました。
なぜGitHubなのか
開発者って、GitHubの草を妙に気にします。
自分もそうです。
- commitした
- 緑が増えた
- streakが続いた
それだけで少し嬉しい。
つまりGitHub Contributionって、
既に“ゲームのスコア”に近い。
だったら、最初からゲーム化してしまおうと思いました。
今回作るもの
今回のテーマは、
「GitHubメインの学習支援サービス」
です。
- 白背景ベース
- 黒文字中心
- 一部にドット絵のようなピクセル感
- レトロRPG感
- でも子どもっぽくはしない
適度な余白感と、
レトロなゲームのワクワク感を混ぜるイメージです。
まずはベース画面から
まだGitHub API連携はしません。
まずは、
「この世界観、触ってみたい」
と思えるUIを作ります。
今回の初期構成はこんな感じです。
- ユーザーステータス
- Contribution Quest Map
- 学習時間グラフ
- Achievement
- 将来的なソーシャル機能
特にContribution Mapは、
単なる草ではなく“ダンジョンマップ”として見せたい。
実際に作り始める
まずはViteで React + TypeScript 環境を作成。
bash npm create vite@latest codequest -- --template react-ts
開発を始める瞬間って、毎回ちょっと楽しい。
まだ何もないのに、
なぜか可能性だけはある。
CodexにUIを作らせる
今回はCodexにかなり細かく指示を出しました。
ただの学習管理アプリではなく、
「GitHub ContributionがRPGのマップになるワクワク感」
を最優先にしています。
ここから、
どこまで“開発を継続したくなるUI”を作れるか試してみます。
現時点
まだベース画面のみです。
しかも一度も指示して修正を加えていない、初期のUIです。
でも、個人的にはかなり好きな方向に進み始めています。
開発って、
完成した瞬間より、
「これ面白くなるかもしれない」
と思えた瞬間が一番楽しいのかもしれません。
次回
次回は、
Contribution Mapを実際にRPG化していきます。
- commitで経験値
- streakボーナス
- 実績システム
- GitHub連携
この辺りを少しずつ形にしていく予定です。