claat + Claude Codeでハンズオン資料をオンライン教材に変換する

この記事は ESM Advent Calendar 2025 の18日目の記事です。

TL;DR

claat を使うと、マークダウンからGoogle Codelab風味のオンライン教材を生成できる。
Claude Codeを使うとハンズオンのスライド資料を簡単にマークダウン化できるので、スライドのオンライン教材化がはかどって便利。

はじめに

ハンズオンで使用したスライド、せっかく作ったので有効活用したいですね。
claatというGoogle謹製のツールを使う事でCodelab風味のオンライン教材を作ることができるのですが、今回はClaude Codeを使ってスライドからマークダウンへ内容をコピペする作業を自動化してみました。

生成結果

今回使用したモデルは Opus 4.5 です。

変換前のスライド

変換前のスライドはこんな感じです。簡単なチャットアプリを作るハンズオンのスライドです。

変換後のHTML

変換結果はこんな感じ。見出しの番号が異なるのは章立ての違いによるものです。

使用したプロンプト

handson.pdfをGoogle Codelab形式のHTMLに変換してください。

【手順】
1. PDFの1〜39ページのみを抽出して別ファイルとして保存
2. 抽出したファイルを使って以下の処理を行う
3. PDFから各ページのテキストと画像を抽出
4. claat用Markdownファイルを生成
   - セクション区切りで自動的にステップ（## 見出し）を分割
   - メタデータ（id, summaryなど）は内容から自動生成
   - 抽出した画像をマルチモーダルで確認し、スクリーンショット（UI画面、ターミナル、ブラウザなど）のみをimgフォルダに配置。図解やロゴなどは除外
   - Durationは内容量から適切に推定
5. claatコマンドでHTMLにエクスポート
6. 生成したHTMLをホスティングして画面を表示

【出力】
- codelab用Markdownファイル
- 生成されたHTMLフォルダ一式

【補足】
- Pythonを使用する場合はuv経由で使用してください。
- 画像と箇条書きの順序を保持してください。

handson.pdfをGoogle Codelab形式のHTMLに変換してください。

正直これだけでもそれっぽい内容を出力してくれます。pptxよりはpdfの方がClaude Codeの解析が早いです。

1. PDFの1〜39ページのみを抽出して別ファイルとして保存

変換元のスライドが100ページ近くあったので、そのままではコンテキスト長の上限に達しました。手動で元のファイルを分割しなくても抽出範囲をプロンプトに書くことで、コンテキストウィンドウの超過を防げます。

- セクション区切りで自動的にステップ（## 見出し）を分割

元のスライドの構造次第になりますが、セクションの区切りも自動でそれっぽく判別してくれます。

抽出した画像をマルチモーダルで確認し、スクリーンショット（UI画面、ターミナル、ブラウザなど）のみをimgフォルダに配置。図解やロゴなどは除外

元のスライドから特定の条件を満たす画像だけ抽出したい場合は、マルチモーダル機能の使用を指定すれば簡単に抽出できます。

- Durationは内容量から適切に推定

こうしておくと所要時間も自動で推定してくれますが、実際に必要な時間より長く推定されがちです。あとで、実際の所要時間で修正した方が良いでしょう。

6. 生成したHTMLをホスティングして画面を表示

生成されたファイルを直接ブラウザで開いても結果を確認できますが、こう書いておくとローカルでHTTPサーバを起動してくれます。

- Pythonを使用する場合はuv経由で使用してください。

こういった環境依存の情報を与えておくと、Claude CodeがPythonなどを使うときに、呼び出しに失敗して時間を浪費するのを防げます。繰り返しプロンプトチューニングをする場合に有効です。

- 画像と箇条書きの順序を保持してください。

これは、画像と箇条書きの順番が入れ替わりがちなので、チューニングとして後から追加した部分です。

最後に

もし、過去に使ってまだ内容が陳腐化していないハンズオン資料があれば、簡単にオンライン教材として再利用ができます。お試しあれ。