Presentation Timer

学会、研究会、LT会などの発表進行に使える、予鈴付きのブラウザタイマーです。 インストール不要で、GitHub Pagesからすぐに利用できます。

作者: SSEC553

このタイマーの特徴

操作画面と配信用画面を分離できる

最大の特徴は、司会者が使う設定・操作画面とは別に、配信専用ウィンドウを開けることです。

DiscordやOBSには配信用ウィンドウだけを共有できるため、参加者には大きな残り時間と進捗だけを見せつつ、司会者は裏側で開始、一時停止、リセット、鈴設定を操作できます。

配信用ウィンドウには次の特徴があります。

• 操作ボタンや設定欄が映らない
• 操作画面と残り時間がリアルタイムで同期する
• 16:9または4:3の比率で開ける
• 鈴が鳴る位置を進捗ゲージ上の縦線で確認できる
• Discordのウィンドウ共有対象として選択しやすい

学会形式の予鈴を自由に設定できる

「開始から何分後」ではなく、「残り何分何秒」で1鈴、2鈴、3鈴以降を設定できます。 各タイミングでは、鈴を鳴らす回数も1回から5回まで選べます。

静的サイトだけで動作する

サーバーやアカウント登録は不要です。 設定と実行状態はブラウザに保存され、操作画面と配信用画面の同期も同じブラウザ内で完結します。

主な機能

• 全体時間を分・秒単位で設定
• 残り時間を基準にした複数の予鈴設定
• 予鈴ごとの打音回数設定
• 開始、一時停止、再開、リセット
• 操作画面と配信用画面のリアルタイム同期
• 16:9と4:3の配信比率
• 鈴位置を表示する進捗ゲージ
• ブラウザへの設定保存
• レスポンシブ表示
• GitHub Pagesへの静的デプロイ

使い方

1. 全体時間を分・秒で設定します。
2. 各予鈴について、残り時間と打音回数を設定します。
3. 必要に応じて鈴を試聴し、音量を調整します。
4. 16:9または4:3を選び、「配信用画面」を開きます。
5. DiscordまたはOBSで配信用ウィンドウを共有します。
6. 「開始」を押して発表を開始します。
7. 次の発表前にリセットし、必要なら時間設定を変更します。

Discordで鈴音も配信する場合は、画面共有時に音声共有を有効にしてください。

開発

必要なもの:

• Node.js 20以降
• npm

npm install
npm run dev

開発画面は http://127.0.0.1:5173/ で開きます。

ビルド

npm run build

成果物は dist/ に生成されます。

GitHub Pages

.github/workflows/deploy-pages.yml にGitHub Actionsのデプロイ設定があります。

1. GitHubの Settings > Pages を開きます。
2. Build and deployment のSourceを GitHub Actions に設定します。
3. main ブランチへpushします。
4. Actionsの完了後、PagesのURLへアクセスします。

配信用画面は公開URLの末尾へ #broadcast を付けても直接開けます。

音源とライセンス

予鈴にはOtoLogic「オノマトペ チーン04-2（短）」を使用しています。

• 制作者: OtoLogic
• 配布元: https://otologic.jp/free/se/ding01.html
• ライセンス: CC BY 4.0

詳細は public/audio/ATTRIBUTION.md を参照してください。