BuriKaigi 2026 で30分トークをしたんですがスライドとカンペの動作が連動してなくてあたふたしたので今後どうにかしたくて方法を模索した結果のメモ。
背景
- VS Code の vscode-reveal 拡張機能で以下はできるとわかっている
- Web表示
- HTMLエクスポート
- PDFエクスポート
- スライドはPDF化して SpeakerDeck で公開済み（URLのQRも準備した）
- 発表時に「このスライドではこの話」っていう「カンペ」を用意してた
- スライドはブラウザ、カンペはVSCodeで開いていて、連動しない
- これで発表したら、やりきったはやりきったが、操作で手間取って発表に影響が出た
- スライドはブラウザ、カンペはVSCodeで開いていて、連動しない
reveal.js Notes Server を利用する
AI相談で出てきたのがこれ。使ってみたら、コレや〜、となったのでご紹介。
インストール
Getting Started にある通りに npm install reveal-notes-server でいける（いけた）。
package.json、package-lock.json に記述が追加される（内容は割愛）。
Markdown に「カンペ」追記
ページの末尾あたりに以下のように <aside class="notes"> 〜 </aside> を追記しておく
追記例
<!-- ・・・ -->
---
<img src="img/slide-qr-min.png" style="max-height:none; max-width:none; margin:0 auto;" width="540" />
https://bit.ly/4jkDaR5 <br>
<span style="font-size:24px"> https://speakerdeck.com/sogaoh/20260110-burikaigi </span>
<aside class="notes">
(しばらく出しておく)
</aside>
--
### わが10年の叡智をぶつけた<br>カオスなクラウドインフラが、<br>なくなるということ。
<br>
<a href="https://burikaigi.dev/" target="___" rel="noopener">BuriKaigi 2026</a> 01/10 [@sogaoh](http://x.com/sogaoh) <br>
<span style="font-size:32px;"><a href="https://fortee.jp/burikaigi-2026/timetable/2026-01-10" target="___" rel="noopener">Day 2 Room 204 13:00 〜</a> <a href="https://x.com/hashtag/burikaigi_b?f=live" target="___" rel="noopener">#burikaigi_b</a><span>
<aside class="notes">
それではこちらのトークを始めます。
</aside>
---
### About Me
<!-- ・・・ -->
<aside class="notes">
少し自己紹介します。
そが ひさし、といいます。
各種SNSでは sogaoh という ID で活動してます。
<!-- ・・・ -->
</aside>
HTMLエクスポート(必要に応じて補正)
ココを押す（スクショあり）
export フォルダが作られて、プレゼンテーション用のコンテンツができている（はず）。
自分の場合、必要な補正が1つあって、img フォルダ等に分けていた画像の参照が 出力された HTML と整合していなそうな状況だった。
HTML を見るなどした上で オリジナルの img フォルダの中身を export/img フォルダに上書きコピーすることで問題回避した。
Notesサーバー起動
自分の場合こんな感じで起動（VS Code の Open in integrated terminal から起動したターミナルで。最上層の REDME.md を選択した状態から。）
npx reveal-notes-server \
--port 1947 \
--presentationDir=./revealjs/20260110-burikaigi2026/export/ \
--presentationIndex=/index.html
起動後のコンソール出力
プレゼンテーション表示と、Notes表示
ブラウザでまず `localhost:1947` を表示
別タブで `localhost:1947/?notes` を起動
表示モードは右上で変更可能
こんな感じになる
(数秒程度のgif動画在中)
おまけ
自分が revealjs を採用してるのは以下が理由
・--- で章、-- で節、という感じの「縦横移動」ができる
・たとえばこんな感じの「全スライド概観表示」ができる
上は表紙。下が「全スライド概観表示」。Esc がショートカット。
Discussion