Skip to content

Spec.md

Latest commit

 

History

History
128 lines (92 loc) · 5.01 KB

Spec.md

File metadata and controls

128 lines (92 loc) · 5.01 KB
Raw

📘 アプリケーション仕様書：GraphHub

1. 概要

GraphHub は、GitHub アカウントでログインしたユーザーが、任意の GitHub ユーザーを指定し、そのフォロー関係を動的なネットワーク図として可視化できるアプリケーションです。フォロー・フォロワー情報をもとに、それぞれのユーザーをノードとして描画し、関係性を矢印で表現します。

2. 主な機能

2.1 GitHub ログイン（必須）

  • GitHub OAuth を使ったログイン機能（NextAuth.js）
  • アクセストークンを利用し、GitHub API の高レート（5000 req/h）で操作可能

2.2 ユーザー入力

  • 入力欄で任意の GitHub ユーザー名を指定（バリデーションあり）

2.3 GitHub データ取得

  • GET /users/:username/followers（最大100件/ページ）
  • GET /users/:username/following
  • 各ユーザーの以下情報を取得：
    • ユーザー名（login）
    • アイコン（avatar_url）
    • プロフィールURL（html_url）

2.4 ネットワーク図描画（中心＝対象ユーザー）

  • 中央に対象ユーザー（入力されたユーザー）
  • 周囲にフォロワー／フォロー中ユーザーをノードとして配置
  • 各ノードには以下を表示：
    • GitHubのアバター画像
    • ユーザー名（ホバーまたは下部）
  • エッジ（線）のルール：
    • 相互フォロー（両方向）：⇔ 両矢印
    • フォロー中のみ：→（対象ユーザー → 他ユーザー）
    • フォロワーのみ：←（他ユーザー → 対象ユーザー）
  • 色分け（オプション）：
    • 相互フォロー：紫
    • フォロー中：緑
    • フォロワー：青

3. 技術構成（T3 Stack）

層 使用技術 内容
フロントエンド Next.js, TypeScript, Tailwind CSS UI構築、入力、ページ遷移
バックエンド tRPC GitHub APIラッパーとして機能
認証 NextAuth.js（GitHub） GitHubログイン用、トークン取得
ネットワーク描画 vis-network（推奨）, Cytoscape.js インタラクティブなネットワーク図
HTTPクライアント axios GitHub API通信
状態管理 React hooks / zustand 入力値、選択中ノード等の管理
デプロイ Vercel CI/CD対応のクラウドホスティング

4. 画面仕様

4.1 ログイン画面

  • 「GitHubでログイン」ボタン
  • ログイン完了後、トップページへリダイレクト

4.2 トップ画面

  • GitHubユーザー名の入力欄
  • 「相関図を表示」ボタン
  • ローディング中表示
  • エラー通知（無効なユーザー名、APIエラーなど）

4.3 相関図画面

  • 対象ユーザーを中心にネットワーク表示
  • ノード：ユーザーアイコン＋名前（クリックで再描画）
  • エッジ：
    • ⇔（相互フォロー）
    • →（対象が他をフォロー）
    • ←（他が対象をフォロー）
  • 操作性：
    • ズーム・パン対応
    • ノードクリックで他ユーザーの図に遷移

5. GitHub API 制限と対応

問題 対応策
無認証状態でのレート制限（60件/時） GitHubログインでトークン取得し、5000件/時に緩和
多すぎるフォロワー数 初期取得数制限（例：30件ずつ、設定可能）
非公開ユーザー API上取得不能、表示しないよう除外

6. 今後の拡張案

  • 二次・三次ネットワーク展開（フォロワーのフォロワー）
  • ノードクリック時のプロフィール詳細表示
  • 相関図のPNG/SVGエクスポート
  • ダークモード切り替え
  • 履歴機能（最近表示したユーザー）

7. ネットワーク構成例（図示）

                ↖︎           ↑            ↗︎
          [follower]   [⇔]   [follower+followed]
                ↙︎           ↓            ↘︎

                          [You]
                            ⇧
                           ↓
                     [followed]

8. 備考

  • 相関図の描画は useEffect + vis-network でDOMマウント後に初期化
  • avatar画像サイズは50px前後推奨
  • ユーザー名はリンク付きにする（GitHubプロフィールへ）