リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: MoodBoard Maker ビジョンボード&ムードボード作成
選択要素のグループ化/グループ解除機能の追加
## 1. 目的
複数の要素をまとめて移動・リサイズ・回転したいニーズに応える。現状は要素を1つずつ操作するしかなく、レイアウト調整が煩雑。グループ化により「タイトルテキスト+装飾スウォッチ+ステッカー」をひとまとめにして扱えるようにし、制作効率を大幅に向上させる。
---
## 2. 具体的な仕様
### 2-1. 複数選択
- **Shift+クリック** で要素を追加選択(既存の単体選択を壊さない)。
- キャンバス上の空白を **ドラッグ** すると選択矩形(ラバーバンド)が描画され、矩形内の要素を一括選択。
- 複数選択中は各要素のハンドルを非表示にし、選択グループ全体を囲む **青い破線バウンディングボックス** を1つ表示する。
### 2-2. グループ化
- 複数選択状態でツールバーに表示される **「グループ化」ボタン**(アイコン+ラベル)をクリック、または **Ctrl/Cmd+G** で実行。
- グループはJSON上で `{"type":"group", "id":"g_xxx", "children":[...要素配列...], "x", "y", "width", "height", "rotation":0}` として1オブジェクトに束ねる。children 内の各要素座標はグループ原点からの相対座標で保持。
- グループ化後は1つの要素として選択・移動・リサイズ・回転・複製・削除・重なり順変更が可能。
- リサイズ時は children の相対座標をスケール係数で比例変換する(テキストのフォントサイズも同倍率で変更)。
### 2-3. グループ解除
- グループ選択中にツールバーに表示される **「グループ解除」ボタン**(アイコン+ラベル)をクリック、または **Ctrl/Cmd+Shift+G** で実行。
- children を相対座標→絶対座標に変換してキャンバスのフラットなリストに戻す。
### 2-4. グループ内個別編集
- グループをダブルクリックすると **グループ編集モード** に入り、children を個別選択・編集できる。
- グループ編集モード中はキャンバス外縁に薄いオーバーレイを表示し、グループ外の要素を操作不可にする(視覚的に分離)。
- グループ外の空白クリックまたは **Esc** でグループ編集モードを終了。
### 2-5. UI変更箇所
- 右サイドパネルの要素操作エリアに「グループ化」「グループ解除」ボタンを追加(複数選択時のみ前者、グループ選択時のみ後者を活性化)。
- ショートカット一覧(既存のヘルプモーダルがあれば)に Ctrl/Cmd+G・Ctrl/Cmd+Shift+G を追記。
---
## 3. データ互換・既存機能との整合
- **JSON保存/読込**: group タイプを新設するだけで、既存の非グループ要素の構造は無変更。旧JSONを読み込んだ場合は group タイプが存在しないだけなので既存ボードは正常に開ける。
- **Undo/Redo**: グループ化・解除・グループ移動をそれぞれ1ステップとして既存の履歴スタックに積む。
- **書き出し(PNG/JPG)**: canvas 描画ループで group を再帰的に処理するだけで対応可能(描画ロジックへの影響は最小限)。
- **整列ボタン**: 複数選択中はグループ全体のバウンディングボックスを基準に整列処理を適用(既存の単体要素整列と同じロジックを流用)。
- **スマートガイド**: グループをひとつの要素として扱い既存のスナップ処理をそのまま適用。
- **公開ギャラリー**: 共有データのJSON構造が変わるだけで、サーバー側は blob として保存しているため変更不要。
複数の要素をまとめて移動・リサイズ・回転したいニーズに応える。現状は要素を1つずつ操作するしかなく、レイアウト調整が煩雑。グループ化により「タイトルテキスト+装飾スウォッチ+ステッカー」をひとまとめにして扱えるようにし、制作効率を大幅に向上させる。
---
## 2. 具体的な仕様
### 2-1. 複数選択
- **Shift+クリック** で要素を追加選択(既存の単体選択を壊さない)。
- キャンバス上の空白を **ドラッグ** すると選択矩形(ラバーバンド)が描画され、矩形内の要素を一括選択。
- 複数選択中は各要素のハンドルを非表示にし、選択グループ全体を囲む **青い破線バウンディングボックス** を1つ表示する。
### 2-2. グループ化
- 複数選択状態でツールバーに表示される **「グループ化」ボタン**(アイコン+ラベル)をクリック、または **Ctrl/Cmd+G** で実行。
- グループはJSON上で `{"type":"group", "id":"g_xxx", "children":[...要素配列...], "x", "y", "width", "height", "rotation":0}` として1オブジェクトに束ねる。children 内の各要素座標はグループ原点からの相対座標で保持。
- グループ化後は1つの要素として選択・移動・リサイズ・回転・複製・削除・重なり順変更が可能。
- リサイズ時は children の相対座標をスケール係数で比例変換する(テキストのフォントサイズも同倍率で変更)。
### 2-3. グループ解除
- グループ選択中にツールバーに表示される **「グループ解除」ボタン**(アイコン+ラベル)をクリック、または **Ctrl/Cmd+Shift+G** で実行。
- children を相対座標→絶対座標に変換してキャンバスのフラットなリストに戻す。
### 2-4. グループ内個別編集
- グループをダブルクリックすると **グループ編集モード** に入り、children を個別選択・編集できる。
- グループ編集モード中はキャンバス外縁に薄いオーバーレイを表示し、グループ外の要素を操作不可にする(視覚的に分離)。
- グループ外の空白クリックまたは **Esc** でグループ編集モードを終了。
### 2-5. UI変更箇所
- 右サイドパネルの要素操作エリアに「グループ化」「グループ解除」ボタンを追加(複数選択時のみ前者、グループ選択時のみ後者を活性化)。
- ショートカット一覧(既存のヘルプモーダルがあれば)に Ctrl/Cmd+G・Ctrl/Cmd+Shift+G を追記。
---
## 3. データ互換・既存機能との整合
- **JSON保存/読込**: group タイプを新設するだけで、既存の非グループ要素の構造は無変更。旧JSONを読み込んだ場合は group タイプが存在しないだけなので既存ボードは正常に開ける。
- **Undo/Redo**: グループ化・解除・グループ移動をそれぞれ1ステップとして既存の履歴スタックに積む。
- **書き出し(PNG/JPG)**: canvas 描画ループで group を再帰的に処理するだけで対応可能(描画ロジックへの影響は最小限)。
- **整列ボタン**: 複数選択中はグループ全体のバウンディングボックスを基準に整列処理を適用(既存の単体要素整列と同じロジックを流用)。
- **スマートガイド**: グループをひとつの要素として扱い既存のスナップ処理をそのまま適用。
- **公開ギャラリー**: 共有データのJSON構造が変わるだけで、サーバー側は blob として保存しているため変更不要。
💬 返信 (6)
🛠 開発を開始しました (機能追加 moodboard)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ 第 1 フェーズをリリースしました [フェーズ 1/最大5]
ご要望いただいた「MoodBoard Maker ビジョンボード&ムードボード作成」のうち、複数選択・範囲選択・グループ化/グループ解除・グループの移動/整列/複製/削除・JSON/公開保存対応を実装、リリースしました。
グループ内の個別編集モードは引き続き残りの内容として、次のサイクルで開発します。
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=moodboard
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/moodboard/
ご要望いただいた「MoodBoard Maker ビジョンボード&ムードボード作成」のうち、複数選択・範囲選択・グループ化/グループ解除・グループの移動/整列/複製/削除・JSON/公開保存対応を実装、リリースしました。
グループ内の個別編集モードは引き続き残りの内容として、次のサイクルで開発します。
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=moodboard
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/moodboard/
🛠 開発を開始しました (機能追加 (moodboard))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「MoodBoard Maker ビジョンボード&ムードボード作成」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=moodboard
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/moodboard/
ご利用ありがとうございます!
ご要望いただいた「MoodBoard Maker ビジョンボード&ムードボード作成」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=moodboard
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/moodboard/
ご利用ありがとうございます!
Echo
Iris