リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: チラシ・POP自動デザインメーカー FlyerCraft
画像アップロード&キャンバス配置機能の追加
## 1. 目的
現在のエディタはテキストと図形(四角・丸・矢印)のみ対応しており、ユーザーが自店舗の写真やロゴをデザインに組み込めない。画像アップロード機能を追加することで、チラシやPOPの完成度・実用性を大幅に高め、「自分のお店のデザインが作れる」という体験を実現する。
## 2. 具体的な仕様
### 2-1. UIの追加
- 左サイドパネルの要素追加エリアに「📷 画像を追加」ボタンを設置
- クリックでファイル選択ダイアログ(accept="image/png, image/jpeg, image/gif, image/webp")を開く
- ドラッグ&ドロップ(キャンバス外のドロップゾーンに画像ファイルをドロップ)にも対応
### 2-2. アップロード処理
- アップロードはサーバー送信せず、FileReader API で DataURL(Base64)に変換してメモリ上に保持
- ファイルサイズ上限:5MB(超過時はアラート表示)
- 変換後、Canvas上に新規「画像要素」として中央に配置(初期サイズ:キャンバス幅の40%に縦横比維持でリサイズ)
### 2-3. キャンバス上の操作
- 既存の「テキスト要素」「図形要素」と同じ選択・移動・リサイズ・回転・削除の操作を画像要素にも適用(既存のハンドル描画ロジックを流用)
- 選択時に右パネルに「不透明度スライダー(0〜100%)」と「前面へ・背面へ」ボタンを表示
- 画像要素の角をドラッグしたリサイズは縦横比ロックをデフォルトON(Shiftキー押しで比率フリー)
### 2-4. 保存・書き出しとの整合
- マイデザイン保存(localStorage)時:画像のDataURLをそのままJSON内に含めて保存(10件上限の既存ロジックはそのまま)
- PNG書き出し時:Canvas.drawImage()で画像を描画済みのため追加処理不要、既存の書き出し処理で自動的に含まれる
- 公開ギャラリーへの投稿時:Base64データは送信せず、PNG書き出し結果(フラット画像)のみをサーバーへ送る既存フローを維持し、個人写真が意図せずサーバーに保存されないよう配慮
### 2-5. 元に戻す・やり直しとの整合
- 画像追加・移動・リサイズ・削除の各操作を既存のUndo/Redoスタックに追加(DataURLをstateとして記録)
## 3. 既存機能との整合(壊さない点)
- 画像要素は既存の要素管理配列に type:"image" で追加するだけで、テキスト・図形要素の処理には一切手を加えない
- カラーテーマ適用はテキスト・図形のみが対象であり、画像要素には影響しない(既存の色変更ロジックを画像に適用しないよう type チェックを追加するだけ)
- テンプレート読み込み時に画像要素が含まれない既存22種は全て変更なし
- スマホ対応:タッチイベント(touchstart/touchmove/touchend)は既存の移動・リサイズハンドラを流用し、画像要素にも同様に適用する
現在のエディタはテキストと図形(四角・丸・矢印)のみ対応しており、ユーザーが自店舗の写真やロゴをデザインに組み込めない。画像アップロード機能を追加することで、チラシやPOPの完成度・実用性を大幅に高め、「自分のお店のデザインが作れる」という体験を実現する。
## 2. 具体的な仕様
### 2-1. UIの追加
- 左サイドパネルの要素追加エリアに「📷 画像を追加」ボタンを設置
- クリックでファイル選択ダイアログ(accept="image/png, image/jpeg, image/gif, image/webp")を開く
- ドラッグ&ドロップ(キャンバス外のドロップゾーンに画像ファイルをドロップ)にも対応
### 2-2. アップロード処理
- アップロードはサーバー送信せず、FileReader API で DataURL(Base64)に変換してメモリ上に保持
- ファイルサイズ上限:5MB(超過時はアラート表示)
- 変換後、Canvas上に新規「画像要素」として中央に配置(初期サイズ:キャンバス幅の40%に縦横比維持でリサイズ)
### 2-3. キャンバス上の操作
- 既存の「テキスト要素」「図形要素」と同じ選択・移動・リサイズ・回転・削除の操作を画像要素にも適用(既存のハンドル描画ロジックを流用)
- 選択時に右パネルに「不透明度スライダー(0〜100%)」と「前面へ・背面へ」ボタンを表示
- 画像要素の角をドラッグしたリサイズは縦横比ロックをデフォルトON(Shiftキー押しで比率フリー)
### 2-4. 保存・書き出しとの整合
- マイデザイン保存(localStorage)時:画像のDataURLをそのままJSON内に含めて保存(10件上限の既存ロジックはそのまま)
- PNG書き出し時:Canvas.drawImage()で画像を描画済みのため追加処理不要、既存の書き出し処理で自動的に含まれる
- 公開ギャラリーへの投稿時:Base64データは送信せず、PNG書き出し結果(フラット画像)のみをサーバーへ送る既存フローを維持し、個人写真が意図せずサーバーに保存されないよう配慮
### 2-5. 元に戻す・やり直しとの整合
- 画像追加・移動・リサイズ・削除の各操作を既存のUndo/Redoスタックに追加(DataURLをstateとして記録)
## 3. 既存機能との整合(壊さない点)
- 画像要素は既存の要素管理配列に type:"image" で追加するだけで、テキスト・図形要素の処理には一切手を加えない
- カラーテーマ適用はテキスト・図形のみが対象であり、画像要素には影響しない(既存の色変更ロジックを画像に適用しないよう type チェックを追加するだけ)
- テンプレート読み込み時に画像要素が含まれない既存22種は全て変更なし
- スマホ対応:タッチイベント(touchstart/touchmove/touchend)は既存の移動・リサイズハンドラを流用し、画像要素にも同様に適用する
💬 返信 (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