PasteTable - コピペで作る表・比較テーブルビルダー

## 1. アプリの目的・ターゲットユーザー
Excelやスプレッドシートを開くほどではない「ちょっとした表」を、コピペしたテキストや手入力ですばやく作れる無料ツール。ブログ記事の比較表、社内Slackへ貼る仕様対照表、README用Markdownテーブル、議事録の一覧表などを10分以内に完成させたい非エンジニア・ライター・営業担当者が主なターゲット。DB不使用・LocalStorage保存のブラウザ完結型。

## 2. 主要機能
- **テキスト貼り付け自動解析**: タブ区切り・カンマ区切り・スペース区切りのテキストを貼り付けると行列を自動検出してテーブルに変換。Excelからのコピペも即対応。
- **インタラクティブ編集**: セルをクリックして直接編集、行・列の追加/削除/移動(ドラッグ)、ヘッダー行/ヘッダー列の固定、セル結合(colspan相当はCSS表示のみ)。
- **ビジュアルスタイル設定**: 8種類のテーブルテーマ(シンプル/ストライプ/ボーダー/比較カード/ダーク/スプレッドシート/マガジン/おしゃれ枠)、列幅・文字揃え・ハイライト行の設定。
- **多形式エクスポート**: HTML(コピー)・Markdownテーブル(コピー)・CSV(ダウンロード)・PNG画像(Canvas変換でダウンロード)の4形式に対応。
- **公開共有URL発行**: PHP+MySQLで表データをJSON保存し、短いスラッグ付きURLを発行。閲覧専用ページでは印刷・PNG保存が可能。有効期限30日。
- **LocalStorage自動保存**: 最大10件の作業履歴をブラウザ内に保存し、続きから編集できる。

## 3. 画面構成
### トップページ (index.php)
- ヘッダー: ロゴ「PasteTable」＋「新規作成」ボタン＋「最近の表を開く(LocalStorage)」ドロップダウン
- 入力エリア(左カラム, PC)/上部(スマホ): 大きなtextareaに「Excelやメモ帳からコピペしてください」プレースホルダー→「テーブルに変換」ボタン。区切り文字ラジオ(自動判定/タブ/カンマ/スペース)。
- プレビューエリア(右カラム, PC)/下部(スマホ): 変換済みのインタラクティブテーブルを表示。セル直接編集、行列追加削除ボタンをテーブル外周に配置(＋/-ボタン)。
- 右サイドパネル: スタイルテーマ選択(サムネイル8枚)、列設定(幅・揃え)、ハイライト行指定。
- フッターアクションバー: [HTML] [Markdown] [CSV] [PNG] の4ボタン＋[共有URLを発行]ボタン。

### 共有閲覧ページ (view.php?id=xxxxx)
- 保存された表をスタイル付きで表示
- 「PNG保存」「印刷」「この表を編集ページで開く」ボタン
- 有効期限と作成日時を表示

## 4. データ構造
### テーブル(PHPで使用、共有URL用)
```
tables
id INT AUTO_INCREMENT PRIMARY KEY
slug VARCHAR(12) UNIQUE -- ランダム英数字
table_json MEDIUMTEXT -- 行列データをJSON配列で保存
style_json TEXT -- テーマ名・列設定などのスタイルJSON
created_at DATETIME
expires_at DATETIME -- created_at + 30日
```
※LocalStorage保存の通常利用ではDBアクセス不要。共有URL発行時のみINSERT。

## 5. デザインの方向性
- **カラー**: メインカラーは清潔感のある「スレートブルー(#3B5BDB)」、アクセントに「シトラス(#F59F00)」。背景はライトグレー(#F8F9FA)。
- **UI**: ツールライクなフラットデザイン。テーブルエリアは白カードに淡いシャドウ。ボタン類はアイコン付きでコンパクトに配置。
- **スマホ対応**: 縦スクロールで入力エリア→テーブルエリア→アクションバーと並べ、テーブルは横スクロール可能なコンテナに収容。
- **フォント**: システムUI系フォント。テーブル内は等幅フォント(monospace)オプション付き。
- **アニメーション**: 変換時に0.2sのフェードイン。行列追加削除時に軽いスライドアニメ。