TapApp Studio

TapApp Studio は、コードを書かずにタップ操作中心でUIプロトタイプを作成できるシングルファイルWebアプリです。
index.html をブラウザで開くだけで、要素追加・ドラッグ/リサイズ・スタイル編集・AI下書き生成・マルチデバイスプレビューが使えます。

---

目次

• 概要
• 主な機能
• 使い方
• データ保存について
• プライバシーポリシー
• 利用規約
• 免責事項
• セキュリティ上の注意
• MCP サーバーURLとドメイン検証
• デプロイ方法（Vercel）
• ライセンス

---

概要

TapApp Studio は以下を目的としたプロトタイプツールです。

• 画面要素をタップ・ドラッグで直感的に配置
• OpenAI / Hugging Face API を使ったUI下書き生成
• モバイル / タブレット / デスクトップのプレビュー確認
• ローカル保存・再開・JSONエクスポート

---

主な機能

• 要素追加（見出し / テキスト / ボタン / 入力欄 / カード）
• 直接操作（移動 / リサイズ / インライン編集）
• スタイル編集（色・枠線・角丸・余白・文字サイズ・透明度・回転）
• 整列 / 均等配置（左揃え、中央揃え、上揃え、横均等配置など）
• Undo / Redo
• タップ配置モード
• グリッド表示切替、吸着切替、ズーム
• マルチデバイスプレビュー
• AIレイアウト生成（OpenAI, Hugging Face）
• localStorage 保存 / 再開
• JSONエクスポート

---

使い方

1. 起動

• index.html をブラウザで開く
• またはローカルサーバーを起動してアクセスする

例:

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）を選択
2. API Key とモデル名を入力
3. 作りたいアプリ要件を入力
4. 「AIで初期レイアウト生成」を押す

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. ローカルサーバー起動

python -m http.server 4173

2. 別ターミナルで録画スクリプト実行

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到達性

実行例:

./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

---

ライセンス

このリポジトリのライセンス方針に従ってください。
ライセンスファイルが未整備の場合は、運用前に必ず明示してください。