リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 名刺ジェネレーター CardForge
QRコード自動生成・名刺への埋め込み機能の追加
## 1. 目的
メールアドレス・電話番号・URL・SNSリンクなどの連絡先情報を、名刺上にQRコードとして自動生成・配置できる機能を追加する。受け取った相手がスマホでスキャンするだけで連絡先を取得できるようになり、名刺の実用性を大幅に高める。外部APIは使用せず、軽量なJSライブラリ(qrcode.js / qrcode-generator など MIT ライセンスの単一ファイル)をローカルに同梱して実装する。
## 2. 具体的な仕様
### 2-1. QRコード生成パネル
- 編集パネルの既存タブ(テキスト・カラー・フォント・アイコン)に「QR」タブを新設する。
- パネル内の構成:
- **QRコードの内容** ラジオボタン(以下から選択)
- `メールアドレス` → mailto:xxx
- `電話番号` → tel:xxx
- `WebサイトURL` → 手入力テキストボックス
- `vCard(連絡先一括)` → 名前・会社・電話・メール・URLを既存フォームの入力値から自動組み立て
- `カスタムテキスト` → 手入力テキストボックス
- **サイズ** スライダー(24px〜96px、デフォルト64px)
- **配置位置** 6箇所ボタン(左上・中上・右上・左下・中下・右下)
- **余白** スライダー(0〜12px)
- **カラー** 前景色カラーピッカー(デフォルト:現在の文字色)/背景色(デフォルト:透明 or 白)
- 「表面に挿入」「裏面に挿入」ボタン(それぞれ独立して配置可能)
- 「QRコードを削除」ボタン
### 2-2. QRコードのレンダリング
- qrcode-generator.js(同梱)を使い、Canvas 要素に描画後、DataURL(PNG)として取得する。
- 名刺プレビューの Canvas 描画時に、既存の背景・テキスト・アイコン描画の最後(最前面)にQRコード画像を合成して描画する。
- 位置計算:選択された配置ポジション+余白px を基準に座標を算出(名刺 Canvas の論理サイズに対する相対計算)。
- リアルタイム更新:QRパネルの設定変更のたびにプレビューを再描画する。
### 2-3. データ保存・復元
- QRコードの設定(内容タイプ・カスタムテキスト・サイズ・位置・余白・前景色・背景色・表裏どちらに挿入か)を既存の LocalStorage 保存オブジェクトに `qr_front` / `qr_back` キーとして追加保存する。
- マイデザイン機能の保存・呼び出しにも同フィールドを含める。
- QRコードを挿入しない場合は null を保存し、既存データの読み込みに影響を与えない。
### 2-4. PNG / PDF ダウンロードへの反映
- 既存の「PNG ダウンロード」「両面 PDF ダウンロード」は Canvas を元に生成しているため、QRコードがプレビューに合成済みであれば追加実装なしで自動的に出力に反映される。
## 3. 既存機能との整合(壊さない点)
- 既存タブ(テキスト・カラー・フォント・アイコン)の UI・ロジックは一切変更しない。
- QRコードを挿入しない状態(デフォルト)ではこれまでと完全に同じ動作をする。
- LocalStorage のキー構造は既存キーをそのまま維持し、新キーを追加するだけにとどめる(後方互換)。
- vCard生成時は既存のテキスト入力フォームの値を参照するだけで、フォーム側の変更は不要。
- スマホレイアウトでは「QR」タブを既存タブと同列に並べ、タブ切り替えで表示する(パネル全体の高さ変更なし)。
メールアドレス・電話番号・URL・SNSリンクなどの連絡先情報を、名刺上にQRコードとして自動生成・配置できる機能を追加する。受け取った相手がスマホでスキャンするだけで連絡先を取得できるようになり、名刺の実用性を大幅に高める。外部APIは使用せず、軽量なJSライブラリ(qrcode.js / qrcode-generator など MIT ライセンスの単一ファイル)をローカルに同梱して実装する。
## 2. 具体的な仕様
### 2-1. QRコード生成パネル
- 編集パネルの既存タブ(テキスト・カラー・フォント・アイコン)に「QR」タブを新設する。
- パネル内の構成:
- **QRコードの内容** ラジオボタン(以下から選択)
- `メールアドレス` → mailto:xxx
- `電話番号` → tel:xxx
- `WebサイトURL` → 手入力テキストボックス
- `vCard(連絡先一括)` → 名前・会社・電話・メール・URLを既存フォームの入力値から自動組み立て
- `カスタムテキスト` → 手入力テキストボックス
- **サイズ** スライダー(24px〜96px、デフォルト64px)
- **配置位置** 6箇所ボタン(左上・中上・右上・左下・中下・右下)
- **余白** スライダー(0〜12px)
- **カラー** 前景色カラーピッカー(デフォルト:現在の文字色)/背景色(デフォルト:透明 or 白)
- 「表面に挿入」「裏面に挿入」ボタン(それぞれ独立して配置可能)
- 「QRコードを削除」ボタン
### 2-2. QRコードのレンダリング
- qrcode-generator.js(同梱)を使い、Canvas 要素に描画後、DataURL(PNG)として取得する。
- 名刺プレビューの Canvas 描画時に、既存の背景・テキスト・アイコン描画の最後(最前面)にQRコード画像を合成して描画する。
- 位置計算:選択された配置ポジション+余白px を基準に座標を算出(名刺 Canvas の論理サイズに対する相対計算)。
- リアルタイム更新:QRパネルの設定変更のたびにプレビューを再描画する。
### 2-3. データ保存・復元
- QRコードの設定(内容タイプ・カスタムテキスト・サイズ・位置・余白・前景色・背景色・表裏どちらに挿入か)を既存の LocalStorage 保存オブジェクトに `qr_front` / `qr_back` キーとして追加保存する。
- マイデザイン機能の保存・呼び出しにも同フィールドを含める。
- QRコードを挿入しない場合は null を保存し、既存データの読み込みに影響を与えない。
### 2-4. PNG / PDF ダウンロードへの反映
- 既存の「PNG ダウンロード」「両面 PDF ダウンロード」は Canvas を元に生成しているため、QRコードがプレビューに合成済みであれば追加実装なしで自動的に出力に反映される。
## 3. 既存機能との整合(壊さない点)
- 既存タブ(テキスト・カラー・フォント・アイコン)の UI・ロジックは一切変更しない。
- QRコードを挿入しない状態(デフォルト)ではこれまでと完全に同じ動作をする。
- LocalStorage のキー構造は既存キーをそのまま維持し、新キーを追加するだけにとどめる(後方互換)。
- vCard生成時は既存のテキスト入力フォームの値を参照するだけで、フォーム側の変更は不要。
- スマホレイアウトでは「QR」タブを既存タブと同列に並べ、タブ切り替えで表示する(パネル全体の高さ変更なし)。
💬 返信 (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