git-city-3d-github-visualization は何をしますか？
Git Cityを構築・拡張する — GitHubプロフィールがインタラクティブな建物になる3Dピクセルアート都市をNext.js、Three.js、Supabaseで作成します。
概要
このスキルを使用すると、GitHubプロフィールデータを取得し、それぞれのユーザーを3D都市の建物としてレンダリングできます。各建物の高さはコントリビューション数やリポジトリ数などのメトリクスに基づいて動的に変化し、色は言語やアクティビティレベルを反映します。
技術スタック
- Next.js: フロントエンドフレームワーク（App Router）
- Three.js: 3Dレンダリングエンジン
- Supabase: バックエンドデータベースと認証
- GitHub API: ユーザープロフィールデータの取得
セットアップ手順
-
リポジトリをクローンします:
git clone https://github.com/aradotso/git-city-3d-github-visualization.git cd git-city-3d-github-visualization -
依存関係をインストールします:
npm install -
環境変数を設定します:
cp .env.example .env.local # .env.local を編集して、SupabaseのURLと匿名キー、GitHubのアクセストークンを設定します -
開発サーバーを起動します:
npm run dev -
ブラウザで http://localhost:3000 を開きます。
使い方
- 建物の追加:
src/app/api/buildingsエンドポイントを使用して新しい建物を追加します。GitHubユーザー名を指定すると、自動的にプロフィールデータが取得され、建物が生成されます。 - 都市のカスタマイズ:
src/components/CityScene.tsxを編集して、建物の外観、配置、アニメーションを変更します。 - データソースの拡張:
src/lib/github.tsでGitHub APIの呼び出しをカスタマイズし、新しいメトリクスを建物に反映させます。
拡張ガイド
新しい機能を追加するには、以下のファイルを参照してください:
src/components/Building.tsx: 個々の建物の3Dモデルを定義します。src/lib/supabase.ts: Supabaseとのデータ連携を管理します。src/app/page.tsx: メインページのレイアウトと状態管理を行います。
トラブルシューティング
- 建物が表示されない: 環境変数が正しく設定されているか確認してください。特に
NEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_ANON_KEYが必要です。 - GitHub APIの制限: 認証済みのリクエストではレート制限が緩和されます。
.env.localにGITHUB_TOKENを設定することをお勧めします。
ライセンス
MIT