ターミナルで動くMarkdownスライド作成ツール Ratride を作った

Ratrideという、ターミナルで動くMarkdownスライド作成ツールを作った。

特長:

  • アニメーション対応
  • Webでも動く
  • 見出しをAAに変換できる

github.com

経緯

先日の #onishi50 でLTするために開発。 LTの内容が「ターミナルで動くDAW」についてだったので、LTもiTerm2上で行いたかった。

ターミナルで動くスライド発表ツールというのは特に珍しいものではない。古くはEmacsのorgモードで発表している人も沢山いたし、Go製のslidesやRustで書かれたpresentermなど、多機能なツールが沢山ある。

今回LT資料を作るにあたってpresentermも試したが、自分のスタイルには合わなかった。 LT用スライドを作るくらいならClaude Codeに投げたら一瞬で出来るだろうと思い、自作することにした。

開発言語はRust。 Ratatui というTUIフレームワークを使っている。 名前は Rust + スライド で Ratride とした。

使い方

cargoでインストール:

cargo install ratride
ratride slide.md

npmからインストールして、JSライブラリとしても使える。

npm install ratride
import { run } from 'ratride';

const md = await fetch('./slide.md').then(r => r.text());
run(md);

機能

アニメーション対応

スライドのトランジション アニメーションに対応している。もちろんターミナルで動く。 Ratatui には tachyonFx というアニメーションフレームワークがあるので、これを使用した。

https://github.com/ratatui/tachyonfx

Webでも動く

ratride slide.md --export OUT_DIR とすることで、そのままデプロイ可能なHTML入りディレクトリを出力できる。 Ratrideのwebサイトもこれで出力している。

Ratride - TUI slide presenter with FX

また、 ratride slide.md --serve とすると、 localhost:3000 にlive-reload serverが立つ。 スライド作成に便利。

Ratatui製アプリをWebで動かす Ratzilla というライブラリもあるが、今回は使っていない。 スライド中のリンクをクリックできるようにしたかったが、Ratzilla では難しいので、Claude CodeにCanvas実装をイチから作らせた。 Ratzilla に比べると色々不足しているんだろうけど、自分用なので気にしない。

見出しをアスキーアートに変換

スライドの先頭で <!-- figlet --> というoptionを追加することで、見出しをアスキーアートに変換できる。

例:

オプションは figlet となっているが、文字色やグラデーションやwasm対応のため、Rustで figrat という figlet フォークを作成し、内部で使用している。

GitHub - fand/figrat · GitHub

TUIツールの隆興について

最近は Ratatui や Go における Bubbletea を使った、リッチな TUI を持つツールが大量にリリースされている。 これは Claude Code などのCLIツールに見られるターミナル回帰の流れもあるが、コーディングエージェントにとってGUI出力よりもターミナル出力のほうがデバッグしやすい、という事実が何より影響していると思う。

去年、しばらく業務でテキストレンダリング関連のコードを書いていたんだけど、Claude Codeは画像内のテキストのレイアウトや描画バグを全く理解できなかった。それに比べ、TUIの出力はLLMが評価しやすいので、GUIツールを作成するよりも圧倒的にサイクルを回しやすい、というのがTUIツールの流行に寄与しているのではないか。