AIを駆使してTypstスライドを生成する
Table of Contents
背景・動機
Typstとpdfpcでプレゼン機能を実現する のNext Actionに次のようなことを書いた。
登壇の場数を踏んでより洗練させていきたい。 登壇周りのすべてがプレーンテキスト(Org)で管理できるようになったので、次はAIによるスライド生成にチャレンジしたい。
実際に練習がてら登壇してみたかったので、第177回 PHP勉強会@東京 で「Typstで登壇できるようになったので練習させてくれ」というテーマでLTをすることにした。
そこで今回は実際にAIにスライドの目次案からTypstを生成させてホスティングする所までやってみた。
試したこと・やったこと
1. AIでプロンプトを作る
プロンプト
関連するブログをリストアップしてMarkdownで目次を生成させてみた。
「typstで登壇できるようになったので練習させてくれ」というタイトルでLTしようと考えています。
登壇資料のアウトラインを作りたいです。
以下の記事を読んで起承転結でMarkdownで纏めてください。
- Typstとpdfpcでプレゼン機能を実現する
- https://www.takeokunn.org/posts/fleeting/20250608145128-presenting_with_typst_pdfpc/
- Typst自作テーマで登壇スライドを作成した
- https://www.takeokunn.org/posts/fleeting/20250601214129-create_slide_by_typst_self_theme/
- Typstテーマを自作した
- https://www.takeokunn.org/posts/fleeting/20250506220914-create_typst_slide_theme/
- NixでTypstをBuildしGitHub Pagesでホスティングする
- https://www.takeokunn.org/posts/fleeting/20250126114218-build_and_deploy_typst_using_nix/
アウトライン例
以下は対話しながらGeminiから生成させたものを改変した。
# Typstで登壇できるようになったので練習させてくれ
## 全体構成
### きっかけと違和感
- かつてはGoogle Slidesは最高の相棒だった
- 画像位置を調整するのが簡単
- 過去に作ったスライド資産がある
- 外部への共有も簡単
- スライド作成の流れ
- Emacsでアウトラインを書く
- 過去スライドをコピペしてくる
- アウトラインに沿ってスライドを作る
- スピーカーノートを用意する
- 心に刺さった"小さなトゲ
- プレーンテキストで管理できない
- AIによる自動生成できない
- Emacsから編集できない
- etc...
- 違和感の正体 = エンジニアとしての"業"(カルマ)
- バージョン管理が恋しい
- 再利用性が低い (No DRY!)
- 自動化できない
- 僕らは、スライドという成果物も“コード”として管理したい生き物なんだ!
### Typstとの出会いと感動
- そんな僕が出会ったのが"Typst"
- まさに「プレゼン資料も構造化・宣言的に書ける」言語
- 探し求めていた理想がそこにあった
- 最初の感動ポイント(="トゲ"が抜けていく快感)
- コードでスライドが書ける → Emacsから離れなくていい!
- アウトライン作成からスライド執筆まで、すべてが愛用のエディタで完結
- Gitで管理できる → 変更履歴はすべてお見通し!
- テーマが自作できる → DRY原則、スライドにも!
- コードハイライトが美しい → エンジニアとして一番見せたいものが輝く!
- Typstスライドを支える技術(しくみ)
- Polylux:Typstのためのスライドエンジン
- codelst:コードを美しく見せるスタイリスト
- Nix:すべてを固める魔法の環境
### 実用に耐えるまでの道のり
- しかし、現実は甘くなかった
- 理想の環境はすぐそこに見えたが、やってみると色々な壁にぶつかる
- 「言うは易く行うは難し」を実感する日々
- やってみて困ったこと(理想と現実のギャップ)
- テーマの調整が超むずい
- polyluxやcodelstのドキュメントとひたすらにらめっこ
- 絵文字: Macでは出るのにCI(Linux)でビルドすると豆腐(□)になる!
- フォント設定: この日本語フォントを使いたいだけなのに…
- 画像の配置: ドラッグ&ドロップの偉大さを思い知る
- それでも続けた理由(Typstの魅力に立ち返る)
- 記法が明快で、根本的な書き心地は最高だった
- スライド構成が自分の思考にフィットした
- 「構造から考え、中身を埋める」スタイルが気持ちよかった
- 補助ツールとの統合(そして"最強"の環境へ)
- Typst単体ではなく、エコシステム全体で課題を解決していく
- pdfpc:ついに「登壇」できるようになった瞬間
- GitHub Actions:完全なる自動化の世界へ
- Hugo:発表資料を"資産"にする
### Typst登壇はこう変えた
- Typstを手に入れた結果、登壇準備のすべてが変わった
- Before/Afterで振り返る、スライド制作プロセスの変化
- 「きっかけと違和感」で感じていた違和感がすべて解消されていく
- 登壇準備がこう変わった!
- 迷わず構成から入れる
- Before:まずGoogle Slidesを開き、どのテーマにしようか悩む…
- After:まずEmacsでアウトライン(構造)を書くことに集中できる
- 見た目を気にしすぎなくていい
- Before:テキストボックスの位置、フォントサイズ…ピクセル単位の調整地獄
- After:自作テーマを適用すればOK。「見た目は後からついてくる」安心感
- 再利用性・再現性が圧倒的に高い
- Before:過去スライドからコピペ。コピペミスやうっかり編集しちゃったなどヒューマンエラーが頻発。
- After:過去の資産はGitリポジトリに。Nixのおかげで誰でも同じPDFを生成
- Typstで登壇する未来
- 自分だけのテーマを育てる文化
- 発表のたびにテーマを少しずつ改善していく。自分だけの"刀"を研ぐ感覚
- コード × 構造 × 登壇の三位一体
- Slide as Codeの世界へようこそ
- まとめとメッセージ
- Google Slidesへの違和感から始まり、困難を乗り越え、最強の環境を手に入れました
- 「一度書いてみれば、この快感が分かる」
- 発表資料も"成果物"にしたい、すべてのエンジニアへ
- その場限りの資料ではなく、再利用可能な“資産”を作りたい人は、ぜひTypstへ!
2. Gemini 2.5 Proに実装させる
作業指示を書いて8割くらいのクオリティでAIに実装させる。
作業指示
1. 下記のMarkdownを読み込む
2. typst/org/nix-meetup-3-my-nix-usecase/article.org のコードを読む
3. typst/org/typst-presentation-practice/article.org にOrgベースでTypstスライドを作成する
- typst/org/nix-meetup-3-my-nix-usecase/article.org を可能な限り参考にする
4. typst/flake.nix に typst-presentation-practice を追記する
5. .github/workflows/main.yml に追記する
----
<<アウトラインのMarkdownを貼る>>
3. スライドのクオリティを上げる
次の対応をした。
- 自己紹介やアジェンダなどテンプレ追加
- 画像を追加
- 生成されたTypstを手直し
- 文言やスピーカーノートを追加修正
4. git pushする
NixでTypstをBuildしGitHub Pagesでホスティングする にもあるとおり、 git push
するだけで公開される。
得られた結果・所感
無事スライドができてホスティングできた。
https://www.takeokunn.org/pdf/typst-presentation-practice.pdf

ベースのプロンプトやTypst力が上がればLTスライドの生成まで1時間あれば終わることが分かった。
今後の展開・検討事項
実際の登壇の感想は後日記述する。