From 23c9be726e3a718104f4cf07ee8e78ad4fc37c3b Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Wed, 4 Mar 2026 20:13:53 +0900 Subject: [PATCH 01/12] Improve TapApp Studio with intuitive direct manipulation --- index.html | 566 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 566 insertions(+) diff --git a/index.html b/index.html index 8b13789..f425f66 100644 --- a/index.html +++ b/index.html @@ -1 +1,567 @@ + + + + + + TapApp Studio + + + +
+
+
+

TapApp Studio

+

より直感的にするため、ドラッグ並び替え・ダブルタップ編集・複製・上下移動に対応しました。

+
+
+

1) AIで下書きを作る

+ + + + + + + + + + + + + +
+

失敗時はテンプレートに自動フォールバックします。

+
+
+ +
+
+

2) タップ&ドラッグで組み立てる

+
+ + + + + +
+
+ +
+
選択中に対してクイック操作
+
+ + + +
+
+ +
+ +
+
+ + +
+
+ + +
+
+
+
+ +
+
+

3) 選択中の要素を編集

+

キャンバス上でダブルタップ（PCはダブルクリック）でも文字を直接編集できます。

+
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+
+
+ + + + From 9a46d80f47897f36fdbce07cefbb35d66e656b74 Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Wed, 4 Mar 2026 20:25:11 +0900 Subject: [PATCH 02/12] Make editor lovable-like with freeform tap interactions --- index.html | 734 +++++++++++++++++++++++++++++------------------------ 1 file changed, 398 insertions(+), 336 deletions(-) diff --git a/index.html b/index.html index f425f66..2258ac3 100644 --- a/index.html +++ b/index.html @@ -6,78 +6,87 @@ TapApp Studio @@ -85,35 +94,30 @@

TapApp Studio

-

より直感的にするため、ドラッグ並び替え・ダブルタップ編集・複製・上下移動に対応しました。

+

Lovable風に近づけるため、自由配置キャンバス（ドラッグ移動・リサイズ・タップ選択・ダブルタップ編集）にしました。

-

1) AIで下書きを作る

- +

1) AIで下書き

+ - - + - - - - - - - + + + +
-

失敗時はテンプレートに自動フォールバックします。

-

2) タップ&ドラッグで組み立てる

+

2) タップで配置（自由編集）

@@ -123,25 +127,27 @@

2) タップ&ドラッグで組み立てる

-
-
選択中に対してクイック操作
-
- - - +
+
クイック操作
+
+ + +
-
+
+
+
-
-
- - +
+
+ +
-
+
- +
@@ -149,256 +155,309 @@

2) タップ&ドラッグで組み立てる

-

3) 選択中の要素を編集

-

キャンバス上でダブルタップ（PCはダブルクリック）でも文字を直接編集できます。

+

3) 選択中の詳細編集

+

要素をタップ選択。ダブルクリック（スマホならダブルタップ）で直接文字編集もできます。

- - - - - - - - - - - - - - - - - - - -
- - + + +
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
-
From c6417c46677ead5c40755f51a3a0c8b19a1be329 Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Wed, 4 Mar 2026 20:33:06 +0900 Subject: [PATCH 03/12] Add multi-device preview and advanced freeform controls --- index.html | 386 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 328 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 2258ac3..c9283b6 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Noto Sans JP", system-ui, sans-serif; } - .app { min-height: 100vh; display: grid; gap: 12px; padding: 12px; grid-template-columns: 310px 1fr 320px; } + .app { min-height: 100vh; display: grid; gap: 12px; padding: 12px; grid-template-columns: 310px 1fr 330px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; overflow: auto; } h1,h2,h3 { margin: 0 0 8px; } h1 { font-size: 1.1rem; } @@ -31,20 +31,24 @@ button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button:disabled { opacity:.5; cursor:not-allowed; } - .builder { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; } + .builder { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; } .toolbar { display:flex; flex-wrap: wrap; gap: 8px; } .toolbar button { width:auto; padding: 7px 10px; } .quick { padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; } - .stage-wrap { background: linear-gradient(180deg,#f6f9ff,#fcfdff); border: 1px dashed #adc0d9; border-radius: 16px; padding: 12px; display: grid; place-items: center; min-height: 560px; } + .stage-wrap { background: linear-gradient(180deg,#f6f9ff,#fcfdff); border: 1px dashed #adc0d9; border-radius: 16px; padding: 12px; display: grid; place-items: center; min-height: 560px; overflow: auto; } + .zoom-wrap { display: grid; gap: 6px; } .phone { - width: min(390px, 100%); - aspect-ratio: 9 / 19.5; + width: 390px; + height: 844px; border: 2px solid #c7d5e6; border-radius: 24px; background: white; position: relative; overflow: hidden; + transform-origin: top center; + } + .show-grid { background-image: linear-gradient(to right, rgba(219,234,254,.45) 1px, transparent 1px), linear-gradient(to bottom, rgba(219,234,254,.45) 1px, transparent 1px); background-size: 20px 20px; } @@ -86,7 +90,49 @@ } .status { min-height: 1.1em; font-size:.84rem; color: var(--muted); } - @media (max-width: 1150px) { .app { grid-template-columns: 1fr; } .stage-wrap { min-height: 420px; } } + .preview-modal { + position: fixed; + inset: 0; + display: none; + place-items: center; + background: rgba(15, 23, 42, 0.55); + z-index: 40; + padding: 16px; + } + .preview-modal.open { display: grid; } + .preview-panel { + width: min(1180px, 100%); + max-height: 92vh; + overflow: auto; + background: #fff; + border-radius: 16px; + border: 1px solid var(--line); + padding: 12px; + } + .preview-header { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; } + .preview-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } + .device { + border: 1px solid var(--line); + border-radius: 12px; + padding: 10px; + background: #f8fafc; + } + .screen { + position: relative; + background: #fff; + border: 1px solid #c7d5e6; + overflow: hidden; + } + .screen.mobile { width: 100%; aspect-ratio: 9 / 19.5; border-radius: 18px; } + .screen.tablet { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; } + .screen.desktop { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; } + .preview-node { position: absolute; overflow: hidden; } + + @media (max-width: 1200px) { + .app { grid-template-columns: 1fr; } + .stage-wrap { min-height: 420px; } + .preview-devices { grid-template-columns: 1fr; } + } @@ -94,7 +140,7 @@

TapApp Studio

-

Lovable風に近づけるため、自由配置キャンバス（ドラッグ移動・リサイズ・タップ選択・ダブルタップ編集）にしました。

+

プレビュー機能を追加。編集キャンバスとほぼ同じ見た目をモバイル/タブレット/デスクトップで同時確認できます。

@@ -130,14 +176,28 @@

2) タップで配置（自由編集）

クイック操作
+ + +
+
+
+
+
+ + +
+ + +
+
-
+
@@ -156,7 +216,7 @@

2) タップで配置（自由編集）

3) 選択中の詳細編集

-

要素をタップ選択。ダブルクリック（スマホならダブルタップ）で直接文字編集もできます。

+

さらに自由度を上げるため、枠線色/太さ・透明度・回転を追加しています。

@@ -164,9 +224,15 @@

3) 選択中の詳細編集

+
+
+
+
+ +
@@ -183,8 +249,34 @@

3) 選択中の詳細編集

+
+
+
+

ライブプレビュー

+
+ + +
+
+
+
+

Mobile

+
+
+
+

Tablet

+
+
+
+

Desktop

+
+
+
+
+
+ From b1338b1da4facfbd7b3cfbfcd00decb30832451f Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Wed, 4 Mar 2026 20:43:16 +0900 Subject: [PATCH 04/12] Add tap-place and smart alignment tools for intuitive editing --- index.html | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 107 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c9283b6..209fcfa 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ textarea { min-height: 88px; resize: vertical; } button { background: #fff; cursor: pointer; } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } + button.active { background: #0f172a; border-color: #0f172a; color: #fff; } button:disabled { opacity:.5; cursor:not-allowed; } .builder { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; } @@ -185,6 +186,30 @@

2) タップで配置（自由編集）

+
+ + +
+
+ + + +
+
+ + + +
+
+ + +
@@ -317,6 +342,16 @@

Desktop

frontBtn: document.getElementById("frontBtn"), backBtn: document.getElementById("backBtn"), previewBtn: document.getElementById("previewBtn"), + placeType: document.getElementById("placeType"), + placeModeBtn: document.getElementById("placeModeBtn"), + alignLeftBtn: document.getElementById("alignLeftBtn"), + alignCenterBtn: document.getElementById("alignCenterBtn"), + alignRightBtn: document.getElementById("alignRightBtn"), + alignTopBtn: document.getElementById("alignTopBtn"), + alignMiddleBtn: document.getElementById("alignMiddleBtn"), + alignBottomBtn: document.getElementById("alignBottomBtn"), + distributeHBtn: document.getElementById("distributeHBtn"), + distributeVBtn: document.getElementById("distributeVBtn"), toggleGridBtn: document.getElementById("toggleGridBtn"), toggleSnapBtn: document.getElementById("toggleSnapBtn"), zoomRange: document.getElementById("zoomRange"), @@ -368,6 +403,7 @@

Desktop

let selectedId = state.nodes[0]?.id || null; let history = []; let future = []; + let placeMode = false; const clamp = (n, min, max) => Math.max(min, Math.min(max, n)); const selected = () => state.nodes.find((n) => n.id === selectedId); @@ -375,6 +411,11 @@

Desktop

const canSnap = () => state.options.snap; const snap = (value, grid = 4) => canSnap() ? Math.round(value / grid) * grid : value; + function updatePlaceModeUI() { + ui.placeModeBtn.classList.toggle("active", placeMode); + ui.placeModeBtn.textContent = `タップ配置モード${placeMode ? "ON" : "OFF"}`; + } + function snapshot() { history.push(JSON.stringify(state)); if (history.length > 80) history.shift(); @@ -629,10 +670,12 @@

Desktop

ui.propY.value = n.y; } - function addNode(type) { + function addNode(type, x = null, y = null) { snapshot(); const offset = state.nodes.length * 12; - const n = newNode(type, clamp(24 + offset, 0, 260), clamp(28 + offset, 0, 600)); + const nx = x ?? clamp(24 + offset, 0, 260); + const ny = y ?? clamp(28 + offset, 0, 600); + const n = newNode(type, nx, ny); n.z = Date.now(); state.nodes.push(n); selectedId = n.id; @@ -674,6 +717,43 @@

Desktop

render(); } + function alignAll(mode) { + if (!state.nodes.length) return; + snapshot(); + state.nodes.forEach((n) => { + if (mode === "left") n.x = 0; + if (mode === "center") n.x = (baseSize.w - n.w) / 2; + if (mode === "right") n.x = baseSize.w - n.w; + if (mode === "top") n.y = 0; + if (mode === "middle") n.y = (baseSize.h - n.h) / 2; + if (mode === "bottom") n.y = baseSize.h - n.h; + n.x = clamp(snap(n.x), 0, baseSize.w - n.w); + n.y = clamp(snap(n.y), 0, baseSize.h - n.h); + }); + status("整列しました。"); + render(); + } + + function distribute(axis) { + if (state.nodes.length < 3) { + status("均等配置は3要素以上で使えます。"); + return; + } + snapshot(); + const nodes = [...state.nodes].sort((a, b) => axis === "x" ? a.x - b.x : a.y - b.y); + const first = nodes[0]; + const last = nodes[nodes.length - 1]; + const start = axis === "x" ? first.x : first.y; + const end = axis === "x" ? last.x : last.y; + const gap = (end - start) / (nodes.length - 1); + nodes.forEach((n, i) => { + if (axis === "x") n.x = clamp(snap(start + gap * i), 0, baseSize.w - n.w); + else n.y = clamp(snap(start + gap * i), 0, baseSize.h - n.h); + }); + status(axis === "x" ? "横均等配置しました。" : "縦均等配置しました。"); + render(); + } + function saveState(msg = "保存しました。") { localStorage.setItem("tapapp-state", JSON.stringify(state)); localStorage.setItem("tapapp-api-key", ui.apiKey.value.trim()); @@ -770,6 +850,17 @@

Desktop

render(); } + ui.phone.onclick = (e) => { + if (!placeMode || e.target !== ui.phone) return; + const rect = ui.phone.getBoundingClientRect(); + const scale = state.options.zoom / 100; + const type = ui.placeType.value; + const d = defaultsByType[type] || defaultsByType.text; + const x = clamp(snap((e.clientX - rect.left) / scale - d.w / 2), 0, baseSize.w - d.w); + const y = clamp(snap((e.clientY - rect.top) / scale - d.h / 2), 0, baseSize.h - d.h); + addNode(type, x, y); + }; + ui.addButtons.forEach((btn) => (btn.onclick = () => addNode(btn.dataset.add))); ui.applyBtn.onclick = () => { @@ -808,6 +899,19 @@

Desktop

ui.dupBtn.onclick = duplicateNode; ui.frontBtn.onclick = bringFront; ui.backBtn.onclick = sendBack; + ui.placeModeBtn.onclick = () => { + placeMode = !placeMode; + updatePlaceModeUI(); + status(`タップ配置モード: ${placeMode ? "ON" : "OFF"}`); + }; + ui.alignLeftBtn.onclick = () => alignAll("left"); + ui.alignCenterBtn.onclick = () => alignAll("center"); + ui.alignRightBtn.onclick = () => alignAll("right"); + ui.alignTopBtn.onclick = () => alignAll("top"); + ui.alignMiddleBtn.onclick = () => alignAll("middle"); + ui.alignBottomBtn.onclick = () => alignAll("bottom"); + ui.distributeHBtn.onclick = () => distribute("x"); + ui.distributeVBtn.onclick = () => distribute("y"); ui.previewBtn.onclick = () => { renderPreviewScreens(); ui.previewModal.classList.add("open"); @@ -892,6 +996,7 @@

Desktop

state.options.showGrid = state.options.showGrid ?? true; state.options.snap = state.options.snap ?? true; state.options.zoom = clamp(Number(state.options.zoom || 100), 50, 140); + updatePlaceModeUI(); render(); })(); From 7302f93770c06b03da1e20f12d5fe0f7b26effcf Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Wed, 4 Mar 2026 20:50:03 +0900 Subject: [PATCH 05/12] Add README with usage, privacy policy, and terms --- README.md | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..34ebdaf --- /dev/null +++ b/README.md @@ -0,0 +1,176 @@ +# TapApp Studio + +TapApp Studio は、**コードを書かずにタップ操作中心でUIプロトタイプを作成**できるシングルファイルWebアプリです。 +`index.html` をブラウザで開くだけで、要素追加・ドラッグ/リサイズ・スタイル編集・AI下書き生成・マルチデバイスプレビューが使えます。 + +--- + +## 目次 + +- [概要](#概要) +- [主な機能](#主な機能) +- [使い方](#使い方) +- [データ保存について](#データ保存について) +- [プライバシーポリシー](#プライバシーポリシー) +- [利用規約](#利用規約) +- [免責事項](#免責事項) +- [セキュリティ上の注意](#セキュリティ上の注意) +- [デプロイ方法（Vercel）](#デプロイ方法vercel) +- [ライセンス](#ライセンス) + +--- + +## 概要 + +TapApp Studio は以下を目的としたプロトタイプツールです。 + +- 画面要素をタップ・ドラッグで直感的に配置 +- OpenAI / Hugging Face API を使ったUI下書き生成 +- モバイル / タブレット / デスクトップのプレビュー確認 +- ローカル保存・再開・JSONエクスポート + +--- + +## 主な機能 + +- 要素追加（見出し / テキスト / ボタン / 入力欄 / カード） +- 直接操作（移動 / リサイズ / インライン編集） +- スタイル編集（色・枠線・角丸・余白・文字サイズ・透明度・回転） +- 整列 / 均等配置（左揃え、中央揃え、上揃え、横均等配置など） +- Undo / Redo +- タップ配置モード +- グリッド表示切替、吸着切替、ズーム +- マルチデバイスプレビュー +- AIレイアウト生成（OpenAI, Hugging Face） +- `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）を選択 +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を呼び出す。 +- 公開端末で使用後は、ブラウザの保存データを削除してください。 + +--- + +## デプロイ方法（Vercel） + +1. このリポジトリを GitHub に push +2. Vercel で New Project +3. 対象リポジトリを選択 +4. Framework Preset は `Other` +5. Deploy + +--- + +## ライセンス + +このリポジトリのライセンス方針に従ってください。 +ライセンスファイルが未整備の場合は、運用前に必ず明示してください。 From 7d0ba2051a3880fe1c19afcfee92c1fec488b0fe Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Wed, 4 Mar 2026 20:58:12 +0900 Subject: [PATCH 06/12] Add demo recording guide and multi-platform recording script --- README.md | 27 ++++++++++++++ scripts/record_demo_playwright.py | 58 +++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 scripts/record_demo_playwright.py diff --git a/README.md b/README.md index 34ebdaf..475f429 100644 --- a/README.md +++ b/README.md @@ -160,6 +160,33 @@ TapApp Studio（以下「本アプリ」）は、以下の方針で情報を取 --- + +## デモ録画（開発者モード） + +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 は実機ではなく、ブラウザのモバイルエミュレーション設定で録画します。 + +--- + ## デプロイ方法（Vercel） 1. このリポジトリを GitHub に push diff --git a/scripts/record_demo_playwright.py b/scripts/record_demo_playwright.py new file mode 100644 index 0000000..26b74d9 --- /dev/null +++ b/scripts/record_demo_playwright.py @@ -0,0 +1,58 @@ +from pathlib import Path +from playwright.sync_api import sync_playwright + +OUT = Path("artifacts") +OUT.mkdir(parents=True, exist_ok=True) + +TARGET = "http://127.0.0.1:4173" + +SCENARIOS = [ + {"name": "web", "viewport": {"width": 1366, "height": 768}}, + {"name": "ios", "viewport": {"width": 390, "height": 844}}, + {"name": "android", "viewport": {"width": 412, "height": 915}}, +] + + +def run_demo(page): + page.goto(TARGET, wait_until="networkidle") + page.wait_for_timeout(300) + + page.click('[data-add="heading"]') + page.click('[data-add="button"]') + page.click("#alignCenterBtn") + page.click("#alignMiddleBtn") + + page.click("#placeModeBtn") + box = page.locator("#phone").bounding_box() + if box: + page.select_option("#placeType", "card") + page.mouse.click(box["x"] + box["width"] * 0.52, box["y"] + box["height"] * 0.72) + page.click("#placeModeBtn") + + page.click("#previewBtn") + page.wait_for_timeout(700) + page.click("#closePreviewBtn") + + page.click("#toggleGridBtn") + page.click("#toggleSnapBtn") + page.wait_for_timeout(900) + + +with sync_playwright() as p: + browser = p.firefox.launch(headless=True) + + for s in SCENARIOS: + context = browser.new_context( + viewport=s["viewport"], + record_video_dir=str(OUT), + record_video_size=s["viewport"], + ) + page = context.new_page() + run_demo(page) + context.close() + + vids = sorted(OUT.glob("*.webm"), key=lambda x: x.stat().st_mtime) + if vids: + vids[-1].rename(OUT / f"tapapp-demo-{s['name']}.webm") + + browser.close() From d72c62a122a83c3ee48de084a3966b1fa1ff23ac Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Thu, 5 Mar 2026 06:14:27 +0900 Subject: [PATCH 07/12] Fix MCP verification example status in README --- README.md | 35 +++++++++++++++++++++ scripts/verify_mcp_domain.sh | 61 ++++++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100755 scripts/verify_mcp_domain.sh diff --git a/README.md b/README.md index 475f429..b685a36 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ TapApp Studio は、**コードを書かずにタップ操作中心でUIプロ - [利用規約](#利用規約) - [免責事項](#免責事項) - [セキュリティ上の注意](#セキュリティ上の注意) +- [MCP サーバーURLとドメイン検証](#mcp-サーバーurlとドメイン検証) - [デプロイ方法（Vercel）](#デプロイ方法vercel) - [ライセンス](#ライセンス) @@ -187,6 +188,40 @@ python scripts/record_demo_playwright.py --- +## MCP サーバーURLとドメイン検証 + +### MCP サーバーURL + +本プロジェクトで利用する MCP サーバーURLは、運用環境に応じて設定してください。 + +- 推奨形式: `http(s):///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 diff --git a/scripts/verify_mcp_domain.sh b/scripts/verify_mcp_domain.sh new file mode 100755 index 0000000..1ffea31 --- /dev/null +++ b/scripts/verify_mcp_domain.sh @@ -0,0 +1,61 @@ +#!/usr/bin/env bash +set -euo pipefail + +URL="${1:-}" +if [[ -z "$URL" ]]; then + echo "Usage: $0 " + exit 1 +fi + +PARSED="$(python - <<'PY' "$URL" +import sys +from urllib.parse import urlparse +u = urlparse(sys.argv[1]) +print((u.scheme or ""), (u.hostname or "")) +PY +)" +SCHEME="$(awk '{print $1}' <<<"$PARSED")" +HOST="$(awk '{print $2}' <<<"$PARSED")" + +if [[ -z "$HOST" ]]; then + echo "❌ Invalid URL: cannot parse host" + exit 1 +fi + +echo "MCP URL: $URL" +echo "Host: $HOST" + +echo "" +echo "[1/3] DNS resolution" +if getent hosts "$HOST" >/dev/null; then + getent hosts "$HOST" | head -n 1 + echo "✅ DNS resolved" +else + echo "❌ DNS resolution failed" + exit 1 +fi + +echo "" +echo "[2/3] TLS handshake" +if [[ "$SCHEME" == "https" ]]; then + if echo | openssl s_client -connect "$HOST:443" -servername "$HOST" 2>/dev/null | openssl x509 -noout -subject >/dev/null 2>&1; then + echo "✅ TLS certificate detected" + else + echo "⚠️ TLS check failed (network/cert issue)" + fi +else + echo "⚠️ TLS check skipped (scheme: $SCHEME)" +fi + +echo "" +echo "[3/3] HTTP reachability" +STATUS="$(curl -s -o /dev/null -w '%{http_code}' "$URL" || true)" +if [[ "$STATUS" =~ ^[1-5][0-9][0-9]$ ]] && [[ "$STATUS" != "000" ]]; then + echo "✅ HTTP response status: $STATUS" +else + echo "❌ No HTTP response" + exit 1 +fi + +echo "" +echo "Done. Domain verification completed." From ff0353b9409cd58328d210917bddb8963efa11eb Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Thu, 5 Mar 2026 06:29:06 +0900 Subject: [PATCH 08/12] Switch to contextual floating controls and click-to-edit --- index.html | 156 ++++++++++++++++++++++++++--------------------------- 1 file changed, 75 insertions(+), 81 deletions(-) diff --git a/index.html b/index.html index 209fcfa..9f3f484 100644 --- a/index.html +++ b/index.html @@ -91,6 +91,27 @@ } .status { min-height: 1.1em; font-size:.84rem; color: var(--muted); } + .bubble-menu { + position: absolute; + display: grid; + grid-template-columns: repeat(4, auto); + gap: 6px; + background: rgba(15, 23, 42, 0.92); + border: 1px solid #334155; + padding: 8px; + border-radius: 12px; + z-index: 50; + } + .bubble-menu button { + width: auto; + padding: 6px 8px; + border-radius: 8px; + border: 1px solid #475569; + background: #0f172a; + color: #e2e8f0; + font-size: 0.75rem; + } + .preview-modal { position: fixed; inset: 0; @@ -175,44 +196,12 @@

2) タップで配置（自由編集）

-
クイック操作
+
要素をクリックすると、その周囲に操作ボタンが表示されます（複製/削除/重なり順/整列）。
- -
-
- -
-
- - -
-
- - - -
-
- - - -
-
- - -
-
- -
@@ -223,6 +212,7 @@

2) タップで配置（自由編集）

+
@@ -338,20 +328,8 @@

Desktop

deleteBtn: document.getElementById("deleteBtn"), undoBtn: document.getElementById("undoBtn"), redoBtn: document.getElementById("redoBtn"), - dupBtn: document.getElementById("dupBtn"), - frontBtn: document.getElementById("frontBtn"), - backBtn: document.getElementById("backBtn"), previewBtn: document.getElementById("previewBtn"), - placeType: document.getElementById("placeType"), - placeModeBtn: document.getElementById("placeModeBtn"), - alignLeftBtn: document.getElementById("alignLeftBtn"), - alignCenterBtn: document.getElementById("alignCenterBtn"), - alignRightBtn: document.getElementById("alignRightBtn"), - alignTopBtn: document.getElementById("alignTopBtn"), - alignMiddleBtn: document.getElementById("alignMiddleBtn"), - alignBottomBtn: document.getElementById("alignBottomBtn"), - distributeHBtn: document.getElementById("distributeHBtn"), - distributeVBtn: document.getElementById("distributeVBtn"), + bubbleMenu: document.getElementById("bubbleMenu"), toggleGridBtn: document.getElementById("toggleGridBtn"), toggleSnapBtn: document.getElementById("toggleSnapBtn"), zoomRange: document.getElementById("zoomRange"), @@ -403,7 +381,7 @@

Desktop

let selectedId = state.nodes[0]?.id || null; let history = []; let future = []; - let placeMode = false; + let suppressInlineOnce = false; const clamp = (n, min, max) => Math.max(min, Math.min(max, n)); const selected = () => state.nodes.find((n) => n.id === selectedId); @@ -411,9 +389,50 @@

Desktop

const canSnap = () => state.options.snap; const snap = (value, grid = 4) => canSnap() ? Math.round(value / grid) * grid : value; - function updatePlaceModeUI() { - ui.placeModeBtn.classList.toggle("active", placeMode); - ui.placeModeBtn.textContent = `タップ配置モード${placeMode ? "ON" : "OFF"}`; + const bubbleActions = [ + ["複製", "duplicate"], ["削除", "delete"], ["前面", "front"], ["背面", "back"], + ["左", "left"], ["中X", "center"], ["右", "right"], ["上", "top"], + ["中Y", "middle"], ["下", "bottom"], ["横均等", "distx"], ["縦均等", "disty"] + ]; + + function setupBubbleMenu() { + ui.bubbleMenu.innerHTML = ""; + bubbleActions.forEach(([label, action]) => { + const b = document.createElement("button"); + b.type = "button"; + b.textContent = label; + b.dataset.action = action; + b.onclick = () => runBubbleAction(action); + ui.bubbleMenu.appendChild(b); + }); + } + + function runBubbleAction(action) { + if (!selected()) return; + if (action === "duplicate") return duplicateNode(); + if (action === "delete") return ui.deleteBtn.click(); + if (action === "front") return bringFront(); + if (action === "back") return sendBack(); + if (action === "left") return alignAll("left"); + if (action === "center") return alignAll("center"); + if (action === "right") return alignAll("right"); + if (action === "top") return alignAll("top"); + if (action === "middle") return alignAll("middle"); + if (action === "bottom") return alignAll("bottom"); + if (action === "distx") return distribute("x"); + if (action === "disty") return distribute("y"); + } + + function positionBubbleForNode(nodeId) { + const el = ui.phone.querySelector(`.node[data-id="${nodeId}"]`); + if (!el) { ui.bubbleMenu.hidden = true; return; } + ui.bubbleMenu.hidden = false; + const rect = el.getBoundingClientRect(); + const parent = ui.phone.getBoundingClientRect(); + const bx = Math.max(6, Math.min((rect.left - parent.left) + rect.width / 2 - 110, parent.width - 226)); + const by = Math.max(6, (rect.top - parent.top) - 74); + ui.bubbleMenu.style.left = `${bx}px`; + ui.bubbleMenu.style.top = `${by}px`; } function snapshot() { @@ -519,17 +538,19 @@

Desktop

box.addEventListener("pointerdown", (e) => startDrag(e, n.id)); resize.addEventListener("pointerdown", (e) => startResize(e, n.id)); - box.addEventListener("dblclick", () => inlineEdit(n.id, content)); box.addEventListener("click", () => { selectedId = n.id; syncProps(); render(); + if (suppressInlineOnce) { suppressInlineOnce = false; return; } + inlineEdit(n.id, content); }); ui.phone.appendChild(box); }); syncProps(); + if (selectedId) positionBubbleForNode(selectedId); else ui.bubbleMenu.hidden = true; renderPreviewScreens(); } @@ -608,6 +629,7 @@

Desktop

const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); + if (Math.abs(n.x - ox) > 1 || Math.abs(n.y - oy) > 1) suppressInlineOnce = true; status("移動しました。"); }; @@ -651,7 +673,7 @@

Desktop

ui.propText, ui.propBg, ui.propColor, ui.propBorderColor, ui.propBorderWidth, ui.propRadius, ui.propPadding, ui.propFont, ui.propOpacity, ui.propRotate, ui.propW, ui.propH, ui.propX, ui.propY, - ui.applyBtn, ui.deleteBtn, ui.dupBtn, ui.frontBtn, ui.backBtn + ui.applyBtn, ui.deleteBtn ].forEach((x) => (x.disabled = disabled)); if (!n) return; ui.propText.value = n.text; @@ -849,18 +871,6 @@

Desktop

if (e.key === "ArrowDown") n.y = clamp(n.y + step, 0, baseSize.h - n.h); render(); } - - ui.phone.onclick = (e) => { - if (!placeMode || e.target !== ui.phone) return; - const rect = ui.phone.getBoundingClientRect(); - const scale = state.options.zoom / 100; - const type = ui.placeType.value; - const d = defaultsByType[type] || defaultsByType.text; - const x = clamp(snap((e.clientX - rect.left) / scale - d.w / 2), 0, baseSize.w - d.w); - const y = clamp(snap((e.clientY - rect.top) / scale - d.h / 2), 0, baseSize.h - d.h); - addNode(type, x, y); - }; - ui.addButtons.forEach((btn) => (btn.onclick = () => addNode(btn.dataset.add))); ui.applyBtn.onclick = () => { @@ -896,22 +906,6 @@

Desktop

ui.undoBtn.onclick = undo; ui.redoBtn.onclick = redo; - ui.dupBtn.onclick = duplicateNode; - ui.frontBtn.onclick = bringFront; - ui.backBtn.onclick = sendBack; - ui.placeModeBtn.onclick = () => { - placeMode = !placeMode; - updatePlaceModeUI(); - status(`タップ配置モード: ${placeMode ? "ON" : "OFF"}`); - }; - ui.alignLeftBtn.onclick = () => alignAll("left"); - ui.alignCenterBtn.onclick = () => alignAll("center"); - ui.alignRightBtn.onclick = () => alignAll("right"); - ui.alignTopBtn.onclick = () => alignAll("top"); - ui.alignMiddleBtn.onclick = () => alignAll("middle"); - ui.alignBottomBtn.onclick = () => alignAll("bottom"); - ui.distributeHBtn.onclick = () => distribute("x"); - ui.distributeVBtn.onclick = () => distribute("y"); ui.previewBtn.onclick = () => { renderPreviewScreens(); ui.previewModal.classList.add("open"); @@ -996,7 +990,7 @@

Desktop

state.options.showGrid = state.options.showGrid ?? true; state.options.snap = state.options.snap ?? true; state.options.zoom = clamp(Number(state.options.zoom || 100), 50, 140); - updatePlaceModeUI(); + setupBubbleMenu(); render(); })(); From 3ea0f30cd563e4f869e849dacb59910199afdc37 Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Thu, 5 Mar 2026 07:00:28 +0900 Subject: [PATCH 09/12] Move to tap-first lovable-style UI with contextual chips --- index.html | 1159 ++++++++-------------------------------------------- 1 file changed, 164 insertions(+), 995 deletions(-) diff --git a/index.html b/index.html index 9f3f484..d5c26eb 100644 --- a/index.html +++ b/index.html @@ -1,998 +1,167 @@ - - - - TapApp Studio - - - -
-
-
-

TapApp Studio

-

プレビュー機能を追加。編集キャンバスとほぼ同じ見た目をモバイル/タブレット/デスクトップで同時確認できます。

-
- -
-

1) AIで下書き

- - - - - - - - - -
-
-
- -
-
-

2) タップで配置（自由編集）

-
- - - - - -
-
- -
-
要素をクリックすると、その周囲に操作ボタンが表示されます（複製/削除/重なり順/整列）。
-
- - - -
-
- - -
- - -
- -
-
- -
- -
-
- - -
-
- - -
-
-
-
- -
-
-

3) 選択中の詳細編集

-

さらに自由度を上げるため、枠線色/太さ・透明度・回転を追加しています。

-
- - -
-
-
-
-
-
-
-
- - - - - -
-
-
-
-
-
-
-
-
- - -
-
-
-
- -
-
-
-

ライブプレビュー

-
- - -
-
-
-
-

Mobile

-
-
-
-

Tablet

-
-
-
-

Desktop

-
-
-
-
-
- - - + + + + TapApp Studio + + + +
+
+

TapApp Studio

+

AI以外はボタンを廃止し、タップ中心に変更。要素タップでその場編集 + 周囲に操作チップを表示します。

+
+

1) AIで下書き

+ + + + + + +
+
+
+ +
+
+
見出し
テキスト
ボタン風
入力欄
カード
+
+
+
Undo
Redo
Grid
Snap
Preview
+
Zoom
+ 100% +
+
+
+
+ +
+

3) 選択中の詳細編集

+

値を動かすと即反映（適用ボタンなし）。

+ +
+
+ + + + + +
+
+
+
+
+ +

ライブプレビュー

✕

Mobile

Tablet

Desktop

+ + + From 912cb9dc8050f558bde5052a4dc6356271db23b8 Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Thu, 5 Mar 2026 07:08:53 +0900 Subject: [PATCH 10/12] Fix bubble overlap, remove forced empty text, add persistent color palettes --- index.html | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d5c26eb..a014e78 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ .resize{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:nwse-resize} .hint{position:absolute;top:8px;left:8px;font-size:.72rem;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:2px 8px} - .bubble{position:absolute;display:flex;flex-wrap:wrap;gap:6px;max-width:250px;background:rgba(15,23,42,.95);border:1px solid #334155;padding:8px;border-radius:12px;z-index:40} + .bubble{position:absolute;display:flex;flex-wrap:wrap;gap:6px;max-width:250px;background:rgba(15,23,42,.82);border:1px solid #334155;padding:8px;border-radius:12px;z-index:40;backdrop-filter:blur(2px)} .bubble .act{padding:6px 8px;border-radius:8px;border:1px solid #475569;background:#0f172a;color:#e2e8f0;font-size:.75rem;cursor:pointer} .preview{position:fixed;inset:0;display:none;place-items:center;background:rgba(15,23,42,.58);z-index:60;padding:16px} @@ -38,6 +38,9 @@ .screen{position:relative;background:#fff;border:1px solid #c7d5e6;overflow:hidden} .mobile{aspect-ratio:9/19.5;border-radius:18px} .tablet{aspect-ratio:4/3;border-radius:12px} .desktop{aspect-ratio:16/10;border-radius:10px} .status{min-height:1.2em;font-size:.84rem;color:var(--muted)} + .palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} + .sw{width:20px;height:20px;border-radius:6px;border:1px solid #94a3b8;cursor:pointer} + @media (max-width:1200px){.app{grid-template-columns:1fr}.screens{grid-template-columns:1fr}} @@ -75,8 +78,8 @@

1) AIで下書き

3) 選択中の詳細編集

値を動かすと即反映（適用ボタンなし）。

-
-
+
+
@@ -113,7 +116,7 @@

3) 選択中の詳細編集

const acts=[["複製","dup"],["削除","del"],["前面","front"],["背面","back"],["左","left"],["中X","cx"],["右","right"],["上","top"],["中Y","cy"],["下","bottom"],["横均等","dx"],["縦均等","dy"]]; function setupBubble(){ui.bubble.innerHTML='';acts.forEach(([l,a])=>{const d=document.createElement('div');d.className='act';d.textContent=l;d.dataset.a=a;d.onclick=()=>runAct(a);ui.bubble.appendChild(d)})} function runAct(a){if(!sel())return; if(a==='dup')return dup(); if(a==='del')return del(); if(a==='front')return zFront(); if(a==='back')return zBack(); if(a==='left')return align('left'); if(a==='cx')return align('center'); if(a==='right')return align('right'); if(a==='top')return align('top'); if(a==='cy')return align('middle'); if(a==='bottom')return align('bottom'); if(a==='dx')return dist('x'); if(a==='dy')return dist('y')} -function showBubble(id){const el=ui.phone.querySelector(`.node[data-id="${id}"]`); if(!el){ui.bubble.hidden=true;return;} ui.bubble.hidden=false; const r=el.getBoundingClientRect(),p=ui.phone.getBoundingClientRect(); const x=Math.max(6,Math.min((r.left-p.left)+r.width/2-110,p.width-226)); const y=Math.max(6,(r.top-p.top)-74); ui.bubble.style.left=`${x}px`; ui.bubble.style.top=`${y}px`} +function showBubble(id){const el=ui.phone.querySelector(`.node[data-id="${id}"]`); if(!el){ui.bubble.hidden=true;return;} ui.bubble.hidden=false; const r=el.getBoundingClientRect(),p=ui.phone.getBoundingClientRect(); const bw=ui.bubble.offsetWidth||220,bh=ui.bubble.offsetHeight||72; const nodeX=r.left-p.left,nodeY=r.top-p.top; let x=Math.max(6,Math.min(nodeX+r.width/2-bw/2,p.width-bw-6)); let y=nodeY-bh-10; if(y<6) y=nodeY+r.height+10; const overlapX=!(x+bwnodeX+r.width); const overlapY=!(y+bhnodeY+r.height); if(overlapX&&overlapY){ x=Math.min(p.width-bw-6,nodeX+r.width+10); if(x<6) x=6; } ui.bubble.style.left=`${x}px`; ui.bubble.style.top=`${y}px`} function render(){state.nodes=(state.nodes||[]).map(norm).sort((a,b)=>a.z-b.z);ui.phone.innerHTML='';ui.phone.style.transform=`scale(${state.options.zoom/100})`;ui.zoom.value=state.options.zoom;ui.zoomLabel.textContent=`${state.options.zoom}%`;ui.phone.classList.toggle('show-grid',!!state.options.grid); state.nodes.forEach(n=>{const box=document.createElement('div');box.className=`node ${n.id===selectedId?'selected':''}`;box.dataset.id=n.id;styleNode(box,n);const hint=document.createElement('span');hint.className='hint';hint.textContent=n.type;box.appendChild(hint);const c=content(n);box.appendChild(c);const rs=document.createElement('span');rs.className='resize';box.appendChild(rs); @@ -122,7 +125,7 @@

3) 選択中の詳細編集

ui.phone.appendChild(box)}); syncProps(); if(selectedId)showBubble(selectedId); else ui.bubble.hidden=true; renderPreview()} -function inlineEdit(id,c){const n=state.nodes.find(x=>x.id===id); if(!n||n.type==='input')return; snapshot(); c.contentEditable='true'; c.focus(); msg('直接編集: Enterで確定'); const done=()=>{c.contentEditable='false'; n.text=(c.textContent||'').trim()||'（空）'; ui.propText.value=n.text; render()}; c.onblur=done; c.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();c.blur()}}} +function inlineEdit(id,c){const n=state.nodes.find(x=>x.id===id); if(!n||n.type==='input')return; snapshot(); c.contentEditable='true'; c.focus(); msg('直接編集: Enterで確定'); const done=()=>{c.contentEditable='false'; n.text=(c.textContent||'').trim(); ui.propText.value=n.text; render()}; c.onblur=done; c.onkeydown=e=>{if(e.key==='Enter'){e.preventDefault();c.blur()}}} function dragStart(e,id){if(e.target.classList.contains('resize'))return;const n=state.nodes.find(x=>x.id===id);if(!n)return; snapshot(); selectedId=id;const z=state.options.zoom/100,sx=e.clientX,sy=e.clientY,ox=n.x,oy=n.y; const mv=ev=>{n.x=clamp(snap(ox+(ev.clientX-sx)/z),0,base.w-n.w);n.y=clamp(snap(oy+(ev.clientY-sy)/z),0,base.h-n.h);render()}; const up=()=>{window.removeEventListener('pointermove',mv);window.removeEventListener('pointerup',up);if(Math.abs(n.x-ox)>1||Math.abs(n.y-oy)>1)suppressInline=true}; @@ -133,7 +136,7 @@

3) 選択中の詳細編集

function syncProps(){const n=sel(),d=!n;[ui.propText,ui.propBg,ui.propColor,ui.propBorderColor,ui.propBorderWidth,ui.propRadius,ui.propPadding,ui.propFont,ui.propOpacity,ui.propRotate,ui.propW,ui.propH,ui.propX,ui.propY].forEach(x=>x.disabled=d);if(!n)return; ui.propText.value=n.text;ui.propBg.value=n.style.bg;ui.propColor.value=n.style.color;ui.propBorderColor.value=n.style.borderColor;ui.propBorderWidth.value=n.style.borderWidth;ui.propRadius.value=n.style.radius;ui.propPadding.value=n.style.padding;ui.propFont.value=n.style.fontSize;ui.propOpacity.value=n.style.opacity;ui.propRotate.value=n.style.rotate;ui.propW.value=n.w;ui.propH.value=n.h;ui.propX.value=n.x;ui.propY.value=n.y} -function applyLive(){const n=sel(); if(!n)return; n.text=ui.propText.value||'（空）';n.style.bg=ui.propBg.value;n.style.color=ui.propColor.value;n.style.borderColor=ui.propBorderColor.value;n.style.borderWidth=+ui.propBorderWidth.value;n.style.radius=+ui.propRadius.value;n.style.padding=+ui.propPadding.value;n.style.fontSize=+ui.propFont.value;n.style.opacity=+ui.propOpacity.value;n.style.rotate=+ui.propRotate.value;n.w=clamp(+ui.propW.value,40,base.w-n.x);n.h=clamp(+ui.propH.value,32,base.h-n.y);n.x=clamp(+ui.propX.value,0,base.w-n.w);n.y=clamp(+ui.propY.value,0,base.h-n.h);render()} +function applyLive(){const n=sel(); if(!n)return; n.text=ui.propText.value;n.style.bg=ui.propBg.value;n.style.color=ui.propColor.value;n.style.borderColor=ui.propBorderColor.value;n.style.borderWidth=+ui.propBorderWidth.value;n.style.radius=+ui.propRadius.value;n.style.padding=+ui.propPadding.value;n.style.fontSize=+ui.propFont.value;n.style.opacity=+ui.propOpacity.value;n.style.rotate=+ui.propRotate.value;n.w=clamp(+ui.propW.value,40,base.w-n.x);n.h=clamp(+ui.propH.value,32,base.h-n.y);n.x=clamp(+ui.propX.value,0,base.w-n.w);n.y=clamp(+ui.propY.value,0,base.h-n.h);render()} function add(type){snapshot();const off=state.nodes.length*12;const n=makeNode(type,clamp(24+off,0,260),clamp(28+off,0,600));n.z=Date.now();state.nodes.push(n);selectedId=n.id;render()} function dup(){const n=sel();if(!n)return; snapshot(); const c=JSON.parse(JSON.stringify(n)); c.id=crypto.randomUUID(); c.x=clamp(n.x+16,0,base.w-n.w); c.y=clamp(n.y+16,0,base.h-n.h); c.z=Math.max(...state.nodes.map(x=>x.z))+1; c.text=`${n.text} コピー`; state.nodes.push(c); selectedId=c.id; render()} @@ -154,6 +157,18 @@

3) 選択中の詳細編集

ui.closePreview.onclick=()=>ui.preview.classList.remove('open'); ui.preview.onclick=e=>{if(e.target===ui.preview)ui.preview.classList.remove('open')}; ui.zoom.oninput=()=>{state.options.zoom=+ui.zoom.value;render()}; [ui.propText,ui.propBg,ui.propColor,ui.propBorderColor,ui.propBorderWidth,ui.propRadius,ui.propPadding,ui.propFont,ui.propOpacity,ui.propRotate,ui.propW,ui.propH,ui.propX,ui.propY].forEach(i=>i.addEventListener('input',applyLive)); + +document.querySelectorAll('.palette').forEach((pal)=>{ + pal.addEventListener('click',(e)=>{ + const sw=e.target.closest('.sw'); + if(!sw)return; + const targetId=pal.dataset.target; + const input=document.getElementById(targetId); + if(!input)return; + input.value=sw.dataset.color; + applyLive(); + }); +}); ui.generateBtn.onclick=async()=>{const key=ui.apiKey.value.trim(),prompt=ui.prompt.value.trim();if(!key||!prompt){ui.aiStatus.textContent='APIキーと要件を入力してください。';return}ui.generateBtn.disabled=true;ui.aiStatus.textContent='AIで生成中...'; try{const raw=ui.provider.value==='openai'?await callOpenAI({key,model:ui.model.value.trim(),prompt}):await callHF({key,model:ui.model.value.trim(),prompt});const p=extractJson(raw);if(!p)throw new Error();applyGenerated(p);ui.aiStatus.textContent='AIレイアウトを反映しました。'} catch{applyGenerated({elements:[{type:'heading',text:'テンプレート',x:24,y:28,w:250,h:56,style:{bg:'#fff7ed',color:'#9a3412',radius:12,padding:10,fontSize:22}},{type:'text',text:prompt,x:24,y:96,w:320,h:120,style:{bg:'#fff',color:'#334155',radius:10,padding:10,fontSize:16}},{type:'button',text:'開始',x:24,y:230,w:150,h:48,style:{bg:'#2563eb',color:'#fff',radius:10,padding:10,fontSize:16}}]});ui.aiStatus.textContent='AI解析失敗のためテンプレートを作成しました。'} From ae752acafe6e1021bf400f26b0fdffced7818ddb Mon Sep 17 00:00:00 2001 From: reodesureodesu Date: Thu, 5 Mar 2026 07:16:07 +0900 Subject: [PATCH 11/12] Polish lovable-style UI and add major AI model presets --- index.html | 43 +++++++++++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index a014e78..8db185d 100644 --- a/index.html +++ b/index.html @@ -5,20 +5,20 @@ TapApp Studio