リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 名刺ジェネレーター CardForge
名刺デザインの印刷ガイド付きPDFシート出力機能(同一デザインを面付け)
1. 目的
名刺を実際に印刷・利用するユーザーが「家庭用プリンターやコンビニ印刷でそのまま使える」状態のPDFを得られるようにする。現状の両面PDFは実寸91×55mmの1枚出力だが、A4用紙に複数枚面付けしたシートを出力できれば、印刷コストの削減と利便性が大きく向上する。
2. 具体的な仕様
【追加UIの場所】
既存の「PDFダウンロード」ボタンの横または下に「印刷シートPDF」ボタンを新設する。クリック時にモーダルを表示し、設定後に生成・ダウンロードする。
【モーダルの設定項目】
- 用紙サイズ選択: A4(デフォルト)/ はがき(100×148mm)
- 面付け枚数: 表面のみ×10枚 / 表面×5枚+裏面×5枚 / 表裏交互(印刷後に折って貼り合わせる想定) の3パターンをラジオボタンで選択
- トンボ(切り取り線)表示: ON/OFFチェックボックス(ONの場合、各名刺の四隅に0.3ptのグレーのトリムマーク線を描画)
- 余白設定: 用紙端からのマージン(5mm / 10mm / 15mm)をセレクトで選択
- 「生成してダウンロード」ボタン
【PDF生成ロジック(外部ライブラリ不使用)】
既存の両面PDF生成と同様に、canvas要素でレンダリングしてDataURL化したうえで、PDF構造を文字列として組み立てる既存方式を流用する。
- A4サイズ: 210×297mm → ポイント換算(1mm≒2.8346pt)で595×842pt
- 名刺1枚: 91×55mm → 257.9×155.9pt
- 設定マージンを除いた印刷可能領域に名刺を左上から横並びに配置し、行が埋まったら次の行へ折り返す
- 面付けパターン「表面×5枚+裏面×5枚」の場合: PDFを2ページ構成にし、1ページ目に表面を5枚、2ページ目に裏面を5枚配置する
- トンボON時: 各名刺の四隅から外側へ3mm延びる直線(0.3pt, グレー #999)をPDFのストリーム命令で描画する
- 名刺間の隙間は一律2mmとする
【ファイル名】
cardforge_sheet_YYYYMMDD.pdf の形式で保存
3. 既存機能との整合
- 既存の「両面PDFダウンロード」ボタンは削除・変更せず、そのまま維持する
- 「印刷シートPDF」ボタンはPNGダウンロード・両面PDFとは独立して動作し、既存のcanvasレンダリング関数を読み取り専用で呼び出すだけなのでデザイン編集・プレビュー・保存の各機能には一切影響しない
- LocalStorageの保存データ構造に変更を加えない
- スマホ表示では「印刷シートPDF」ボタンをPNGダウンロードボタンと縦に並べ、モーダルはフル幅表示にしてタップ操作しやすくする
名刺を実際に印刷・利用するユーザーが「家庭用プリンターやコンビニ印刷でそのまま使える」状態のPDFを得られるようにする。現状の両面PDFは実寸91×55mmの1枚出力だが、A4用紙に複数枚面付けしたシートを出力できれば、印刷コストの削減と利便性が大きく向上する。
2. 具体的な仕様
【追加UIの場所】
既存の「PDFダウンロード」ボタンの横または下に「印刷シートPDF」ボタンを新設する。クリック時にモーダルを表示し、設定後に生成・ダウンロードする。
【モーダルの設定項目】
- 用紙サイズ選択: A4(デフォルト)/ はがき(100×148mm)
- 面付け枚数: 表面のみ×10枚 / 表面×5枚+裏面×5枚 / 表裏交互(印刷後に折って貼り合わせる想定) の3パターンをラジオボタンで選択
- トンボ(切り取り線)表示: ON/OFFチェックボックス(ONの場合、各名刺の四隅に0.3ptのグレーのトリムマーク線を描画)
- 余白設定: 用紙端からのマージン(5mm / 10mm / 15mm)をセレクトで選択
- 「生成してダウンロード」ボタン
【PDF生成ロジック(外部ライブラリ不使用)】
既存の両面PDF生成と同様に、canvas要素でレンダリングしてDataURL化したうえで、PDF構造を文字列として組み立てる既存方式を流用する。
- A4サイズ: 210×297mm → ポイント換算(1mm≒2.8346pt)で595×842pt
- 名刺1枚: 91×55mm → 257.9×155.9pt
- 設定マージンを除いた印刷可能領域に名刺を左上から横並びに配置し、行が埋まったら次の行へ折り返す
- 面付けパターン「表面×5枚+裏面×5枚」の場合: PDFを2ページ構成にし、1ページ目に表面を5枚、2ページ目に裏面を5枚配置する
- トンボON時: 各名刺の四隅から外側へ3mm延びる直線(0.3pt, グレー #999)をPDFのストリーム命令で描画する
- 名刺間の隙間は一律2mmとする
【ファイル名】
cardforge_sheet_YYYYMMDD.pdf の形式で保存
3. 既存機能との整合
- 既存の「両面PDFダウンロード」ボタンは削除・変更せず、そのまま維持する
- 「印刷シートPDF」ボタンはPNGダウンロード・両面PDFとは独立して動作し、既存のcanvasレンダリング関数を読み取り専用で呼び出すだけなのでデザイン編集・プレビュー・保存の各機能には一切影響しない
- LocalStorageの保存データ構造に変更を加えない
- スマホ表示では「印刷シートPDF」ボタンをPNGダウンロードボタンと縦に並べ、モーダルはフル幅表示にしてタップ操作しやすくする
💬 返信 (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