URLプレビューカード生成ツール「LinkCard」— URLを貼るだけでOGP風カードを即生成・PNG保存

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

ブログ記事・YouTube動画・SNS投稿・ECサイトのURLを入力するだけで、OGP（Open Graph Protocol）情報を擬似的に取得・編集し、リッチなリンクプレビューカード画像（PNG）を生成できる無料ツール。

**ターゲットユーザー**
- ブロガー・メディア担当者（記事内の参照リンクをビジュアルカードで紹介したい）
- SNS運用担当・インフルエンサー（Xのリポスト・Instagramストーリーにリンクカードを貼りたい）
- 社内資料・提案書作成者（URLをカード形式でスライドに貼りたい）
- Notionや社内Wikiユーザー（リンクをビジュアル化したい）

**SNSで紹介されやすい理由**：「URLを貼るだけでおしゃれなカードが作れる」という体験は直感的にシェアしたくなるユーティリティ。完成画像をそのままSNS投稿に使えるため二次拡散も期待できる。

---

## 2. 主要機能

- **URL入力 → メタ情報自動取得**：PHPのfile_get_contents + DOMDocumentでOGタグ（og:title / og:description / og:image / og:site_name）をサーバーサイドでスクレイピング取得。取得失敗時は手動入力にフォールバック。
- **カードエディタ（リアルタイムプレビュー）**：タイトル・説明文・サイト名・アイキャッチ画像URL・カラーテーマ・フォントを自由に編集。変更がCanvas上に即時反映。
- **10種のカードデザインテンプレート**：横長バナー型 / 正方形型 / Twitterカード風 / ダークモード / パステル / モノクロ / グラデーション / ミニマル / マガジン風 / コードブロック風（tech系URL向け）。
- **PNG・SVGダウンロード**：HTML5 Canvasから高解像度PNG（2x）をワンクリック保存。SVGテキスト出力も対応。
- **ギャラリー公開（オプション）**：生成カードを公開ギャラリーに投稿でき、いいね数でランキング表示。「参考にされやすいカード」の発見と拡散を促進。
- **履歴のLocalStorage保存**：直近20件の生成履歴をブラウザに保存。再編集ワンクリック対応。

---

## 3. 画面構成

### (A) トップ / 生成ページ（メイン画面）
```
┌─────────────────────────────────────┐
│ 🔗 LinkCard — URLからカードを即作成 │
│ ┌─────────────────────────────────┐ │
│ │ https://example.com を貼り付け… [取得] │ │
│ └─────────────────────────────────┘ │
│ │
│ [テンプレート選択 10種 横スクロール] │
│ │
│ ┌──── リアルタイムプレビュー ────┐ │
│ │ [カード画像 Canvas描画] │ │
│ └──────────────────────────────┘ │
│ │
│ 編集パネル │
│ タイトル: [________________] │
│ 説明文: [________________] │
│ サイト名: [________________] │
│ 画像URL: [________________] │
│ テーマ色: [カラーピッカー] │
│ フォント: [ドロップダウン] │
│ │
│ [📥 PNGダウンロード] [🌐 公開ギャラリーに投稿] │
└─────────────────────────────────────┘
```

### (B) 公開ギャラリーページ
- 生成カードをタイル型グリッドで表示
- いいねボタン（セッション1回制限）
- 「このカードを元に編集」ボタンで生成画面へ引き継ぎ
- 新着順 / いいね順の切り替え

### (C) 履歴パネル（サイドバーまたはドロワー）
- LocalStorageから直近20件を表示
- サムネイル + URL略称で一覧
- クリックで再編集

---

## 4. データ構造

### DBテーブル（MySQL）

**`link_cards`**（公開ギャラリー用）
```
id INT AUTO_INCREMENT PRIMARY KEY
url VARCHAR(2048) -- 元のURL
title VARCHAR(300)
description TEXT
site_name VARCHAR(200)
image_url VARCHAR(2048) -- OGP画像URL
template_id TINYINT -- 1〜10 テンプレート番号
theme_color VARCHAR(7) -- #RRGGBB
font VARCHAR(50)
created_at DATETIME DEFAULT NOW()
like_count INT DEFAULT 0
is_public TINYINT DEFAULT 1
```

**`card_likes`**（重複いいね防止）
```
id INT AUTO_INCREMENT PRIMARY KEY
card_id INT
session_hash VARCHAR(64) -- SHA256(session_id)
created_at DATETIME DEFAULT NOW()
UNIQUE KEY uk_card_session (card_id, session_hash)
```

**ローカルストレージ（DBなし）**
- `linkcard_history`: 直近20件のJSON配列（url / title / description / template_id / theme_color）

---

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

- **キーカラー**：ディープインディゴ（#3730A3）× ホワイト。信頼感と洗練さを両立。
- **UI全体**：左ペインにフォーム・テンプレート選択、右ペインにリアルタイムプレビューの2カラム構成（スマホは上下縦積み）。
- **カードプレビュー**：HTML5 Canvas（600×315px / 600×600px のアスペクト比切り替え）でリアルタイム描画。フォントはGoogle Fonts CDN（Noto Sans JP / Inter 等）をCanvas用に動的ロード。
- **テンプレートセレクター**：横スクロール可能なミニサムネイルカード形式。ホバーでアニメーション拡大。
- **ダウンロードボタン**：目立つグラデーションCTA。押下後に「✅ 保存しました！」のトースト通知。
- **全体的な雰囲気**：ツール感を出しつつおしゃれ。「使ってみたい・紹介したい」と思わせるプロダクト感重視。Tailwind CSS（CDN）を使用。

---

## 6. 技術実装メモ（Atlasへ）

- **OGP取得API**：`api/fetch-og.php` にURLをPOSTし、PHPのcurlまたはfile_get_contentsでHTMLを取得 → DOMDocumentでmeta[property=og:*]を解析してJSONレスポンス。タイムアウト5秒。CORSやSSLエラー時はエラーメッセージを返して手動入力を促す。
- **Canvas描画**：`js/card-renderer.js` に描画ロジックを集約。テンプレートごとにdrawメソッドを持つクラスを実装。OGP画像は `api/proxy-image.php` 経由でBase64取得してCanvasに描画（クロスオリジン対策）。
- **PNG保存**：`canvas.toDataURL('image/png')` → `<a download>` でDL。
- **規模感**：PHP 5ファイル程度 + JS 3ファイル程度で完結する小規模構成。