Peithoの発表者ツールをつくっている
前回の記事 でプレゼンツール Peitho を紹介した。前回はスライドを書いて生成するところ（Markdownを書いてビルドすると型検査つきでHTMLが出てくる話）が中心だったので、今回は発表するところ、つまり発表者ツールまわりについて書く。
前回、Peithoをつくった動機として「プレゼンツールも自分が使いやすいものがほしくなった」というのを挙げたけど、それがまさにこの部分。
peitho present deck.md
を実行するとローカルサーバが立ち上がって、スライドと発表者ツールがそれぞれ別のChromeウィンドウで開く。外部ディスプレイがあればそちらにスライドがフルスクリーンで表示され、発表者ツールはメインディスプレイに開く。発表者ツールの見た目はこんな感じ。
左に現在のスライドとスピーカーノート、右に次のスライド、タイマーとトラッカー、セクション別の時間を並べたアジェンダ、操作ボタン、という構成。ダーク基調のデザインは Claude Design でモックをつくって、それを反映した。以下、各パーツを見ていく。
タイマーとトラッカー
発表の予定時間はデッキのfrontmatterに書く（
time: 5m
、
90s
、
1h30m
のような書き方）。それがタイマーの計画時間になっていて、経過時間・残時間・超過時間が表示される。超過すると赤くなって
+00:30
のように追加表示。
その下の細長い帯がトラッカー。かめ🐢が経過時間（フィルバーの先端と一緒に動く）、うさぎ🐰がスライドの進捗（10枚中3枚目なら30%の位置）。うさぎがかめより先にいれば余裕あり、かめに追い越されていれば遅れ気味、というのがひと目でわかる。
操作ボタンはStart/Pause/Resumeが1個にまとまっていて、押すたびに次のアクションが自動で決まる。
セクション別の時間を並べたアジェンダ
デッキのスライドの先頭にコメントでセクションの区切りを書いておくと、発表者ツールにアジェンダが出る。
<!-- {"section":"Setup","time":"1m"} -->
# スライドはMarkdownで書きたい
セクション名と持ち時間はセットで書く決まり。各セクションの計画時間・実績時間・その差分が並んで、今どこにいるかがハイライトされる。
frontmatterの
time
（デッキ全体の予定時間）とセクション合計がズレているとビルドが止まる。「4分の発表のはずが、セクション合計が5分になっている」みたいな取り違いに、開いた瞬間ではなくビルドの瞬間に気づける。前回書いたスロット契約と同じで、「黙って何かが起きる」経路を残さない、というPeithoの基本方針の延長。
スピーカーノート
書き方は Marp や k1LoW/deck と同じで、スライドの中にHTMLコメントを書くだけ。
# スライドはMarkdownで書きたい
<!-- 自己紹介は10秒で切り上げる。「スライド作りで消耗した経験、ありますよね」と会場に問いかけてから本題へ。 -->
JSON形式のコメントはページ設定、それ以外がスピーカーノート、という使い分け。ノートはビルドの配布物には混ざらないようにしてあって、
peitho present
のときだけ発表者ツールに読み込まれる。
現在/次スライドのプレビュー
左の大きい方が現在のスライド、右上の小さい方が次のスライド。実際に配布されているスライドHTMLをそのまま埋め込んでいるので、プレビュー用に別レンダリングされたものではなく本物と同じ見た目。
参考: