GitHubのコントリビューションカレンダーで活動履歴は確認できます。ただ、それが都市の景観として広がり、他の開発者の建物と並んで立つとしたら——その体験を実現したOSSが「Git City」です。

この記事でわかること：

  • GitHubのどのデータが建物のどの部分に対応するか
  • フライトモード・比較モードなど主な機能の内容
  • セルフホスティングの手順と必要な設定
  • AGPL-3.0ライセンスの注意点

GitHubプロフィールが3D都市になる

GitHub - srizzon/git-city: Your GitHub profile as a 3D pixel art building in an interactive city
Your GitHub profile as a 3D pixel art building in an interactive city - srizzon/git-city
GitHub

Git Cityは、GitHubユーザーのプロフィールを3Dピクセルアートの建物に変換し、インタラクティブな都市として描画するOSSプロジェクトです。GitHubの公式アカウントが紹介したことで注目を集め、2026年4月時点でのスター数は5,200を超えています。作者は@samuelrizzondev氏で、公開サービスとして thegitcity.com でも利用できます。

GitHubには活動量を示すコントリビューションカレンダーがありますが、複数の開発者を直感的に比較したり、全体的な活動規模を把握したりするには向いていません。Git Cityはこの課題を3Dビジュアライズで解決します。自分の建物の高さや広さを、他の開発者と並べて一目で確認できます。

コントリビュートがどう建物に変わるか

建物の外見は4つのGitHubデータに基づいて決まります。

データ 建物への反映
コントリビュート数 建物の高さ
パブリックリポジトリ数 建物の幅
スター数 窓の明るさ
最近の活動量 窓の点灯パターン

描画にはThree.jsと@react-three/fiberを使用しています。近くの建物は窓のアニメーション付きの詳細メッシュで描画し、遠くの建物は簡略化されたジオメトリに切り替える「LOD（Level of Detail）」方式を採用しています。多数のユーザーが密集した都市でもパフォーマンスを維持できる設計です。

主な機能

フライトモードは都市を自由に飛び回れるカメラ操作機能です。建物をクリックするとその開発者のプロフィールページへ移動し、スタッツや保有リポジトリを確認できます。

比較モードでは2人の開発者を並べて、建物のサイズと各種スタッツを対比できます。採用候補の技術力を視覚的に確認したり、友人と競い合うといった使い方ができます。

アチーブメントシステムは、コントリビュート数・スター数・リポジトリ数・紹介数などの条件を達成するとアンロックされます。

建物カスタマイズでは、自分の建物を「クレーム（所有宣言）」してから、クラウン・オーラ・屋根エフェクト・顔の装飾などのアイテムをショップで設定できます。他の開発者へアイテムをギフトしたり、kudosを送ったりするソーシャル機能も備えています。

シェアカード機能を使うと、プロフィールをランドスケープまたはストーリーズ形式の画像としてダウンロードできます。ポートフォリオやSNSへの貼り付けに活用できます。

セルフホスティングの手順

リポジトリをクローンして依存パッケージをインストールします。

git clone https://github.com/srizzon/git-city.git
cd git-city
npm install

.env.example をコピーして .env.local を作成し、以下の変数を設定します。

  • NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY / SUPABASE_SERVICE_ROLE_KEY — SupabaseのProject Settings → APIから取得
  • GITHUB_TOKEN — GitHub Settings → Developer settings → Personal access tokensから発行（Fine-grained推奨）

データベースとOAuth認証にはSupabaseを使います。GitHubログインを動作させるには、SupabaseコンソールでGitHub OAuthプロバイダーを設定し、ローカル開発用のコールバックURLを追加する必要があります。

npm run dev

起動後、http://localhost:3001 で都市の画面が表示されます。フレームワークはNext.js 16（App Router + Turbopack）、スタイリングはTailwind CSS v4を採用しています。

ライセンスについて

ライセンスはAGPL-3.0です。改変・使用は自由ですが、公開サーバーとして運用する場合はソースコードの公開が義務付けられます。社内ツールや業務用途での展開を検討する場合、AGPLの適用範囲についてあらかじめ確認しておくことをおすすめします。

まとめ

Git CityはGitHubの活動データを「都市」という形で可視化し、開発者同士のつながりや比較を直感的にします。コントリビュートを続けるほど建物が育つ仕組みは、活動へのモチベーション維持にも機能します。セルフホスティングも可能なので、プライベートな開発チーム向けに独自の都市を構築するといった活用方法も考えられます。