UrlSnap — ウェブページ瞬間スクリーンショット＆PDF保存ツール

## 1. アプリの目的・ターゲットユーザー
URLを入力するだけで、そのウェブページのビジュアルプレビュー情報（OGP画像・タイトル・説明・ファビコン）を即座に取得し、カスタマイズ可能なサマリーカードとしてPNG/PDFで保存・共有できる無料ツール。「あとで見返したいページを手軽に記録したい」「クライアントにサイトイメージを共有したい」「競合サイトをまとめて記録したい」ユーザーが主なターゲット。ブロガー、Webデザイナー、マーケター、学生のリサーチ作業に役立つ。

## 2. 主要機能
- **URLサマリーカード生成**: URL入力後にPHPでOGPメタタグ（og:title / og:description / og:image / favicon）をスクレイピングし、カード形式でプレビュー表示
- **一括登録**: 複数URLを改行区切りで貼り付けて最大10件を一度にカード化するバッチ処理
- **カードカスタマイズ**: タイトル・説明文を手動編集、カテゴリタグ・メモの追記、背景カラーテーマ（6色）選択
- **PNG/PDFエクスポート**: html2canvasでカード画像をPNGダウンロード、複数カードをまとめてA4 PDF化（jsPDF使用）
- **コレクション管理**: LocalStorageにカードをブックマーク保存し、タグ・日付・カテゴリでフィルター＆並び替え
- **公開共有URL発行**: PHPでMySQLにカードデータを保存し、/share/{id} の短縮URLを生成。閲覧のみの共有ページを自動生成

## 3. 画面構成
### トップ画面（index.php）
- ヘッダー: ロゴ「UrlSnap」＋使い方3ステップ（入力→カード化→保存）
- 入力エリア: 大きなテキストエリア（URL複数入力可）＋「カード生成」ボタン
- 生成結果エリア: OGP画像・ファビコン・タイトル・説明・ドメイン名を並べたカードを横スクロールで表示
- 各カードに「編集」「PNG保存」「コレクションに追加」「削除」ボタン
- フッター: 利用上の注意（外部サイトへのアクセスが発生する旨）

### コレクション画面（/collection）
- LocalStorageから読み込んだ保存済みカード一覧をグリッド表示
- 上部にタグフィルター、ソート（登録日・ドメイン名・カテゴリ）
- 「全件PDF出力」ボタン
- カード右上に共有ボタン → MySQLへ保存して共有URLをクリップボードコピー

### 共有ページ（/share/{id}）
- 共有URLにアクセスすると保存済みカードをビューモードで表示（編集不可）
- 「自分のコレクションにコピー」ボタン
- SNS共有ボタン（Twitter/X、LINE）

### APIエンドポイント（/api/fetch.php）
- URL受け取り → file_get_contents or cURLでHTMLをフェッチ → OGPタグをDOMDocumentでパース → JSON返却
- タイムアウト5秒、robots.txt無視しない設計、エラー時はフォールバック表示

## 4. データ構造
### テーブル: shared_cards
```
id INT AUTO_INCREMENT PRIMARY KEY
share_id VARCHAR(12) UNIQUE -- ランダム12文字の共有ID
cards_json MEDIUMTEXT -- カード配列のJSONシリアライズ
created_at DATETIME
expires_at DATETIME -- 作成から90日後に自動失効
view_count INT DEFAULT 0
```
※コレクション管理はLocalStorageのみ（DB不要）。共有機能のみMySQLを使用。

## 5. デザインの方向性
- カラーパレット: ダークネイビー（#0F172A）背景＋電気ブルー（#3B82F6）アクセント＋白カード。SNSのリンクプレビューに似た親しみやすいUI
- フォント: 日本語はNoto Sans JP（Google Fonts）、英数字はInter
- カードサイズ: PC幅360px・スマホ幅100%のレスポンシブカード
- アニメーション: カード生成時にフェードイン＋スケールアップ（CSS transition）
- SNSシェア映えする理由: 「〇〇のページをまとめました」とPNGカード1枚で視覚的に伝えられるため、Twitterでの情報共有記事と相性が良く拡散を狙いやすい
- 全体的にシンプル・クリーンで、初回アクセスでも操作に迷わない設計を優先する