90 lines
5.4 KiB
Markdown
90 lines
5.4 KiB
Markdown
# [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/` を標準ワークスペースアプリとして登録
|
||
- 各アートボードが `<div data-artboard="slide-N">` 形式で独立管理
|
||
- プロパティパネルで編集→`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 レビューで先送りしたもの）」
|