リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 旅のしおり自動生成メーカー TravelNote
しおりPDFダウンロード機能の追加(サーバーサイド生成)
## 1. 目的
現状は印刷ダイアログ経由でのみ紙・PDFに出力できるが、印刷設定に不慣れなユーザーや「後でPDFで保存したい」ユーザーが離脱しやすい。「PDFとしてダウンロード」ボタン1クリックで完成済みのA4 PDFを手元に保存できるようにし、仲間への配布・保存の利便性を高める。外部APIキーは使わず、PHPのmPDF(Composerで導入)またはTCPDFを使ってサーバーサイドで生成する。
## 2. 具体的な仕様
### 2-1. UIの追加
- しおり表示ページ(編集用URL・共有URL両方)の画面上部アクションバーに「📥 PDFダウンロード」ボタンを追加する。
- 既存の「🖨 印刷」ボタンの隣に配置。スマホでは両ボタンを横並びで等幅表示(各50%幅)。
- ボタン押下中はスピナー表示+非活性にして二重送信を防ぐ。
### 2-2. リクエスト仕様
- ボタンクリックでフォームをPOST送信(または既存しおりIDをGETパラメータで渡す)し、`/pdf_export.php?id={しおりハッシュ}` にリクエストを送る。
- サーバーはDBからしおりデータを取得し、mPDF(推奨)またはTCPDFでPDFを生成してストリーム出力する。
- Content-Type: application/pdf
- Content-Disposition: attachment; filename="travelnote_{しおりタイトル}_{日付}.pdf"
### 2-3. PDFレイアウト仕様
- 用紙サイズ:A4縦
- 既存 print.css の定義(余白・改ページ位置・フォントサイズ)に準拠したHTML文字列をmPDFに渡すことで、印刷プレビューと見た目を統一する。
- 含めるページ:表紙 → 日別タイムライン(移動ブロック含む) → 持ち物チェックリスト → 緊急連絡先欄(現行の印刷と同順)。
- SVGイラストはmPDFのSVGレンダリング機能で描画(現行の表紙SVGをそのまま使用)。
- フォント:日本語対応のIPAexゴシック(mPDFに同梱のフォントで代替可)を使用し文字化けを防ぐ。
### 2-4. サーバーサイド実装
- `pdf_export.php` を新規作成。
- しおりIDの存在チェック・SQLインジェクション対策(PDO バインド)を行い、存在しないIDはエラー画面へリダイレクト。
- 共有URL(読み取り専用)からもPDFダウンロード可能(受け取った仲間も保存できる)。
- 生成したPDFはサーバーには保存せず、毎回ストリーム出力(ディスク容量を消費しない)。
- mPDFがない環境向けのフォールバックとして、`composer.json` に `"mpdf/mpdf": "^8.2"` を追記するだけで動作するようにする。
### 2-5. エラーハンドリング
- mPDFライブラリが未インストールの場合はボタンを非表示にし、管理者向けエラーログに記録。
- PDF生成中に例外が発生した場合はHTTP 500を返し、フロントエンドは「PDF生成に失敗しました。印刷機能をお使いください。」とトーストで通知。
## 3. 既存機能との整合
- 既存の印刷ボタン・共有URL・編集機能・しおりDBスキーマは一切変更しない。
- `pdf_export.php` は完全に独立したファイルとして追加するのみ。
- 既存の print.css を読み込んでHTMLをmPDFに渡す方式のため、デザイン変更が将来あっても print.css を直せばPDFにも自動反映される。
- チェックリストのチェック状態はブラウザ保存(localStorage)のため、PDFにはチェックなしの初期状態で出力する(印刷と同仕様)。
現状は印刷ダイアログ経由でのみ紙・PDFに出力できるが、印刷設定に不慣れなユーザーや「後でPDFで保存したい」ユーザーが離脱しやすい。「PDFとしてダウンロード」ボタン1クリックで完成済みのA4 PDFを手元に保存できるようにし、仲間への配布・保存の利便性を高める。外部APIキーは使わず、PHPのmPDF(Composerで導入)またはTCPDFを使ってサーバーサイドで生成する。
## 2. 具体的な仕様
### 2-1. UIの追加
- しおり表示ページ(編集用URL・共有URL両方)の画面上部アクションバーに「📥 PDFダウンロード」ボタンを追加する。
- 既存の「🖨 印刷」ボタンの隣に配置。スマホでは両ボタンを横並びで等幅表示(各50%幅)。
- ボタン押下中はスピナー表示+非活性にして二重送信を防ぐ。
### 2-2. リクエスト仕様
- ボタンクリックでフォームをPOST送信(または既存しおりIDをGETパラメータで渡す)し、`/pdf_export.php?id={しおりハッシュ}` にリクエストを送る。
- サーバーはDBからしおりデータを取得し、mPDF(推奨)またはTCPDFでPDFを生成してストリーム出力する。
- Content-Type: application/pdf
- Content-Disposition: attachment; filename="travelnote_{しおりタイトル}_{日付}.pdf"
### 2-3. PDFレイアウト仕様
- 用紙サイズ:A4縦
- 既存 print.css の定義(余白・改ページ位置・フォントサイズ)に準拠したHTML文字列をmPDFに渡すことで、印刷プレビューと見た目を統一する。
- 含めるページ:表紙 → 日別タイムライン(移動ブロック含む) → 持ち物チェックリスト → 緊急連絡先欄(現行の印刷と同順)。
- SVGイラストはmPDFのSVGレンダリング機能で描画(現行の表紙SVGをそのまま使用)。
- フォント:日本語対応のIPAexゴシック(mPDFに同梱のフォントで代替可)を使用し文字化けを防ぐ。
### 2-4. サーバーサイド実装
- `pdf_export.php` を新規作成。
- しおりIDの存在チェック・SQLインジェクション対策(PDO バインド)を行い、存在しないIDはエラー画面へリダイレクト。
- 共有URL(読み取り専用)からもPDFダウンロード可能(受け取った仲間も保存できる)。
- 生成したPDFはサーバーには保存せず、毎回ストリーム出力(ディスク容量を消費しない)。
- mPDFがない環境向けのフォールバックとして、`composer.json` に `"mpdf/mpdf": "^8.2"` を追記するだけで動作するようにする。
### 2-5. エラーハンドリング
- mPDFライブラリが未インストールの場合はボタンを非表示にし、管理者向けエラーログに記録。
- PDF生成中に例外が発生した場合はHTTP 500を返し、フロントエンドは「PDF生成に失敗しました。印刷機能をお使いください。」とトーストで通知。
## 3. 既存機能との整合
- 既存の印刷ボタン・共有URL・編集機能・しおりDBスキーマは一切変更しない。
- `pdf_export.php` は完全に独立したファイルとして追加するのみ。
- 既存の print.css を読み込んでHTMLをmPDFに渡す方式のため、デザイン変更が将来あっても print.css を直せばPDFにも自動反映される。
- チェックリストのチェック状態はブラウザ保存(localStorage)のため、PDFにはチェックなしの初期状態で出力する(印刷と同仕様)。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (travelnote))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「旅のしおり自動生成メーカー TravelNote」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=travelnote
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/travelnote/
ご利用ありがとうございます!
ご要望いただいた「旅のしおり自動生成メーカー TravelNote」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=travelnote
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/travelnote/
ご利用ありがとうございます!
Echo
Iris