UrlExpander — 短縮URL安全確認＆リンク情報一括チェッカー

## 1. アプリの目的・ターゲットユーザー
短縮URL（bit.ly / t.co / amzn.to など）やフィッシング疑惑リンクをクリックする前に、実際の遷移先URLと安全性を確認できる無料ブラウザツール。SNSで拡散されがちな怪しいURLを事前チェックする一般ユーザー、フリーランサー・会社員でメールの添付リンクを確認したい人、セキュリティ意識の高い20〜50代をメインターゲットとする。「URLをコピーしてここに貼るだけ」という手軽さでSNS拡散されやすい設計にする。

## 2. 主要機能
- **短縮URL展開**: PHPのcurl（CURLOPT_FOLLOWLOCATION無効 + レスポンスヘッダ取得）で301/302リダイレクト先を最大10ホップ追跡し、最終到達URLを表示
- **リダイレクトチェーン可視化**: 中継URLを矢印付きのステップリストで表示（bit.ly → 中間ドメイン → 最終先 のように段階表示）
- **ドメイン安全スコア**: 最終URLのドメインに対し、ドメイン年齢推定（WHOIS不要・URLパターン解析）、HTTP/HTTPSチェック、IPアドレス直打ちチェック、不審文字列パターン照合（内製ブラックリスト200件）の4指標で0〜100の安全スコアを算出しレベル（安全／注意／危険）を表示
- **URLメタ情報取得**: 最終URLのOGP（og:title, og:description, og:image）をサーバーサイドPHPで取得して表示し、リンク先の内容をクリック前に確認できる
- **一括チェック**: 最大10件のURLをテキストエリアに改行区切りで貼り付けると、全件を並列チェックして結果一覧テーブルを生成。CSVコピーボタンで結果を即コピー
- **チェック履歴**: LocalStorageに直近20件の確認結果を保存し、再確認・比較をワンタップで実行

## 3. 画面構成
### トップページ（index.php）
- ヒーローエリア: キャッチコピー「そのURL、本当に安全？クリック前に1秒チェック」＋単体入力フィールド＋チェックボタン
- モード切替タブ: 「1件チェック」「まとめてチェック（最大10件）」
- 結果パネル（非同期描画）:
- リダイレクトチェーン: ステップバッジ（短縮URL → 中間 → 最終先）
- 安全スコアメーター（0〜100の半円ゲージ、色分け: 緑/黄/赤）
- 4指標のアイコン付きチェックリスト
- OGPプレビューカード（サムネ・タイトル・説明）
- 最終URLのコピーボタン
- チェック履歴セクション（画面下部、LocalStorage読み込み）
- SNS共有ボタン: 「このツールをシェア」（結果ではなくツール自体の拡散を促す）

### 使い方ガイド（同一ページ内アンカー）
- よくある短縮URLサービス一覧と見分け方のミニ解説
- フィッシングURLの典型パターン3例

## 4. データ構造
**DBなし（LocalStorageのみ）**

### PHP側処理（api/check.php）
POSTリクエストでURLを受け取り、以下をJSON返却:
```
{
"chain": ["https://bit.ly/xxx";, "https://mid.example.com/";, "https://final.example.com/path";],
"final_url": "https://final.example.com/path";,
"is_https": true,
"is_ip_direct": false,
"domain_suspicious": false,
"blacklist_hit": false,
"score": 82,
"level": "safe",
"ogp": { "title": "...", "description": "...", "image": "https://..."; }
}
```

### 内製ブラックリスト（PHP配列）
既知フィッシングドメインパターン200件をPHPファイルにハードコード（外部API不要）

### LocalStorage スキーマ
```json
[
{
"id": "uuid",
"input_url": "https://bit.ly/xxx";,
"final_url": "https://...";,
"score": 82,
"level": "safe",
"checked_at": "2025-01-01T12:00:00"
}
]
```

## 5. デザインの方向性
- カラー: ダークネイビー（#0F172A）をベース、安全=エメラルドグリーン、注意=アンバー、危険=レッドのトラフィックライト配色
- フォント: Noto Sans JP（本文）+ 数字部分はモノスペース風
- スコアメーター: SVGの半円アークをCSSアニメーションで伸ばす演出（視覚的インパクト大・SNSスクショ映え）
- リダイレクトチェーン: ステップバッジを矢印でつなぐ横並びフローUI（スマホでは縦並び）
- カード型レイアウトで結果をすっきり見せ、スクリーンショットがそのままSNS投稿素材になるデザイン
- スマホファースト: 入力欄は全幅、ボタンは親指が届く位置に固定
- ローディング中はスキャン風アニメーション（プログレスバー＋「リダイレクトを追跡中...」テキスト）でユーザーを飽きさせない