# ピッコマ/LINEマンガ ランキングビューア

ピッコマとLINEマンガの作品をいいね数順にランキング表示する静的Webアプリケーション。

## 概要

- ピッコマ・LINEマンガの全作品情報をPythonスクレイパーで収集
- 148,430作品をいいね数順にランキング表示
- タイトル/概要検索、カテゴリ/ジャンル/曜日/話数フィルタ、既読管理
- サーバー不要の完全静的HTML（ブラウザで直接開く）

## 技術スタック

| 技術 | 用途 |
|---|---|
| Python 3 (requests, BeautifulSoup) | スクレイパー (piccoma_scraper.py, linemanga_scraper.py) |
| Vanilla JavaScript | フロントエンドUI・フィルタリング・CSV解析 |
| HTML/CSS (単一ファイル) | 全UIをindex.htmlに内包 |
| localStorage | 既読管理 (`piccoma_read_ids`) |

## ディレクトリ構造

```
pico/
├── index.html              # メインUI (HTML/CSS/JS 一体型, ~1200行)
├── piccoma_scraper.py      # ピッコマ スクレイパー (~429行)
├── linemanga_scraper.py    # LINEマンガ スクレイパー (~535行)
├── .vscode/
│   └── settings.json
└── csv/                    # スクレイピングデータ (gitignore対象)
    ├── index.json          # CSVファイルメタデータ
    ├── piccoma_all_*.csv   # ピッコマ全データ (~111MB)
    └── piccoma_all_*.json  # ピッコマ全データ JSON版 (~140MB)
```

## セットアップ

```bash
# スクレイパー実行（データ収集）
cd pico
pip install requests beautifulsoup4
python piccoma_scraper.py
python linemanga_scraper.py

# ビューア起動（サーバー不要）
# ブラウザで pico/index.html を直接開く
```

> ブラウザによっては `file://` でのCSV読み込みが制限される場合あり。その場合は `python -m http.server 8080` 等で簡易サーバーを利用。

## スクレイパー

### piccoma_scraper.py

ピッコマ (`piccoma.com`) からSMARTOON・出版漫画の全作品を取得。

- カテゴリ: SMARTOON, 出版漫画
- ソート: いいね数順 (K=popular), 新着順 (N=newest)
- 取得項目: 作品名, いいね数, 全話数, 連載日, URL, 画像, ID, 状態, 概要, ジャンル, カテゴリ

### linemanga_scraper.py

LINEマンガ (`manga.line.me`) から全作品を取得。

- 取得方法: 週間ランキングAPI + タグベースAPI
- ~45,000タイトル対応
- ピッコマと同一データ構造で出力（互換性確保）

## データフォーマット

### CSV列構成

```
作品名, いいね数, 全何話, 連載日, URL, 画像, ID, 状態, 概要, ジャンル, カテゴリ
```

### データ例

| 作品名 | いいね数 | 全何話 | 状態 | ジャンル | カテゴリ |
|---|---|---|---|---|---|
| 俺だけレベルアップな件 | 243,155,862 | 180 | 完結 | ファンタジー | SMARTOON |

### カテゴリ

- SMARTOON — ピッコマオリジナル縦読み
- 出版漫画 — 出版社作品
- WEBTOON — LINEマンガ縦読み
- LINEマンガ — LINEマンガ一般

## UI機能

### フィルタリング

| フィルタ | 種類 | 説明 |
|---|---|---|
| タイトル検索 | テキスト | 作品名で部分一致検索 |
| 概要検索 | テキスト | あらすじで部分一致検索 |
| カテゴリ | 選択 | SMARTOON, 出版漫画, WEBTOON, LINEマンガ |
| ジャンル | 選択 | データから動的生成 |
| 曜日 | 選択 | 月～日, 完結, 休載, 連載中 |
| 話数 | 範囲 | 最小～最大話数 |
| 既読 | 選択 | すべて, 未読のみ, 既読のみ |
| なろう系 | 選択 | 異世界/転生系フィルタ |

### 表示機能

- ソート可能テーブル（粘着ヘッダー）
- ランキング順位表示（金/銀/銅バッジ: 1～3位）
- モーダルポップアップ（作品詳細・カバー画像）
- ページネーション（50/100/200/500件）
- 統計表示（総件数、総いいね数、平均いいね数、平均話数、既読数）

### 既読管理

- チェックボックスで既読マーク
- localStorage (`piccoma_read_ids`) に永続保存
- 既読フィルタで未読のみ/既読のみ表示可能

## カラーテーマ

紫グラデーション:

| 要素 | 色 |
|---|---|
| 背景 | `linear-gradient(135deg, #667eea, #764ba2)` |
| カード | `#ffffff` (白) |
| テキスト | `#333` |
| ランキング金 | 金色バッジ |
| ランキング銀 | 銀色バッジ |
| ランキング銅 | 銅色バッジ |

## 注意事項

- JSONデータ (145MB) をブラウザで読み込むためメモリ消費が大きい
- 初回読み込みに数秒～十数秒かかる場合がある
- 大量データのためモバイルでのパフォーマンスに注意