reodesureodesu · reodesureodesu · Mar 4, 2026
diff --git a/README.md b/README.md
@@ -0,0 +1,241 @@
+# TapApp Studio
+
+TapApp Studio は、**コードを書かずにタップ操作中心でUIプロトタイプを作成**できるシングルファイルWebアプリです。  
+`index.html` をブラウザで開くだけで、要素追加・ドラッグ/リサイズ・スタイル編集・AI下書き生成・マルチデバイスプレビューが使えます。
+
+---
+
+## 目次
+
+- [概要](#概要)
+- [主な機能](#主な機能)
+- [使い方](#使い方)
+- [データ保存について](#データ保存について)
+- [プライバシーポリシー](#プライバシーポリシー)
+- [利用規約](#利用規約)
+- [免責事項](#免責事項)
+- [セキュリティ上の注意](#セキュリティ上の注意)
+- [MCP サーバーURLとドメイン検証](#mcp-サーバーurlとドメイン検証)
+- [デプロイ方法（Vercel）](#デプロイ方法vercel)
+- [ライセンス](#ライセンス)
+
+---
+
+## 概要
+
+TapApp Studio は以下を目的としたプロトタイプツールです。
+
+- 画面要素をタップ・ドラッグで直感的に配置
+- OpenAI / Hugging Face / Lovable AI（OpenAI互換）を使ったUI下書き生成
+- モバイル / タブレット / デスクトップのプレビュー確認
+- ローカル保存・再開・JSONエクスポート
+
+---
+
+## 主な機能
+
+- 要素追加（見出し / テキスト / ボタン / 入力欄 / カード）
+- 直接操作（移動 / リサイズ / インライン編集）
+- スタイル編集（色・枠線・角丸・余白・文字サイズ・透明度・回転）
+- 整列 / 均等配置（左揃え、中央揃え、上揃え、横均等配置など）
+- Undo / Redo
+- タップ配置モード
+- グリッド表示切替、吸着切替、ズーム
+- マルチデバイスプレビュー
+- AIレイアウト生成（OpenAI, Hugging Face, Lovable AI）
+- `localStorage` 保存 / 再開
+- JSONエクスポート
+
+---
+
+## 使い方
+
+### 1. 起動
+
+- `index.html` をブラウザで開く
+- またはローカルサーバーを起動してアクセスする
+
+例:
+
+```bash
+python -m http.server 4173
+```
+
+ブラウザで `http://127.0.0.1:4173` を開いてください。
+
+### 2. UIを作る
+
+1. 中央ツールバーから要素を追加
+2. 要素をドラッグして位置調整
+3. 右下ハンドルでサイズ調整
+4. 右パネルでスタイル・数値を微調整
+5. 必要に応じて整列 / 均等配置 / Undo / Redo を利用
+
+### 3. AIで下書きを作る
+
+1. 左パネルで Provider（OpenAI / Hugging Face / Lovable AI）を選択
+2. 主要モデルプリセットを選択（必要ならカスタムモデル入力）
+3. Lovable AIを選ぶ場合は OpenAI互換 Base URL を入力
+4. API Key と要件を入力
+5. 「AIで初期レイアウト生成」を押す
+
+※ AI生成はJSON抽出の再試行ロジックを実装しており、失敗時はテンプレートにフォールバックします。
+
+### 4. プレビューする
+
+- 「プレビュー」ボタンで、Mobile / Tablet / Desktop の見え方を比較
+
+### 5. 保存 / 再開 / エクスポート
+
+- 「保存」: `localStorage` に保存
+- 「再開」: 保存内容を復元
+- 「JSONエクスポート」: レイアウトJSONをダウンロード
+
+---
+
+## データ保存について
+
+このアプリは主にブラウザの `localStorage` を利用します。
+
+- レイアウト状態
+- 利用した Provider
+- モデル名
+- API Key（入力した場合）
+
+**注意:** API Key を `localStorage` に保存したくない場合は、利用後にブラウザのローカルデータを削除してください。
+
+---
+
+## プライバシーポリシー
+
+TapApp Studio（以下「本アプリ」）は、以下の方針で情報を取り扱います。
+
+1. **ローカル保存**  
+   本アプリは、編集状態や設定値をユーザーのブラウザ内（`localStorage`）へ保存します。
+
+2. **外部APIへの送信**  
+   ユーザーがAI生成機能を実行した場合、入力した要件テキストおよびAPI呼び出しに必要な情報は、選択した外部サービス（OpenAI または Hugging Face）へ送信されます。
+
+3. **運営側サーバー収集**  
+   本リポジトリ版の構成では、独自バックエンドを経由しない限り、運営者が独自に入力データを収集する仕組みは含みません。
+
+4. **第三者サービスの扱い**  
+   外部APIに関するデータ処理は、それぞれの提供元ポリシーに従います。利用前に必ず各社の規約・ポリシーをご確認ください。
+
+5. **ユーザーの管理責任**  
+   API Key・入力データ・保存データの管理はユーザー自身の責任で行ってください。
+
+---
+
+## 利用規約
+
+本アプリを利用することで、以下に同意したものとみなします。
+
+1. **自己責任での利用**  
+   ユーザーは自己責任で本アプリを利用するものとします。
+
+2. **禁止事項**  
+   法令違反、公序良俗違反、第三者権利侵害、外部API規約違反につながる利用を禁止します。
+
+3. **外部サービス利用**  
+   OpenAI / Hugging Face 等の外部サービスを利用する場合、当該サービスの利用規約を順守してください。
+
+4. **知的財産**  
+   本アプリや本アプリを基にした成果物の権利関係は、適用される法令・契約・ライセンス条件に従います。
+
+5. **規約変更**  
+   本規約は、必要に応じて予告なく変更される場合があります。
+
+---
+
+## 免責事項
+
+- 本アプリは現状有姿（AS IS）で提供され、完全性・正確性・可用性を保証しません。
+- 本アプリ利用または利用不能により生じた損害について、作成者は責任を負いません。
+- AI生成結果の正確性・合法性・第三者権利非侵害は保証されません。
+
+---
+
+## セキュリティ上の注意
+
+- 本番利用では API Key をクライアントに直接置かないでください。
+- 推奨構成: Vercel Functions などサーバー側経由でAI APIを呼び出す。
+- 公開端末で使用後は、ブラウザの保存データを削除してください。
+
+---
+
+
+## デモ録画（開発者モード）
+
+Playwright を使って、**Web / iOS / Android** 向けのデモ動画を録画できます。
+
+1. ローカルサーバー起動
+
+```bash
+python -m http.server 4173
+```
+
+2. 別ターミナルで録画スクリプト実行
+
+```bash
+python scripts/record_demo_playwright.py
+```
+
+3. 出力動画（`artifacts/`）
+
+- `tapapp-demo-web.webm`
+- `tapapp-demo-ios.webm`
+- `tapapp-demo-android.webm`
+
+> iOS / Android は実機ではなく、ブラウザのモバイルエミュレーション設定で録画します。
+
+---
+
+## MCP サーバーURLとドメイン検証
+
+### MCP サーバーURL
+
+本プロジェクトで利用する MCP サーバーURLは、運用環境に応じて設定してください。
+
+- 推奨形式: `http(s)://<your-mcp-domain>/mcp`
+- 例: `http://example.com/mcp`（ドキュメント用サンプル）
+
+> 実運用では、MCP専用ドメイン（例: `mcp.your-domain.com`）を用意することを推奨します。
+
+### ドメイン検証方法
+
+`scripts/verify_mcp_domain.sh` で、以下をまとめて確認できます。
+
+1. DNS解決
+2. TLS証明書（HTTPS）
+3. HTTP到達性
+
+実行例:
+
+```bash
+./scripts/verify_mcp_domain.sh http://example.com/mcp
+```
+
+### 検証結果（このリポジトリでの実行例）
+
+- 対象URL: `http://example.com/mcp`
+- DNS: 成功
+- TLS: スキップ（HTTP URLのため）
+- HTTPステータス: `403`（到達性は確認）
+
+---
+
+## デプロイ方法（Vercel）
+
+1. このリポジトリを GitHub に push
+2. Vercel で New Project
+3. 対象リポジトリを選択
+4. Framework Preset は `Other`
+5. Deploy
+
+---
+
+## ライセンス
+
+このリポジトリのライセンス方針に従ってください。  
+ライセンスファイルが未整備の場合は、運用前に必ず明示してください。