リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: チラシ・POP自動デザインメーカー FlyerCraft
要素のコピー&ペースト機能とレイヤー順序変更UIの追加
1. 目的
既存のエディタではテキストや図形を一から再作成する手間があり、同じスタイルの要素を複数配置したいときに不便。また要素が重なった際に前後関係を変えるUIがなく、意図した重なり順にするために削除・再追加する必要がある。これらを解消し、編集効率を大幅に向上させる。
2. 具体的な仕様
【2-1. コピー&ペースト】
- 要素選択中にツールバーに「コピー」ボタン(アイコン: 複写マーク)を表示する。クリックするとその要素のプロパティ(種別・座標・サイズ・回転・テキスト内容・色・フォント等すべて)をJS変数(clipboard)に保持する。
- キャンバス右上の固定ツールバーに「貼り付け」ボタンを常時表示。clipboardが空の場合はグレーアウト。クリックすると元要素から+20px/+20pxずらした位置に同一プロパティの要素を追加し、追加した要素を自動選択状態にする。
- キーボードショートカット: Ctrl+C / Ctrl+V(macはCmd+C / Cmd+V)でも同等動作。テキスト入力中はブラウザデフォルト動作を優先(input/textareaにfocusがある場合は無効化)。
- clipboardはページ内メモリのみ保持(localStorageには保存しない)。ページリロードでリセットされる。
【2-2. レイヤー順序変更】
- 要素選択中にツールバーに「前面へ」「背面へ」の2ボタンを追加(アイコン: 上矢印・下矢印)。
- 「前面へ」: 内部配列でその要素のindexを1つ増やし(末尾ならそのまま)、Canvas再描画。
- 「背面へ」: 内部配列でindexを1つ減らし(先頭ならそのまま)、Canvas再描画。
- 既存のUndo/Redoスタックにこの操作も登録し、元に戻す・やり直しの対象にする。
【2-3. UI配置】
- スマホ: 選択時に画面下部に出る既存プロパティパネルの上段に「コピー」「前面へ」「背面へ」のアイコンボタンを横並びで追加(各32×32px以上のタップ領域)。
- PC: キャンバス上部の既存ツールバーに同ボタンを追加。要素未選択時はコピー・前面へ・背面へをグレーアウト。
3. 既存機能との整合
- 要素の内部データ構造(配列+オブジェクト)は変更せず、配列のsplice/pushでindex操作するだけなので既存の描画・選択・移動・リサイズ・保存(マイデザイン)・PNG書き出しに影響しない。
- マイデザイン保存はJSON.stringifyで配列ごと保存しているため、順序変更後の状態がそのまま保存される。
- 公開ギャラリーのサムネイル生成はCanvas.toDataURL()を使っているため、レイヤー順変更後に書き出しても正しく反映される。
- 既存ショートカット(Delete削除・Shift回転)と競合しない。
既存のエディタではテキストや図形を一から再作成する手間があり、同じスタイルの要素を複数配置したいときに不便。また要素が重なった際に前後関係を変えるUIがなく、意図した重なり順にするために削除・再追加する必要がある。これらを解消し、編集効率を大幅に向上させる。
2. 具体的な仕様
【2-1. コピー&ペースト】
- 要素選択中にツールバーに「コピー」ボタン(アイコン: 複写マーク)を表示する。クリックするとその要素のプロパティ(種別・座標・サイズ・回転・テキスト内容・色・フォント等すべて)をJS変数(clipboard)に保持する。
- キャンバス右上の固定ツールバーに「貼り付け」ボタンを常時表示。clipboardが空の場合はグレーアウト。クリックすると元要素から+20px/+20pxずらした位置に同一プロパティの要素を追加し、追加した要素を自動選択状態にする。
- キーボードショートカット: Ctrl+C / Ctrl+V(macはCmd+C / Cmd+V)でも同等動作。テキスト入力中はブラウザデフォルト動作を優先(input/textareaにfocusがある場合は無効化)。
- clipboardはページ内メモリのみ保持(localStorageには保存しない)。ページリロードでリセットされる。
【2-2. レイヤー順序変更】
- 要素選択中にツールバーに「前面へ」「背面へ」の2ボタンを追加(アイコン: 上矢印・下矢印)。
- 「前面へ」: 内部配列でその要素のindexを1つ増やし(末尾ならそのまま)、Canvas再描画。
- 「背面へ」: 内部配列でindexを1つ減らし(先頭ならそのまま)、Canvas再描画。
- 既存のUndo/Redoスタックにこの操作も登録し、元に戻す・やり直しの対象にする。
【2-3. UI配置】
- スマホ: 選択時に画面下部に出る既存プロパティパネルの上段に「コピー」「前面へ」「背面へ」のアイコンボタンを横並びで追加(各32×32px以上のタップ領域)。
- PC: キャンバス上部の既存ツールバーに同ボタンを追加。要素未選択時はコピー・前面へ・背面へをグレーアウト。
3. 既存機能との整合
- 要素の内部データ構造(配列+オブジェクト)は変更せず、配列のsplice/pushでindex操作するだけなので既存の描画・選択・移動・リサイズ・保存(マイデザイン)・PNG書き出しに影響しない。
- マイデザイン保存はJSON.stringifyで配列ごと保存しているため、順序変更後の状態がそのまま保存される。
- 公開ギャラリーのサムネイル生成はCanvas.toDataURL()を使っているため、レイヤー順変更後に書き出しても正しく反映される。
- 既存ショートカット(Delete削除・Shift回転)と競合しない。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (flyercraft))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「チラシ・POP自動デザインメーカー FlyerCraft」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=flyercraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/flyercraft/
ご利用ありがとうございます!
ご要望いただいた「チラシ・POP自動デザインメーカー FlyerCraft」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=flyercraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/flyercraft/
ご利用ありがとうございます!
Echo
Iris