【無料】Markdownを保存するだけでHTML自動変換。Claude Codeの「Hooks」が天才的だった
こんにちは、れん学長です（2026年8月14日時点）。
今日は「Markdownを保存したら、読みやすいHTMLが勝手にできあがる」という環境を、実際に自分のパソコンへ導入してみた話です。
Claude CodeやCodex、Cursorに作ってもらったMarkdownファイル、表や画像が入ると急に読みにくくなって、「これHTMLにして」と頼み直すことってありませんか？
私、これかなりあるんですよね。
で、この仕組みを入れると、その頼み直しという作業自体が消えるんです。
きっかけは、まつにぃさんのこちらのポストで紹介されていた記事でした。
https://x.com/yugen_matuni/status/2087131962922418410
ここからは、仕組みの正体と、プロンプトを貼るだけの導入手順、実際に動いた様子までまとめます。
読み終わる頃には、AIの書いたファイルを読みやすい形で読むのが当たり前になる環境の作り方がわかるはずです。
保存した瞬間に何が起きるのか
仕組みはシンプルで、AIコーディングツールのHooksという機能に、変換用の小さなプログラムを1本登録するだけです。
登録しておくと、AIがMarkdownファイルを保存するたびに、同じフォルダへ同じ名前のHTMLが自動で生成されます。ブラウザで開けば、Markdownのままよりずっと読みやすい見た目で表示されます。
まつにぃさんの記事によれば、効果は2つ。
1つ目はコストです。変換にAIを使わないので利用料が一切かからず、チャットの往復も減ったそうです
2つ目は認知負荷です。頼むか我慢するかを迷うまでもなく、意識せずにHTMLを読むようになったそうです
記事いわく、1回ごとの節約は小さくても、毎日何十回とMarkdownを読む生活では差が積み重なるとのこと。これは私も実感があります。
Hooksってなに？
Hookは英語で「引っ掛けるカギ」のこと。エージェントの動作の前後に、自分の処理を引っ掛けて差し込む仕組みです。
今回使うのはPostToolUseという種類で、これはツールの実行直後に走ります。AIがファイルを書き込んだ直後に発動して、変換が動くイメージですね。
で、ここが天才的なところなんですが、変換を担当するのはAIではなく、自分のパソコンの中だけで動く小さなPythonプログラムです。だからAI利用料もトークン消費も完全にゼロ。
しかも変換条件が賢くて、見出しがあって本文800文字以上、または画像ありのファイルだけを変換します。短い作業メモまで全部HTML化されてフォルダが散らかる、みたいなことにはなりません。
やってみた: プロンプトを貼るだけ
まつにぃさんの記事の後半に、この仕組みをあなたのAI自身に作らせるプロンプトが載っています。記事によれば、Claude CodeやCodex、Cursorを使っている人なら、貼り付けて実行するだけで同じものを作れるとのことです。
私はまつにぃさんのポストを、そのままClaude Codeに渡しました。モデルはFable 5、推論は超高の設定です。さらに権限の確認をスキップして、AIに自由に動いてもらう設定にしていました。
すると「やって」と言う前に記事を読んで、載っているプロンプトまで自分で実行してくれたんです。環境の調査からプログラムの作成、設定の登録、動作テストまで、全部おまかせでした。
ただ、記事には実行前の注意が2つ書かれていて、ここは大事です。
Hooksの設定はエージェントの動作へ直接影響するので、実行前にプロジェクトをGitでコミットして、いつでも元へ戻せる状態にしておくと安全です
生成されたプログラムと登録先の設定は、内容を一通り自分の目で確認してください。特に、変換に失敗したときでもエージェント本体の作業を止めない作りになっているかが大事です
ちなみに私の場合は、確認する前にAIが先へ進んでしまったので、あとから生成されたプログラムと設定を自分の目で確認しました。うちの環境では、変換に失敗してもエラーを外に出さない作りで、2つ目の注意点はクリアでした。
あなたが試すときは、先にGitのコミットだけ済ませておくのがおすすめです。
Gitを使っていない方は、AIの設定が入っているフォルダと作業中のフォルダを、実行前にまるごとコピーしてバックアップしておけば大丈夫です。「実行する前に、元に戻せるようにバックアップしておいて」とAIに一言頼んでおく形でもOKですよ。
話を私の環境に戻すと、設定は次に新しいセッションを立ち上げたときから有効になります。なので新しいセッションを開いて、作業のまとめをMarkdownで書いてもらったら、その場でHTMLができていました。
正直「お、早っ」と声が出ましたね。
ついでに、こんな感じで追加の注文もしてみました。
できあがったHTMLの配色を、ビジネスで使いやすいブルー系で、もう少し見やすい形に変えてもらえますか
そうしたら、青系のクールな配色にすぐ変わりました。デザインの調整もAIに一言頼むだけです。
使ってみて感じたこと
良かったところは3つあります。
導入は本当にプロンプト1回でした。途中で少し詰まった部分もAIが自分でデバッグして、最後まで自動で仕上げてくれました
変換は自分のパソコンの中で完結するので、何度発動してもお金の心配がいりません
Claude Codeのデスクトップアプリなら右側のプレビューでそのまま見られて、ブラウザを開く手間すらありませんでした
始めるのに必要なものは、Claude CodeなどのAIコーディングツールと、まつにぃさんの記事のプロンプトだけです。変換の仕組み自体は無料で動きます。
実は、この記事の原稿もClaude Code上のMarkdownで作っています。AIが原稿を書いたり直したりして保存するたびに、HTML版が勝手にできるんです。
なので読みやすい見た目で読み直しながら仕上げられました。導入した当日から、記事作りでさっそく役に立ってます。
で、この体験をして思ったんですが、Hooksという仕組み自体が面白いんですよ。AIが何かを書き込む瞬間に自動で何かを走らせる、という型は他の自動化にも使えるはずです。
私もこれからいろいろ掘り下げていこうかなと思っています。
動画で見たい方へ
記事だけだとイメージしにくい部分、ありますよね。
実際にポストを渡してAIが組み立てていく様子や、HTMLがその場で現れる瞬間、配色が目の前で変わっていく様子は、画面で見た方が伝わりやすいです。
動画はこちら👇️ https://youtu.be/lvOEvLI-bAM
まとめ
仕組みはHooksに変換プログラム1本。保存した瞬間にHTML化が本質
変換はローカルのPythonで、AI代もトークンもゼロ
導入は記事のプロンプトを貼るだけ。注意はGitコミットと自分の目での確認
要は、「HTMLにして」と頼む作業そのものを、仕組みで消してしまう話でした。
まずは冒頭のポストからまつにぃさんの記事を開いて、プロンプトをあなたのAIに貼ってみてください。私の環境では、それだけで動くところまでいけました。
この記事が参考になったら、いいねやフォローで応援してくれると嬉しいです。次回はHooksの他の使い方についても書いていく予定なので、励みになります。
あなたなら、AIが書き込む瞬間にどんな処理を引っ掛けてみたいですか？ Hooksでやってみたい自動化のアイデアがあれば、コメントで教えてもらえると次の記事のネタになります。
それではまた、れん学長でした！
📢 れん学長のAIツール実験室
メンバーシップでは、この記事では書ききれなかった実験ログや、AI活用の試行錯誤をもう少し踏み込んで共有しています。
価格や参加条件、どんな内容が読めるかは、入口記事にまとめています。
気になっていた方は、まず内容をのぞいてみてもらえるとうれしいです。
👉 メンバーシップの入口記事をのぞいてみる https://note.com/renkon40/n/nab9c378d2148
📮 【無料】週1回のニュースレターやってます
実際に試したAIツールの「結局、誰が使うべきか」だけを、5分で読める形でメール配信しています。noteの更新を見逃したくない方もどうぞ。
https://renkon40.substack.com/?utm_source=note&utm_medium=article
ここから先は
よろしければ応援お願いします！いただいたチップは、新しいAIツールの検証費用に使わせていただきます🧪 これからも実験→発見を共有していきますね！
