リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 名刺ジェネレーター CardForge
名刺デザインのエクスポート/インポート機能(JSONファイル保存・読み込み)
## 1. 目的
現在の「マイデザイン」機能はブラウザのLocalStorageに最大5件保存できるが、ブラウザのデータ消去・端末変更・別ブラウザへの移行でデータが失われる。デザインデータをJSONファイルとしてローカルに書き出し・読み込みできる機能を追加することで、バックアップや端末間移行を可能にする。共有URL機能との棲み分けは「URLは閲覧・受け渡し用、JSONは保存・移行用」とする。
## 2. 具体的な仕様
### 2-1. エクスポート(保存)
- プレビューパネル下部の `.cf-actions` エリアに「💾 デザインを書き出す」ボタン(`.btn-sub` スタイル)を追加する。
- クリック時、現在のデザイン状態(STORAGE_KEYと同じオブジェクト構造)にメタ情報を付加したJSONをダウンロードさせる。
```json
{
"_app": "cardforge",
"_version": "1.8.0",
"_exported_at": "2026-06-19T12:00:00.000Z",
"design": { ...現在のデザインオブジェクト全体... }
}
```
- ファイル名は `cardforge_YYYYMMDD_HHMMSS.json` 形式(日時はローカル時刻)。
- 実装:`JSON.stringify` → `Blob({type:'application/json'})` → 一時 `<a>` タグの `download` 属性でダウンロード(外部ライブラリ不要)。
### 2-2. インポート(読み込み)
- 同じ `.cf-actions` エリアに「📂 デザインを読み込む」ボタン(`.btn-sub` スタイル)を追加する。
- クリック時、`<input type="file" accept=".json">` を動的生成してファイル選択ダイアログを開く(DOMに常駐させない)。
- FileReader でJSONをパースし、以下のバリデーションを行う:
1. `_app === 'cardforge'` であること
2. `design` キーが存在すること
3. `design.template`(文字列)が存在すること
- バリデーション通過後、確認ダイアログ「現在のデザインを読み込んだデータで上書きします。よろしいですか?」を `confirm()` で表示し、OKなら `design` オブジェクトをLocalStorageのSTORAGE_KEYに保存し `loadDesign()` を呼び出してUIを再描画する。
- エラー時は `.cf-status.is-error` に「読み込みに失敗しました。CardForge が書き出したJSONファイルを選択してください。」と表示。
### 2-3. マイデザイン一括バックアップ(オプション)
- マイデザインパネルの「保存済みデザイン一覧」下部に「全件をJSONで書き出す」ボタンを追加し、PRESET_KEY(最大5件)を同様の形式でエクスポートできるようにする。
```json
{
"_app": "cardforge",
"_version": "1.8.0",
"_exported_at": "...",
"presets": [ ...PRESET_KEYの配列全体... ]
}
```
- 読み込み時は `presets` キーの存在で単体デザインとマイデザインバックアップを自動判別し、マイデザインバックアップの場合はPRESET_KEYを上書き保存後にUIを再描画する。
## 3. 既存機能との整合
- 現行のLocalStorage保存(STORAGE_KEY / PRESET_KEY)・自動復元・マイデザイン機能・共有URLには一切手を加えない。
- エクスポートするJSONの `design` オブジェクト構造は既存の `saveDesign()` / `loadDesign()` が扱うものと完全に同一とし、インポート後も既存の描画ロジックをそのまま使用する。
- ボタンはスマホ表示でも `.cf-actions` の `flex-wrap:wrap` により自然に折り返されるため、レイアウト崩れなし。
- PHP側の変更は不要(サーバーにデータは送信しない)。
## 4. 実装場所
- `assets/cardforge.js` の `cf-actions` ボタン生成部分に2ボタンを追加し、エクスポート・インポート関数を同ファイル末尾に追記する。
- `assets/cardforge.css` に必要であれば `.cf-actions` の幅調整のみ追加(既存スタイルで概ね対応可能)。
現在の「マイデザイン」機能はブラウザのLocalStorageに最大5件保存できるが、ブラウザのデータ消去・端末変更・別ブラウザへの移行でデータが失われる。デザインデータをJSONファイルとしてローカルに書き出し・読み込みできる機能を追加することで、バックアップや端末間移行を可能にする。共有URL機能との棲み分けは「URLは閲覧・受け渡し用、JSONは保存・移行用」とする。
## 2. 具体的な仕様
### 2-1. エクスポート(保存)
- プレビューパネル下部の `.cf-actions` エリアに「💾 デザインを書き出す」ボタン(`.btn-sub` スタイル)を追加する。
- クリック時、現在のデザイン状態(STORAGE_KEYと同じオブジェクト構造)にメタ情報を付加したJSONをダウンロードさせる。
```json
{
"_app": "cardforge",
"_version": "1.8.0",
"_exported_at": "2026-06-19T12:00:00.000Z",
"design": { ...現在のデザインオブジェクト全体... }
}
```
- ファイル名は `cardforge_YYYYMMDD_HHMMSS.json` 形式(日時はローカル時刻)。
- 実装:`JSON.stringify` → `Blob({type:'application/json'})` → 一時 `<a>` タグの `download` 属性でダウンロード(外部ライブラリ不要)。
### 2-2. インポート(読み込み)
- 同じ `.cf-actions` エリアに「📂 デザインを読み込む」ボタン(`.btn-sub` スタイル)を追加する。
- クリック時、`<input type="file" accept=".json">` を動的生成してファイル選択ダイアログを開く(DOMに常駐させない)。
- FileReader でJSONをパースし、以下のバリデーションを行う:
1. `_app === 'cardforge'` であること
2. `design` キーが存在すること
3. `design.template`(文字列)が存在すること
- バリデーション通過後、確認ダイアログ「現在のデザインを読み込んだデータで上書きします。よろしいですか?」を `confirm()` で表示し、OKなら `design` オブジェクトをLocalStorageのSTORAGE_KEYに保存し `loadDesign()` を呼び出してUIを再描画する。
- エラー時は `.cf-status.is-error` に「読み込みに失敗しました。CardForge が書き出したJSONファイルを選択してください。」と表示。
### 2-3. マイデザイン一括バックアップ(オプション)
- マイデザインパネルの「保存済みデザイン一覧」下部に「全件をJSONで書き出す」ボタンを追加し、PRESET_KEY(最大5件)を同様の形式でエクスポートできるようにする。
```json
{
"_app": "cardforge",
"_version": "1.8.0",
"_exported_at": "...",
"presets": [ ...PRESET_KEYの配列全体... ]
}
```
- 読み込み時は `presets` キーの存在で単体デザインとマイデザインバックアップを自動判別し、マイデザインバックアップの場合はPRESET_KEYを上書き保存後にUIを再描画する。
## 3. 既存機能との整合
- 現行のLocalStorage保存(STORAGE_KEY / PRESET_KEY)・自動復元・マイデザイン機能・共有URLには一切手を加えない。
- エクスポートするJSONの `design` オブジェクト構造は既存の `saveDesign()` / `loadDesign()` が扱うものと完全に同一とし、インポート後も既存の描画ロジックをそのまま使用する。
- ボタンはスマホ表示でも `.cf-actions` の `flex-wrap:wrap` により自然に折り返されるため、レイアウト崩れなし。
- PHP側の変更は不要(サーバーにデータは送信しない)。
## 4. 実装場所
- `assets/cardforge.js` の `cf-actions` ボタン生成部分に2ボタンを追加し、エクスポート・インポート関数を同ファイル末尾に追記する。
- `assets/cardforge.css` に必要であれば `.cf-actions` の幅調整のみ追加(既存スタイルで概ね対応可能)。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (cardforge))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「名刺ジェネレーター CardForge」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=cardforge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/cardforge/
ご利用ありがとうございます!
ご要望いただいた「名刺ジェネレーター CardForge」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=cardforge
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/cardforge/
ご利用ありがとうございます!
Echo
Iris