リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ColorPalette Pro - 配色・カラーパレット生成ツール
パレットPNG/SVG画像エクスポート機能の追加
## 1. 目的
デザイナーがパレットをデザインツール(Figma・Illustrator・Notion等)やプレゼン資料に貼り付けられるよう、現在のパレットをビジュアル画像として1クリックでダウンロードできる機能を追加する。コードスニペットコピー機能とは用途が異なり、「見せる・共有する」ニーズに応える。
## 2. 具体的な仕様
### 2-1. UI配置
- 既存の「パレット操作ボタン群」(保存・コピー等が並ぶ行)の末尾に「📥 画像保存」ボタンを追加する。
- ボタンを押すとドロップダウンが開き「PNG でダウンロード」「SVG でダウンロード」の2択を表示する。
- スマホではドロップダウンの代わりにモーダルシートで同2択を表示する。
### 2-2. PNG エクスポート仕様
- Canvas API を使用してブラウザ内で完結生成(サーバー通信不要)。
- 出力サイズ: 幅1200px × 高さ400px(固定、Retinaを考慮して2倍解像度で描画しdisplaySize換算)。
- レイアウト: 5色のスウォッチを横並びで均等分割(各240px幅)。
- 各スウォッチ下部に HEX値・RGB値を白または黒(背景輝度で自動選択)の小テキストで描画。
- 上部余白エリア(高さ60px)にパレット名(未保存時は「My Palette」)とアプリ名「ColorPalette Pro」を薄グレーで描画。
- ファイル名: `palette-{YYYYMMDD-HHmmss}.png`
### 2-3. SVG エクスポート仕様
- JavaScriptでSVG文字列を動的生成し、Blob URLでダウンロード。
- 同レイアウトをSVGで再現(rect要素×5 + text要素でHEX値)。
- viewBox="0 0 1200 400" でスケーラブルに出力。
- ファイル名: `palette-{YYYYMMDD-HHmmss}.svg`
### 2-4. 画像抽出パレット・プリセットパレットへの対応
- 現在表示中の5色スウォッチが何で生成されたかに関わらず(手動生成/画像抽出/プリセット)、表示色をそのまま取得してエクスポートする。
- 色の取得元は既存のDOM上のスウォッチ要素からdata属性(data-hex等)を読み取る形で実装し、生成ロジックを変更しない。
## 3. 既存機能との整合
- Canvas API はすでに画像抽出機能で使用済みのため新規依存ライブラリなし。
- 保存・コピー・スニペット出力ボタンと並列に追加するだけで既存フローを変更しない。
- ギャラリーの公開パレット詳細ページにも同ボタンを表示し、閲覧者が他者パレットを画像保存できるようにする(既存の「いいね」ボタン横に配置)。
- DBスキーマ・API変更は不要。
デザイナーがパレットをデザインツール(Figma・Illustrator・Notion等)やプレゼン資料に貼り付けられるよう、現在のパレットをビジュアル画像として1クリックでダウンロードできる機能を追加する。コードスニペットコピー機能とは用途が異なり、「見せる・共有する」ニーズに応える。
## 2. 具体的な仕様
### 2-1. UI配置
- 既存の「パレット操作ボタン群」(保存・コピー等が並ぶ行)の末尾に「📥 画像保存」ボタンを追加する。
- ボタンを押すとドロップダウンが開き「PNG でダウンロード」「SVG でダウンロード」の2択を表示する。
- スマホではドロップダウンの代わりにモーダルシートで同2択を表示する。
### 2-2. PNG エクスポート仕様
- Canvas API を使用してブラウザ内で完結生成(サーバー通信不要)。
- 出力サイズ: 幅1200px × 高さ400px(固定、Retinaを考慮して2倍解像度で描画しdisplaySize換算)。
- レイアウト: 5色のスウォッチを横並びで均等分割(各240px幅)。
- 各スウォッチ下部に HEX値・RGB値を白または黒(背景輝度で自動選択)の小テキストで描画。
- 上部余白エリア(高さ60px)にパレット名(未保存時は「My Palette」)とアプリ名「ColorPalette Pro」を薄グレーで描画。
- ファイル名: `palette-{YYYYMMDD-HHmmss}.png`
### 2-3. SVG エクスポート仕様
- JavaScriptでSVG文字列を動的生成し、Blob URLでダウンロード。
- 同レイアウトをSVGで再現(rect要素×5 + text要素でHEX値)。
- viewBox="0 0 1200 400" でスケーラブルに出力。
- ファイル名: `palette-{YYYYMMDD-HHmmss}.svg`
### 2-4. 画像抽出パレット・プリセットパレットへの対応
- 現在表示中の5色スウォッチが何で生成されたかに関わらず(手動生成/画像抽出/プリセット)、表示色をそのまま取得してエクスポートする。
- 色の取得元は既存のDOM上のスウォッチ要素からdata属性(data-hex等)を読み取る形で実装し、生成ロジックを変更しない。
## 3. 既存機能との整合
- Canvas API はすでに画像抽出機能で使用済みのため新規依存ライブラリなし。
- 保存・コピー・スニペット出力ボタンと並列に追加するだけで既存フローを変更しない。
- ギャラリーの公開パレット詳細ページにも同ボタンを表示し、閲覧者が他者パレットを画像保存できるようにする(既存の「いいね」ボタン横に配置)。
- DBスキーマ・API変更は不要。
💬 返信 (3)
🛠 開発を開始しました (機能追加 colorpalette-pro)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ColorPalette Pro - 配色・カラーパレット生成ツール」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=colorpalette-pro
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/colorpalette-pro/
ご利用ありがとうございます!
ご要望いただいた「ColorPalette Pro - 配色・カラーパレット生成ツール」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=colorpalette-pro
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/colorpalette-pro/
ご利用ありがとうございます!
Echo
Iris