🪐

【技育CAMP vol.14 優秀賞】GitHubPlanet 〜あなたの活動を“惑星”にするWebアプリ〜

に公開
GitHub
JavaScript
Three.js
ハッカソン
GitHub API
idea

GitHub活動を3D惑星にする「GitHub Planet」を支える技術

はじめに

はじめまして！
先日開催された「技育camp vol.14」にて、優秀賞をいただくことができました！

今回開発したのは、「GitHub Planet」というWebアプリケーションです。これは、自分のGitHubでの活動が3Dの惑星として自動生成され、宇宙空間で鑑賞できるサービスです。

この記事では、GitHub Planetがどのようなサービスで、どのような技術で作られているのかを紹介します。

🚀 GitHub Planetとは？

GitHub Planetは、GitHubアカウントでログインするだけで、その人の活動データに基づいた世界に一つだけの惑星を生成するWebアプリケーションです。

「自分の開発の軌跡が、宇宙に浮かぶ一つの星になったら面白いのでは？」という着想から開発がスタートしました。日々の開発活動が可視化されることで、モチベーションの向上に繋がることを目指しています。

✨ こだわりの機能

生成される惑星は、いくつかのパラメータによってパーソナライズされます。

1. 惑星のカラー 🎨

惑星の色は、あなたのリポジトリで最も多く使用されているプログラミング言語（バイト数基準）によって自動的に決定されます。

  • JavaScript → 黄金色
  • TypeScript → 蒼色
  • Python → 深海色
  • HTML → 灼熱色

など、言語ごとにユニークなカラーが設定されています。

2. 惑星のサイズと周囲の星 🌟

惑星のサイズは、GitHubでの総コミット数に応じて大きくなります。

また、コミット数が増えるほど、惑星の周囲を公転する「星」の数も増えていき、惑星がより輝くようになります。

3. ユニークな惑星名 🏷️

生成された惑星には、その特徴（メイン言語、コミット数など）に基づいて「柔軟な黄金の巨星」や「堅牢な蒼穹の帝星」といったユニークな名前が自動で命名されます。

4. 宇宙の探索 🔭

自分の惑星だけでなく、他のユーザーの惑星を「ユーザー名検索」や「ランダム検索」で訪れることも可能です。

💻 使用技術スタック

このアプリケーションは、以下の技術スタックで構築されています。

3D描画 (フロント): Three.js

惑星、星々、宇宙空間のリアルタイム3Dレンダリングに使用しています。

アニメーション (フロント): anime.js

惑星が登場する際のダイナミックなアニメーション演出に使用しています。

バックエンド: Node.js + Express

GitHub OAuth認証、データ処理、APIエンドポイントの提供を担当しています。

データベース: PostgreSQL

ユーザーの惑星データを永続化するために使用しています。

認証: GitHub OAuth 2.0 (PKCE)

安全にユーザー認証とGitHubデータの取得を行います。

🔧 こだわりの技術ポイント

1. データ取得から惑星生成までの流れ

  • ユーザーが「星を誕生させる」ボタンを押すと、GitHub OAuth (PKCEフロー) で認証が開始されます。
  • 認証後、バックエンド (Node.js) がGitHub APIを叩き、ユーザーのリポジトリ情報（言語使用率、コミット履歴など）を取得します。
  • 取得したデータを分析し、惑星のパラメータ（色、サイズ、星の数など）を決定し、PostgreSQLに保存します。
  • フロントエンド (JavaScript) がAPI経由でこの惑星データを取得します。

2. Three.jsによる3Dビジュアライゼーション

フロントエンドでは、取得した惑星データをもとに Three.js を使って3Dオブジェクトを動的に生成します。

  • SphereGeometry で惑星の球体を生成。
  • MeshStandardMaterial にDBから取得した planetColor (惑星の色) を設定。
  • planetSizeFactor (サイズ) を planet.scale.set() に適用。
  • anime.js のタイムライン機能を使って、惑星が迫力満点に登場するアニメーション（衝撃波など）を実装しました。

おわりに

GitHubというエンジニアにとって身近な活動データを、Three.jsを使って3Dで表現するという試みは非常に楽しいものでした。技育campで優秀賞という形で評価いただけたことも、大きな自信になりました。

自分の星を眺めたり、友人の星を見に行ったりすることで、日々の開発が少しでも楽しくなれば幸いです。

デプロイもしてるのでみんな遊んでみてほしいです！

https://githubplanet.onrender.com/

githubのリポジトリもあるのでもよかったらstarsください！

https://github.com/nitr0yukkuri/githubplanet

Discussion