リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: ObituaryPen - 追悼メッセージ&弔辞ドラフトメーカー
弔電・手紙向け「縦書きプレビュー&印刷」機能の追加
## 1. 目的
生成・編集した追悼メッセージを縦書きレイアウトでプレビューし、そのまま印刷できる機能を追加する。弔辞や香典袋の一言・手紙など、実際に紙として使うシーンでは縦書きが求められるケースが多く、「コピーしてWordで縦書きにする」という手間をアプリ内で完結させることでユーザー体験を大幅に向上させる。
## 2. 具体的な仕様
### 2-1. UIトリガー
- 既存の「コピー」ボタンの隣に「縦書き印刷」ボタン(🖨 アイコン)を各出力カードに追加する。
- ボタンのラベルは「縦書きプレビュー/印刷」とし、スマホでは短縮表示「縦書き印刷」にする。
### 2-2. プレビューモーダル
- ボタン押下でフルスクリーンのオーバーレイモーダルを開く(既存モーダルがなければ新規作成、あれば流用)。
- モーダル内に縦書きプレビューエリアを表示する。
- CSS: `writing-mode: vertical-rl; text-orientation: mixed;`
- フォント: 游明朝 → 明朝体 → serif のフォールバック
- 用紙サイズ: A4縦を模したアスペクト比(幅210mm相当 × 高297mm相当)で表示。スクロール可。
- 余白: 上下20mm/左右15mm相当のpaddingをCSSで設定。
- 文字サイズ: デフォルト14px、スライダーで10〜18pxに変更可。
- プレビュー内テキストはモーダル内で直接編集可能(contenteditable)にする。
- モーダル上部に「印刷する」「閉じる」ボタンを配置。
### 2-3. 印刷処理
- 「印刷する」ボタン押下で `window.print()` を呼び出す。
- `@media print` CSSでモーダル以外を `display:none` にし、プレビューエリアのみ印刷対象とする。
- 印刷時はヘッダー・フッター非表示を促す注意書きをモーダル内に小さく表示する(「ブラウザの印刷設定でヘッダー/フッターをオフにすると綺麗に印刷できます」)。
- 印刷CSSに `page-break-inside: avoid` を設定し、文章途中での改ページを極力防ぐ。
### 2-4. シーン別レイアウト調整
- 香典袋一言シーンは短文のため、縦書きエリアを名刺サイズ(幅91mm × 高55mm)相当のレイアウトに自動切り替えする。
- 弔辞シーンは長文想定のため、A4複数ページ印刷に対応(`@media print` で自動改ページ)。
- その他シーン(メール・SNS・月命日)は縦書きが不向きのため、ボタン押下時に「このシーンは横書き印刷に切り替えます」と小さく案内し、通常の `writing-mode: horizontal-tb` で印刷する。
### 2-5. データフロー
- プレビューに渡すテキストは既存の出力カード内テキスト(編集済みのものを優先)をそのまま使用する。
- LocalStorage保存・履歴機能には影響を与えない(印刷はビュー操作のみ)。
## 3. 既存機能との整合
- 忌み言葉チェッカー・テンプレート生成・履歴保存・コピー機能はすべて現状のまま維持する。
- 縦書きプレビューはあくまで出力後の「表示・印刷」ステップに追加するだけで、生成ロジック・DB・LocalStorageのスキーマに変更を加えない。
- 新たな外部APIは使用せず、CSS・JavaScriptのみで実装完結する。
- モーダルはスマホでも全画面表示されるようレスポンシブ対応し、スマホからでも印刷ダイアログを呼び出せるようにする(モバイルブラウザのPDF保存フローも自然に利用可能)。
生成・編集した追悼メッセージを縦書きレイアウトでプレビューし、そのまま印刷できる機能を追加する。弔辞や香典袋の一言・手紙など、実際に紙として使うシーンでは縦書きが求められるケースが多く、「コピーしてWordで縦書きにする」という手間をアプリ内で完結させることでユーザー体験を大幅に向上させる。
## 2. 具体的な仕様
### 2-1. UIトリガー
- 既存の「コピー」ボタンの隣に「縦書き印刷」ボタン(🖨 アイコン)を各出力カードに追加する。
- ボタンのラベルは「縦書きプレビュー/印刷」とし、スマホでは短縮表示「縦書き印刷」にする。
### 2-2. プレビューモーダル
- ボタン押下でフルスクリーンのオーバーレイモーダルを開く(既存モーダルがなければ新規作成、あれば流用)。
- モーダル内に縦書きプレビューエリアを表示する。
- CSS: `writing-mode: vertical-rl; text-orientation: mixed;`
- フォント: 游明朝 → 明朝体 → serif のフォールバック
- 用紙サイズ: A4縦を模したアスペクト比(幅210mm相当 × 高297mm相当)で表示。スクロール可。
- 余白: 上下20mm/左右15mm相当のpaddingをCSSで設定。
- 文字サイズ: デフォルト14px、スライダーで10〜18pxに変更可。
- プレビュー内テキストはモーダル内で直接編集可能(contenteditable)にする。
- モーダル上部に「印刷する」「閉じる」ボタンを配置。
### 2-3. 印刷処理
- 「印刷する」ボタン押下で `window.print()` を呼び出す。
- `@media print` CSSでモーダル以外を `display:none` にし、プレビューエリアのみ印刷対象とする。
- 印刷時はヘッダー・フッター非表示を促す注意書きをモーダル内に小さく表示する(「ブラウザの印刷設定でヘッダー/フッターをオフにすると綺麗に印刷できます」)。
- 印刷CSSに `page-break-inside: avoid` を設定し、文章途中での改ページを極力防ぐ。
### 2-4. シーン別レイアウト調整
- 香典袋一言シーンは短文のため、縦書きエリアを名刺サイズ(幅91mm × 高55mm)相当のレイアウトに自動切り替えする。
- 弔辞シーンは長文想定のため、A4複数ページ印刷に対応(`@media print` で自動改ページ)。
- その他シーン(メール・SNS・月命日)は縦書きが不向きのため、ボタン押下時に「このシーンは横書き印刷に切り替えます」と小さく案内し、通常の `writing-mode: horizontal-tb` で印刷する。
### 2-5. データフロー
- プレビューに渡すテキストは既存の出力カード内テキスト(編集済みのものを優先)をそのまま使用する。
- LocalStorage保存・履歴機能には影響を与えない(印刷はビュー操作のみ)。
## 3. 既存機能との整合
- 忌み言葉チェッカー・テンプレート生成・履歴保存・コピー機能はすべて現状のまま維持する。
- 縦書きプレビューはあくまで出力後の「表示・印刷」ステップに追加するだけで、生成ロジック・DB・LocalStorageのスキーマに変更を加えない。
- 新たな外部APIは使用せず、CSS・JavaScriptのみで実装完結する。
- モーダルはスマホでも全画面表示されるようレスポンシブ対応し、スマホからでも印刷ダイアログを呼び出せるようにする(モバイルブラウザのPDF保存フローも自然に利用可能)。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (obituarypen))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「ObituaryPen - 追悼メッセージ&弔辞ドラフトメーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=obituarypen
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/obituarypen/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
ご要望いただいた「ObituaryPen - 追悼メッセージ&弔辞ドラフトメーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=obituarypen
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/obituarypen/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
Echo
Iris