Timers モジュールの概要

Timers モジュールは Timers Studio の中核です。ショー中にディレクターが操作する場所であり、観客やステージ上のスピーカーが画面で目にするものでもあります。このページでは、表示されるパーツ、それらがアプリ内でどこに存在するか、そしてどのように連携するかを説明します。

2 つのルート、1 つのモジュール

同じルーム ID に対して 2 つの URL が割り当てられています。

• timers.studio/id/<room> — Studio、ディレクター ビュー。StudioView が描画します。rundown、コントロール、メッセージ エディター、すべてのモーダル（Customize、Links、Shortcuts、Export/Import、Activity logs）を保持します。
• timers.studio/player/<room> — Player、画面出力。PlayerPage が描画します。1 つのタイマーを表示し、Studio から送られてくる状態に 100 ms 以内で反応します。

両方のルートは同じ Supabase チャンネルを購読します。Studio で変更したものは、開いているすべての Player、すべての Moderator ビュー、埋め込まれたすべてのブラウザ ソースに反映されます。

Studio 内の表示

Studio はワイド画面では 3 列の縦レイアウト、狭い画面では縦積みで表示されます。

• 左列 — Rundown。RundownList が描画します。ショーのタイマーを順序付けて並べるリストです。行をドラッグすると並べ替えできます。各行にはタイトル、スピーカー、タイプ（DURATION、FINISH_TIME、TIME_OF_DAY、COUNT_UP）、予定時間が表示されます。
• 中央列 — Player プレビューとトランスポート。観客が見ている内容のライブ ミラーに加え、トランスポート バー（Play、Pause、Stop、Next、Previous）と調整ボタン（+1m、+30s、-30s、-1m）を ControlPanel 経由で接続しています。
• 右列 — メッセージとインターコム。MessageControl が描画します。スピーカー向けメッセージ エディター、Q&A ライブ キュー、モデレーターとのインターコム チャットがこのパネルを共有します。

列の上には Header が表示されます。ルーム名、言語、Customize、Shortcuts、Export/Import、Links、Activity logs、ユーザー メニューを含みます。

Rundown

rundown はショーが進行するタイマーの順序付きリストです。各エントリは TimerItem で、type、durationSec または targetTime、title、speaker、任意のメタデータ（セグメント ラベル、スピーカー アイコン、メモ）を持ちます。rundown は Player を制御します。アクティブなエントリだけが画面に描画されます。現在のインデックスを変更する（Next、Previous、または行をクリックする）と、すべての Player が即座に切り替わります。

状態と同期

各 Studio セッションは Supabase の room_state.controller_id に保存されます。Studio は Realtime チャンネル経由で変更を配信し、Player はサーバーにアンカーされた時計でそれを適用します。こうすることで、視聴者側のローカル時計ドリフトに関係なく、すべてのビューで同じ 1/10 秒が見られます。計算は PlayerPage.tsx（syncElapsedRef、syncReceivedAtRef）に実装されています。

関連モジュール

• Agenda — /agenda/<room> は同じタイマー リストから進行順序を導きます。rundown は別個には持ちません。
• Moderator — /moderator/<room> はコントロールのサブセットと、ウィジェット グリッド（インターコム、polls、visual pager、Wharton clock、Q&A）を公開します。
• Gateway — /ask/<room> は観客が質問を送ったり、投票したりするために到着するページです。Gateway はあらゆるリアルタイム更新のトランスポート層でもあります。

続きを読む

• 最初のタイマーを作成する — ゼロから動くカウントダウンまで 3 分。
• Player を起動して操作する — Player ビューを開き、フルスクリーンにし、OBS に組み込みます。
• ステージへメッセージを送る — テキスト、フラッシュ、フルスクリーン オーバーレイをすべての視聴者に送ります。
• キーボード ショートカット — Studio で押せるすべてのキー。
• 共有リンクと権限 — 4 つのロール リンクをコピーし、モデレーターのパスワードを設定します。