リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 名刺ジェネレーター CardForge
名刺デザインの共有用プレビューURL生成機能の追加
## 1. 目的
現在のマイデザインはLocalStorageのみで完結しているため、他端末・他者への共有が一切できない。デザインデータをURLのハッシュフラグメント(#以降)にBase64エンコードして埋め込むことで、サーバー送信ゼロ・外部APIキー不要のまま「このURLを開くだけで同じデザインが再現される」共有リンクを生成できるようにする。印刷業者への入稿確認や同僚へのデザイン確認依頼などのユースケースに対応する。
## 2. 具体的な仕様
### 2-1. 「共有リンクを生成」ボタンの追加
- 配置:編集パネル下部の「マイデザイン」セクション付近に「🔗 共有リンクを生成」ボタンを追加する
- PC・スマホ両対応のレイアウト(既存パネル幅に合わせる)
### 2-2. URLエンコード仕様
- 現在の名刺デザインデータ(既存のLocalStorageに保存しているJSONオブジェクトと同一構造)をJSON.stringifyし、btoa(unescape(encodeURIComponent(...)))でBase64エンコードする
- エンコードした文字列を `https://aiapps.jp/cardforge/#d=<Base64文字列>` の形式でURLフラグメントに付与する
- URLフラグメント(#以降)はサーバーに送信されないため、プライバシーポリシーの変更不要
### 2-3. 共有リンクの表示UI
- ボタン押下後、モーダルまたはボタン直下にテキストエリアでURLを表示する
- 「コピー」ボタン(📋)を横に配置し、クリックでclipboard.writeTextまたはdocument.execCommand('copy')でコピー、「コピーしました!」と2秒間表示する
- URLが長すぎる場合(目安:2000文字超)は「デザインが複雑すぎるため短縮できません。マイデザインへの保存をご利用ください。」とメッセージを表示しボタンをdisabledにする
### 2-4. 共有URLからの復元
- ページ読み込み時にlocation.hashを確認し `#d=` プレフィックスが存在する場合、decodeURIComponent(atob(...))でデコードしてJSONをパースする
- パース成功時:「共有リンクからデザインを読み込みました。このデザインを保存しますか?」というバナーを画面上部に表示し、「マイデザインに保存」「閉じる」の2択ボタンを提示する
- パース失敗時(不正なデータ):「URLが無効です。通常のトップページを表示します。」と表示し、デフォルト状態で起動する
- 復元後はlocation.hashをhistory.replaceState('', '', location.pathname)でクリアし、URLをクリーンな状態に戻す
- 既存のLocalStorage自動復元よりも共有URLからの読み込みを優先する(共有URLが存在する場合のみ上書き)
### 2-5. 対象データ範囲
- 表面・裏面のテンプレートID、全テキストフィールド、カラー設定、フォント設定、アイコン配置、QRコード設定を含む(既存のLocalStorage保存データと同一スキーマを流用)
- 画像アップロードデータ(将来機能)は対象外とし、その旨を共有モーダルに注記する
## 3. 既存機能との整合
- LocalStorageへの自動保存・マイデザイン機能は一切変更しない
- PNG/PDFダウンロード機能はそのまま動作する
- 共有URLからの読み込みは「LocalStorage上書き」ではなくメモリ上の状態を更新するだけとし、ユーザーが明示的に「マイデザインに保存」を選択した場合のみLocalStorageに書き込む
- 既存のすべてのテンプレート・フォント・QRコード設定はURLエンコードの対象に含まれるため、共有先でも完全に再現される
- PHP側の変更は不要(静的フロントエンドのみで完結)
現在のマイデザインはLocalStorageのみで完結しているため、他端末・他者への共有が一切できない。デザインデータをURLのハッシュフラグメント(#以降)にBase64エンコードして埋め込むことで、サーバー送信ゼロ・外部APIキー不要のまま「このURLを開くだけで同じデザインが再現される」共有リンクを生成できるようにする。印刷業者への入稿確認や同僚へのデザイン確認依頼などのユースケースに対応する。
## 2. 具体的な仕様
### 2-1. 「共有リンクを生成」ボタンの追加
- 配置:編集パネル下部の「マイデザイン」セクション付近に「🔗 共有リンクを生成」ボタンを追加する
- PC・スマホ両対応のレイアウト(既存パネル幅に合わせる)
### 2-2. URLエンコード仕様
- 現在の名刺デザインデータ(既存のLocalStorageに保存しているJSONオブジェクトと同一構造)をJSON.stringifyし、btoa(unescape(encodeURIComponent(...)))でBase64エンコードする
- エンコードした文字列を `https://aiapps.jp/cardforge/#d=<Base64文字列>` の形式でURLフラグメントに付与する
- URLフラグメント(#以降)はサーバーに送信されないため、プライバシーポリシーの変更不要
### 2-3. 共有リンクの表示UI
- ボタン押下後、モーダルまたはボタン直下にテキストエリアでURLを表示する
- 「コピー」ボタン(📋)を横に配置し、クリックでclipboard.writeTextまたはdocument.execCommand('copy')でコピー、「コピーしました!」と2秒間表示する
- URLが長すぎる場合(目安:2000文字超)は「デザインが複雑すぎるため短縮できません。マイデザインへの保存をご利用ください。」とメッセージを表示しボタンをdisabledにする
### 2-4. 共有URLからの復元
- ページ読み込み時にlocation.hashを確認し `#d=` プレフィックスが存在する場合、decodeURIComponent(atob(...))でデコードしてJSONをパースする
- パース成功時:「共有リンクからデザインを読み込みました。このデザインを保存しますか?」というバナーを画面上部に表示し、「マイデザインに保存」「閉じる」の2択ボタンを提示する
- パース失敗時(不正なデータ):「URLが無効です。通常のトップページを表示します。」と表示し、デフォルト状態で起動する
- 復元後はlocation.hashをhistory.replaceState('', '', location.pathname)でクリアし、URLをクリーンな状態に戻す
- 既存のLocalStorage自動復元よりも共有URLからの読み込みを優先する(共有URLが存在する場合のみ上書き)
### 2-5. 対象データ範囲
- 表面・裏面のテンプレートID、全テキストフィールド、カラー設定、フォント設定、アイコン配置、QRコード設定を含む(既存のLocalStorage保存データと同一スキーマを流用)
- 画像アップロードデータ(将来機能)は対象外とし、その旨を共有モーダルに注記する
## 3. 既存機能との整合
- LocalStorageへの自動保存・マイデザイン機能は一切変更しない
- PNG/PDFダウンロード機能はそのまま動作する
- 共有URLからの読み込みは「LocalStorage上書き」ではなくメモリ上の状態を更新するだけとし、ユーザーが明示的に「マイデザインに保存」を選択した場合のみLocalStorageに書き込む
- 既存のすべてのテンプレート・フォント・QRコード設定はURLエンコードの対象に含まれるため、共有先でも完全に再現される
- PHP側の変更は不要(静的フロントエンドのみで完結)
💬 返信 (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