slidekit-modify-open に「発表者モード」と「ノート編集ツール」を追加しました

slidekit-modify-open で生成したスライドに、PowerPoint の発表者ツールのような機能を追加しました。

スライドを操作すると、別ウィンドウに表示したスピーカーノートが連動して切り替わります。経過時間のタイマーもついているので、学会発表の練習にも使えます。

この記事では、発表者モードの使い方と、スピーカーノートの作成・編集方法を説明します。

---

追加した機能

今回追加したのは3つです。

---

発表者モードの使い方

起動方法

スライドの index.html をブラウザで開いた状態で、以下のいずれかで起動します。

• キーボードの P キーを押す
• 右下のナビゲーションにある 🎤 ボタン をクリック

別ウィンドウで発表者画面が開きます。

発表者画面の構成

発表者画面は上下に分かれています。

上半分: スライドプレビュー

• 左側に現在のスライド
• 右側に次のスライドのプレビュー

下半分: スピーカーノート

• 現在のスライドに対応するノートが大きく表示される
• 文字数と読み上げ目安時間が下部に表示される（日本語 400文字/分 で計算）

ヘッダー

• 経過時間タイマー（HH:MM:SS）
• スライド番号（03 / 15 のような形式）
• 「開始」「リセット」ボタン

操作方法

聴衆用画面（index.html）と発表者画面のどちらからでもスライドを操作できます。片方を操作すると、もう片方も自動で同期します。

2つのウィンドウを横に並べると、発表本番や練習がしやすくなります。

文字サイズの変更

ノート部分の文字サイズは A- / A+ ボタンで変更できます（12px〜40px）。プロジェクターやモニターの大きさに合わせて調整してください。

タイマー

• 「開始」ボタンを押すと経過時間のカウントが始まります
• 最初のスライド操作で自動的に開始することもできます
• 「リセット」ボタンで 00:00:00 に戻ります

発表時間の制限がある学会発表の練習で、時間配分を確認するのに便利です。

---

スピーカーノートの作り方

方法1: AIに自動生成してもらう

/slidekit-build でスライドを生成する際、各スライドにスピーカーノートが自動で追加されます。

AIが生成するノートの特徴:

• スライドの内容を口語体で説明する文章
• 1スライドあたり 100〜200 文字程度
• タイトルスライドには挨拶文、結論スライドには感謝の言葉

生成されたノートはそのまま使うこともできますし、次に紹介するノート編集ツールで調整することもできます。

方法2: ノート編集ツールで自分で書く・編集する

notes_editor.html をブラウザで開くと、スピーカーノートの編集に特化した画面が使えます。

画面の構成

slide_plan.json を読み込むと、以下の画面になります。

サイドバー（左）

• スライド一覧が番号順に表示
• ノートが入っているスライドには緑色のドットが表示される
• クリックでスライドを切り替え

スライドプレビュー（中央左）

• 選択中のスライドの見出し・本文がテキストで表示される
• HTMLフォルダを指定すると、実際のスライドHTMLをプレビューできる

ノート編集エリア（中央右）

• テキストエリアにノートを直接入力・編集
• 下部に文字数と読み上げ目安時間がリアルタイムで更新される

使い方

1. notes_editor.html をブラウザで開く

2.「JSON を開く」ボタンで slide_plan.json を読み込む

3. サイドバーからスライドを選び、右のテキストエリアにノートを入力

4. 必要に応じて「AI下書き」ボタンでプロンプトをクリップボードにコピー

→ AIチャットに貼り付けると、スライド内容に基づいたノート案が得られる

5.「保存」ボタン（または Ctrl+S）で編集済みの JSON をダウンロード

読み上げ時間の目安

ノート編集画面では、各スライドの文字数から読み上げ時間を自動計算します。日本語の場合、1分あたり約400文字で計算しています。

全スライドの合計読み上げ時間もヘッダーに表示されるので、10分発表のスライドなら合計が10分前後になるよう調整できます。

方法3: JSON を直接編集する

slide_plan.json の各スライドに notes フィールドを追加すれば、テキストエディタでも編集できます。

{

"type": "text-only",

"heading": "背景",

"body": "・高齢化に伴い救急外来の患者数が増加\n・トリアージの精度にばらつきがある",

"notes": "まず研究の背景からご説明します。近年、高齢化の進展に伴い、救急外来を受診する患者数は年々増加しています。"

}

---

ワークフロー全体像

発表者モードを含めた、スライド作成から発表練習までの流れです。

論文 PDF / テキスト

↓

/slidekit-build（AIが構成設計 + ノート自動生成）

↓

slide_plan.json（notes フィールド付き）

↓ ← ここで内容を確認・編集

├─ slide_reviewer.html（スライド構成の編集）

└─ notes_editor.html（発表ノートの編集）

↓

python -m builder slide_plan.json

↓

出力ディレクトリ

├── 001.html 〜 NNN.html（スライド）

├── index.html（聴衆用ビューア）

├── presenter.html（発表者モード）

└── slide_plan.json

↓

index.html を開いて P キー → 発表練習

---

デモ動画

実際に発表者モードを使っている様子を動画で撮影しました。

発表者画面の単体表示

スライドを送るとノートが切り替わり、タイマーが動いている様子です。

<video src="presenterdemo1_cropped.mp4" controls width="100%"></video>

聴衆画面と発表者画面の並列表示

左が聴衆に見せる画面、右が発表者の手元画面です。スライド操作が双方向に同期しています。

<video src="presenterdemo2_cropped.mp4" controls width="100%"></video>

---

まとめ

SlideKit で生成したスライドに、発表者モードとスピーカーノート機能を追加しました。

• P キーを押すだけで発表者画面が開く
• スライドとノートが自動で同期する
• ノートはAIが自動生成するか、エディタで手動編集できる
• タイマーで時間配分を確認しながら練習できる

学会発表の準備にお使いください。

SlideKit のリポジトリ: GitHub