diff --git a/docs/issues/1202-artboard-slide-flow.md b/docs/issues/1202-artboard-slide-flow.md deleted file mode 100644 index a6ec6c8..0000000 --- a/docs/issues/1202-artboard-slide-flow.md +++ /dev/null @@ -1,89 +0,0 @@ -# [Feature] HTMLアートボード形式のスライド制作フロー - -> Gitea issue: https://gitea.techswan.online/agent-bot/gitea-agent-orchestrator/issues/1202 - -## 現状の問題 - -現在 MAESTRO がスライド（.pptx）を生成する流れは以下の通り： - -1. ユーザーが「スライドを作って」と依頼 -2. エージェントが pptxgenjs（`SetTheme` / `AddSlide` / `BuildPptx`）で直接 `.pptx` を生成 -3. 結果がそのままユーザーに渡される - -この流れの課題： -- **中間の「見た目確認」ができない**：pptx が完成してから初めて見るため、レイアウト・配色・見せ方が期待とズレていたら作り直しになる -- **ユーザーが細部を調整できない**：文字の大小、色、図表の配置など、pptx 内で手動編集するには PowerPoint を開いてやる必要がある -- **提案の複数案比較ができない**：「A案とB案、どっちがいい？」という比較検討がチャットテキスト上では行いにくい -- **エージェントの「デザイン提案」が弱い**：pptxgenjs は最終生成ツールであって、デザイン案を視覚的に提示する手段ではない - -## 原因の推測 - -pptxgenjs は「スライド生成の最終出力手段」に位置づけられており、**デザイン検討フェーズの UI が存在しない**。ユーザーが「こういう見せ方にして」と伝える前に最終物が出来てしまう。 - -一方、Claude Code の `/design skill`（research preview）や Artifacts では、エージェントが「編集可能な HTML アートボード」を生成し、ユーザーがそれを直接クリック/ドラッグで調整→確定、という**非線形的なデザイン確認フロー**を可能にしている。MAESTRO にこの「デザイン確認レイヤー」がない。 - -## 提案 - -### 1. HTML アートボード形式のスライド中間表現を導入 - -スライドの各ページを **1ページ=1個の HTML アートボード（960×600 固定サイズ、pptx 16:9相当）** として表現する。各アートボードには： - -- **編集可能な要素に `data-editable` / `data-property` / `data-label` を付与** -- **Pan/Zoom**（ドラッグで移動、ホイールで拡大縮小） -- **クリックで右側プロパティパネルが開く**（色・テキスト・数値の直接編集） -- **JSON エクスポート**（編集内容を構造化データとして取得） - -既にこのワークスペースで `apps/design-canvas/` にプロトタイプ（3バリエーションのダッシュボード UI モック）を作成済み。これを**標準機能として製品に組み込む**形。 - -### 2. スライド制作フローの変更 - -``` -[現行フロー] -ユーザー依頼 → エージェントが pptxgenjs で直接 .pptx 生成 → ユーザー受け取り - -[新フロー] -ユーザー依頼 → エージェントが HTML アートボード群を生成（1枚=1ページ） - ↓ -チャットにアートボードプレビューを貼付（[[embed:...]] マーカーで） - ↓ -ユーザーが「アプリ」タブから Design Canvas を開き、各ページを直接編集 - ↓ -ユーザーが「これでOK」→ エージェントが編集後の HTML/JSON を読み取り - ↓ -pptxgenjs（または python-pptx）で PPTX を生成 → 最終 .pptx をユーザーに渡す -``` - -### 3. 技術実装ポイント - -**（a）エージェント側** -- 新規 movement として `slide-design` を追加（`pptx` movement と並列、または `pptx` の前段） -- `AddSlide` を「アートボードHTML生成」に変形（または新しい `AddSlideArtboard`） -- `BuildPptx` の代わりに、まず `BuildArtboard`（HTML ファイルを生成しチャットに貼付）を呼ぶ -- ユーザーが確定後に、編集済み HTML を読み取り pptxgenjs で最終生成 - -**（b）UI 側（Design Canvas アプリ）** -- `apps/design-canvas/` を標準ワークスペースアプリとして登録 -- 各アートボードが `
` 形式で独立管理 -- プロパティパネルで編集→`localStorage` に保存→「エクスポート」で JSON を取得 -- エージェントは JSON（または編集後の HTML）を受け取って pptx 化 - -**（c）チャット連携** -- `[[embed:artboard:slide-N]]` 形式のマーカーで各ページをチャットにサムネイル表示 -- クリックすると Design Canvas にジャンプ、そのページにフォーカス - -### 4. 優先度 - -**中〜高**。現在の pptxgenjs 直接生成は「作れる」が「検討できる」ではない。 -デザイン重視の依頼（経営会議スライド、提案書等）ではこの中間確認レイヤーが価値を大きく増す。 - -### 5. 既存資産 - -- `apps/design-canvas/`（このワークスペースで作成済みのプロトタイプ） -- `output/design-canvas.html`（独立 HTML、外部依存ゼロ）— リポジトリに添付済み -- `output/design-canvas-artifact.html`（base64 埋め込み型、チャット用）— リポジトリに添付済み -- Claude Code `/design skill` の参考記事：https://dev.classmethod.jp/articles/20260818-cc-updates-v2-1-234/ - -### 6. 関連 issue - -- #1035「Genofficeを参考に、各種オフィスツールの統合」— 上位項目 -- #1067「オフィス編集の積み残し（PR #1037 レビューで先送りしたもの）」