# 全体アーキテクチャ

## 技術スタック比較

| 項目 | steam | youtube | pico | raw |
|---|---|---|---|---|
| **フロントエンド** | Next.js 16 + React 19 | Vanilla JS (生成HTML) | Vanilla JS (単一HTML) | Vanilla JS (HTML/CSS/JS分離) |
| **バックエンド** | Next.js Server Components | Python http.server | なし (静的ファイル) | Node.js/Express + PHP |
| **スクレイパー** | Steam検索API (TS, サーバーサイド) | YouTube Data API v3 (Python) | Piccoma/LINE Manga (Python) | 4サイト並列 (Python/aiohttp) |
| **データ保存** | なし (リアルタイム取得) | JSON (.cache/) | CSV + JSON (csv/) | JSON (data/) |
| **状態管理** | URL検索パラメータ | localStorage | localStorage | サーバーサイド JSON |
| **言語** | TypeScript | Python + JavaScript | Python + JavaScript | JavaScript + PHP + Python |
| **ビルドツール** | Tailwind 4, PostCSS, ESLint | なし | なし | なし |
| **ポート** | 3000 | 18936 | なし | 3000 |

## デザインテーマ

| プロジェクト | テーマ | 背景色 | アクセント色 | フォント |
|---|---|---|---|---|
| steam | Steam公式ダーク | `#171a21` | `#1a9fff` (Steam Blue) | Arial, Helvetica |
| youtube | YouTube風ダーク | `#0f0f0f` | 機能別 (赤/青/緑/紫) | system-ui, sans-serif |
| pico | 紫グラデーション | `#667eea → #764ba2` | 紫 | system-ui, sans-serif |
| raw | 紫グラデーション | `#667eea → #764ba2` | 紫 | Noto Sans JP |

## 共通パターン

### 1. データ収集パターン
全プロジェクトが外部サイト/APIからデータをスクレイピング・取得する構成。

```
[外部サイト/API] → [Pythonスクレイパー or Next.js fetch] → [ローカルデータ保存] → [フロントエンド表示]
```

- steam: Steam検索APIからリアルタイム取得（サーバーサイドfetch、5分キャッシュ）
- youtube: YouTube Data API v3 → JSON キャッシュ（24時間TTL）
- pico: Piccoma/LINEマンガ HTML → CSV/JSON（手動実行）
- raw: 4サイトHTML → JSON（手動 or API経由実行）

### 2. クライアントサイドフィルタリング
全プロジェクトで、取得したデータをブラウザ側でフィルタリング・ソート・検索する設計。

- steam: ゲーム名検索、プラットフォーム、ソート5種、ページネーション (100件/ページ)
- youtube: チャンネル、種別、除外/含むキーワード、再生時間、日付、視聴済み
- pico: タイトル/概要検索、カテゴリ、ジャンル、曜日、話数範囲、既読
- raw: タイトル/作者検索、ステータス、サイト、評価、ソート、ページネーション (50件/ページ)

### 3. 日本語UI
全プロジェクトがUI・データとも日本語。外部APIも日本語リージョン指定（Steam: `cc=JP, l=japanese`）。

### 4. レスポンシブデザイン
全プロジェクトがモバイル対応のレスポンシブレイアウトを実装。

## ホスティング・URL

| プロジェクト | ホスト | 本番URL | ローカルポート |
|---|---|---|---|
| steam | Vercel | `https://steam-deals-chi.vercel.app` | 3000 |
| youtube | Star Server | `http://ss919008.stars.ne.jp/rodoku/` | 18936 |
| pico | Star Server | `http://ss919008.stars.ne.jp/pico/` | — |
| raw | Star Server | `http://ss919008.stars.ne.jp/raw/` | 3000 |
| ポータル | Star Server | `http://ss919008.stars.ne.jp/` | — |

> ローカル開発時、steam と raw はどちらもポート3000を使用。`PORT=3001 npm start` で回避可能。

## データ管理

| プロジェクト | 保存先 | フォーマット | サイズ | gitignore |
|---|---|---|---|---|
| steam | なし | リアルタイム | — | — |
| youtube | `.cache/` | JSON (チャンネル別) | ~数MB | `rodoku/.cache/` |
| pico | `csv/` | CSV + JSON | ~250MB | `pico/csv/` |
| raw | `data/` | JSON (統合 + サイト別) | ~87MB | `raw/data/` |

大容量データファイルはすべて `.gitignore` で除外済み。