【元記事】(https://zenn.dev/uehaj/articles/claude-code-fancy-html-hook)
3行まとめ
- AIがMarkdownを書く時代、人間がレビューしやすいようHTMLでドキュメントを生成する手法
- Claude CodeのPostToolUse hookで.md書き出しを検知し、
claude -pを子プロセス起動してファンシーHTMLを自動生成 - Markdownは「書く用（diff/AI編集）」、HTMLは「読む用（レビュー）」の二段構えで両方の強みを活かす
要約
背景・課題
- AI駆動開発では人間がMarkdownを直接書いたり修正したりしなくなる
- Markdownは「書きやすいが読みやすいとは言えない」、HTMLは「書きにくいが読みやすくできる」
- レビュー目的ならHTMLの方が図表・色・アニメーションで視認性が高い
アプローチ
~/.claude/settings.jsonのPostToolUse hookにスクリプトを登録- .md書き出し時にAppleScriptダイアログで確認→python-markdownで通常HTML→さらに
claude -pでインフォグラフィック風HTMLをバックグラウンド生成 - 生成後は
openでブラウザ自動表示、macOS通知も送信
成果・ポイント
- Markdownはgit diffやAI編集に残し、HTMLはレビュー用ビューとして追加生成
claude -pのサブプロセス呼び出しパターンは要約・翻訳・図解などに応用可能- ファンシー生成は数十秒〜分単位かかるため
&で非同期化、ダイアログでオプトイン推奨