| name | marp-shots |
| description | README掲載用スクリーンショット（docs/*.png）の生成ワークフロー。「READMEの画像を更新して」「テーマ一覧の画像を撮り直して」「スクショを作り直して」、またはテーマ・レイアウトパターンを追加/変更したあとの見本画像更新で必ず使う。 |
README用スクリーンショット生成ワークフロー
docs/*.png は README に貼るテーマ・レイアウト・パターンの見本画像。手作業で撮らず、scripts/docs-shot.mjs で再現可能な形で生成する。
手順
- 生成:
npm run docs-shot（全プリセット）/ npm run docs-shot -- themes layouts（指定のみ）
- 目視確認: 生成された
docs/<preset>.png をReadツールで開いて確認する
- README側の記述と突き合わせる: 画像の説明文（「上の例の左が navy、右が forest」など）が実際の並び順と合っているか確認する
プリセット
| プリセット | 中身 | 段組 |
|---|
themes | レイアウト×配色×トーンの幅が伝わるよう選んだ表紙（SHOWCASE_THEMES） | 3列 |
tones | トーンの代表（casual/pop/chic/business）の本文 | 2列 |
layouts | レイアウトレイヤーごとの代表の表紙＋本文のペア（1行=1レイアウト） | 2列 |
patterns | 代表的なレイアウトパターン（navy） | 3列・枠線 |
code-block | コードブロック2枚（navy） | 2列・枠線 |
code-block-diff | diff表示（navy / forest） | 2列・枠線 |
gallery | テーマギャラリーのUI（theme-gallery.mjs を実行して撮る。GALLERY_THEMES = 色系統1つにつき1テーマ） | ページ実写 1280×960 |
theme-preview | テーマ切替プレビューのUI（theme-preview.mjs を作例デッキ + PREVIEW_THEMES で実行して撮る） | ページ実写 1280×780 |
仕組み
scripts/docs-shot.mjs が次の3段でPNGを作る。ImageMagick等の追加依存はなく、Marpが使うのと同じローカルChromeだけで完結する。
- プリセット定義から1セル1枚の見本デッキを
.docs-shot/<preset>/ に書き出す
- ディレクトリをまとめてMarpに渡してPNG化する（Chrome起動は1回）
- PNGをCSS Gridに並べたHTMLを作り、Chromeヘッドレスの
--screenshot で1枚に撮る
Chromeは /Applications/Google Chrome.app などの既定パスを探す。見つからない環境では CHROME_PATH で明示する。
見本の内容を変える
すべて scripts/docs-shot.mjs の中で完結している。
- テーマを足した →
SHOWCASE_THEMES / TONES / LAYOUTS の配列に追加する。SHOWCASE_THEMES と LAYOUTS は ['テーマ名', '短い表紙タイトル(省略可)'] の形式。SHOWCASE_THEMES は全件掲載ではなく、各行にレイアウトの異なるテーマを混ぜて選ぶ
- パターンを足した →
PATTERN_SLIDES にスライドのHTMLを追加する（template/slides.md から該当スライドを写す）
- 段組・サイズを変えたい →
PRESETS の cols / cell（1枚の表示幅px）/ gap / frame（枠線の有無）
新しいプリセットを足したら、この表と README の該当箇所にも記載する。
注意
- ユーザーが手動で作成・加工した画像が
docs/ に置かれていることがある（クロップ版など）。全プリセット一括の npm run docs-shot は手動画像も上書きするため、依頼された画像だけをプリセット指定で再生成し、それ以外には触れない。手動画像を上書きしてよいかはユーザーに確認する
- 見本デッキは
paginate: false。ページ番号は見本には不要
- 出力サイズは
cell と列数から計算している。1枚の高さは常に16:9
.docs-shot/ は生成のたびに作り直され、最後に削除される（.gitignore済み）
