UrlCapture - Webページ瞬間スクショ＆PDF保存ツール

## 1. アプリの目的・ターゲットユーザー

URLを入力するだけで、対象Webページのスクリーンショット（PNG）とPDF風レイアウトをブラウザ内でプレビュー・保存できる無料ツール。「あのページが消える前に保存しておきたい」「競合サイトをまとめて記録したい」「SNSで話題になったページを手軽に証跡保存したい」という個人・ビジネスユーザー向け。

**ターゲット：** Webリサーチャー、フリーランサー、競合調査担当者、ブロガー、学生、一般ユーザー

---

## 2. 主要機能

- **URLスナップショット取得：** PHPのcurlでページHTMLを取得し、サーバー側でmPDF or wkhtmltopdf/headless-chrome系ライブラリを使わず、DOMPurifyで安全にHTMLをiframe表示 → Canvas/html2canvas.js（CDN）でPNG化する純JS方式。外部APIキー不要。
- **カスタムキャプチャ設定：** デバイス幅プリセット（PC=1280px / タブレット=768px / スマホ=375px）を選択し、表示幅を変えてキャプチャ可能
- **注釈・マーキング機能：** キャプチャ画像の上に矢印、四角囲み、テキストメモをCanvasで重ねて書き込み、仕上がりをPNGでダウンロード
- **スナップ履歴管理：** キャプチャしたURL、取得日時、サムネイル、メモをLocalStorageに最大30件保存。一覧表示・削除・再スナップに対応
- **共有カード生成：** URL・取得日時・サムネイル・メモを組み合わせたOGP風カード画像（PNG）を生成し、SNS投稿や報告書に貼れる素材としてワンクリックダウンロード
- **フォールバック表示：** アクセス不可・CORSブロック時はOGPメタ情報（タイトル・説明・OG画像）のみ取得してカード表示するセーフモードに自動切替

---

## 3. 画面構成

### トップページ（index.php）
- 大きなURL入力フォーム（中央配置）
- デバイス幅プリセット選択（PC/タブレット/スマホ）
- 「スナップ取得」ボタン
- 直近の履歴サムネイル一覧（最大6件）

### スナップ結果画面（result.php or モーダル）
- 左：キャプチャプレビュー（スクロール可能なiframe or canvas画像）
- 右上：PNG保存 / 共有カード生成 / OGP情報表示エリア
- 右下：注釈ツールバー（矢印・四角・テキスト・カラー・消去）
- 「履歴に保存」ボタン + メモ入力欄（20文字以内）

### 履歴ページ（history.html or サイドパネル）
- グリッドカード形式で保存済みスナップ一覧
- URL・取得日・メモを表示
- カード右上：削除ボタン / 再スナップボタン
- 全クリアボタン

---

## 4. データ構造

**DBなし。LocalStorageのみで完結。**

```json
[
{
"id": "uuid",
"url": "https://example.com";,
"title": "ページタイトル",
"description": "OGP説明文",
"ogImage": "https://...";,
"thumbnail": "data:image/png;base64,...",
"deviceWidth": 1280,
"memo": "競合A社のTOP",
"savedAt": "2025-07-01T12:00:00Z"
}
]
```

**PHP側処理（proxy.php）：**
curlでURL先のHTMLとOGPメタタグを取得し、JSONで返すシンプルなプロキシ。サーバー内キャッシュは不要（セッションレス）。

---

## 5. デザインの方向性

- **カラーテーマ：** ダークネイビー（#0F172A）×エレクトリックシアン（#22D3EE）のクールなUIを基調
- **スタイル：** グラスモーフィズム風カード、角丸16px、shadow-lg。ツールバーアイコンはSVGインラインで実装
- **フォント：** 日本語はNoto Sans JP（Google Fonts）、コードや数値はJetBrains Mono
- **レスポンシブ：** モバイルでは1カラム、PCでは左プレビュー 70% + 右パネル 30% の2カラムレイアウト
- **マイクロアニメーション：** スナップ取得中のローディングは回転リングアニメ、履歴カードはフェードイン
- **SNS訴求ポイント：** 共有カードのデザインをおしゃれに仕上げ「こんな使い方できる！」とSNS拡散を狙う。URLと取得日時＋メモが入ったスタイリッシュなカードはX(旧Twitter)やInstagramでそのまま投稿できるサイズ（1200×630px）に対応