# 発展課題 3：PDF 出力ボタン

## ゴール

「現在の画面を PDF として保存」ボタンを追加して、報告書としてベンダーに渡せる形にする。

## 完成イメージ

- 画面右上に「PDF として保存」ボタン
- 押すと、現在のグラフ＋統計量＋データプレビューが 1 枚の PDF として生成される
- ブラウザの印刷ダイアログを使う方式が最もシンプル（外部ライブラリ不要）

## Codex への指示例

```
画面右上に「PDF として保存」ボタンを追加してください。
- ボタンをクリックすると window.print() を呼び出す
- @media print の CSS を追加し、印刷時にはドロップゾーンと「PDF として保存」ボタンを非表示
- グラフはそのまま、統計量テーブルとプレビューテーブルも改ページに耐える形に
- 印刷時のフォントサイズは少し小さめ（11px）に調整
```

## 補足：印刷 CSS は「画面用 CSS とは別物」

ブラウザは `window.print()` を呼ぶと、`@media print` の CSS だけを当て直してレンダリングします。画面では消したい要素を `display: none` にし、改ページしたい場所には `page-break-before: always` を指定すると、報告書として見られる体裁になります。

`page-break-inside: avoid` をテーブルやカードに指定すると、ページ境界で要素が分断されません。実務で社内会議の配布資料を作る時、この技は強力です。

## つまずきポイント

- グラフが印刷で崩れる → Chart.js は印刷時に Canvas を再描画しないことがある。Codex に「window.matchMedia('print') を使って印刷直前にグラフを再描画」と指示
- ヘッダーが冗長 → @page で印刷ヘッダー・フッターを非表示にする CSS を追加
- 改ページが汚い → 統計量テーブルに `page-break-inside: avoid` を追加
- ボタンが PDF に写る → `@media print` で `.print-button { display: none; }` を指定

## Tips（実務で効かせるコツ）

- `@page` セレクタで余白を調整できる。`@page { size: A4; margin: 14mm; }` でビジネス向けの余白に
- 印刷時に背景色を残すには、ボタンを押す前にブラウザ印刷ダイアログで「背景のグラフィック」をオンにしてもらう必要がある（OS によって挙動が違う）
- PDF プレビューは Chrome / Edge が最も忠実。Safari は印刷 CSS の解釈が独自で、レイアウトが少しズレることがある

## 注意

- 印刷時にしか発火しないバグは検出しづらい。Chrome の DevTools → Command Menu → 「Show Rendering」→ 「Emulate CSS media type: print」で確認できる
- 画像（グラフ Canvas）は印刷時にぼやけることがある。`@media print` で width / height を明示すると安定する

## 応用

PDF 化までできれば、ベンダー宛て資料の「機能要件」セクションにそのまま貼り付けて配布できます。研修終了後の最大の応用ポイントです。

## 参考リンク

- [MDN — @media print](https://developer.mozilla.org/ja/docs/Web/CSS/@media)
- [MDN — Window.print()](https://developer.mozilla.org/ja/docs/Web/API/Window/print)
- [MDN — page-break-inside](https://developer.mozilla.org/ja/docs/Web/CSS/page-break-inside)
- [Chart.js — Responsive Charts（印刷時の挙動）](https://www.chartjs.org/docs/latest/configuration/responsive.html)