【OBS/HTML】定刻ポモドーロ｜開始時刻を決めるだけ・再読み込みしてもずれない作業配信タイマー

作業・勉強配信向けの、OBSブラウザソース用ポモドーロタイマーです。

開始時刻を決めておくと、その時刻から「作業」と「休憩」が自動で切り替わり、

残り時間と「次の切り替え時刻」を配信画面に表示し続けます。

配信中にボタンを押す必要はありません。

━━━━━━━━━━━━━━━━━━━━

▼ 先にご確認ください（できないこと）

━━━━━━━━━━━━━━━━━━━━

・一時停止、延長、スキップはできません。配信中に操作しない設計です。

　予定を変えるときは設定ページで作り直してください。

・PCの時計を基準に表示します。時計がずれていると表示もずれます。

・開始時刻は「毎日同じ時刻」です。開始の12時間前からカウントダウンします。

━━━━━━━━━━━━━━━━━━━━

▼ 特徴

━━━━━━━━━━━━━━━━━━━━

■ OBSを再起動しても、ずれない

　開始時刻とPCの時計から毎回計算するため、OBSの再起動・シーン切り替え・

　ページの再読み込みをしても、リセットされずに「今の時刻に合った続き」を表示します。

　日付をまたぐ配信（例：23:00開始→翌1:00）にも対応しています。

■ 次の切り替え時刻を表示

　「21:55 休憩 5分」「22:00 作業 3/8」のように、次の予定を時刻つきで表示します。

　途中から来たリスナーにも、次の休憩がいつか伝わります。

■ タイムテーブルをコピー

　設定ページで、1日の流れ（21:00–21:25 作業 1/8 …）をテキストでコピーできます。

　配信の概要欄や告知にそのまま使えます。

■ 設定ページで作って保存するだけ

　付属の setup.html をブラウザで開き、プレビューを見ながら設定して保存します。

　保存したHTMLファイルをOBSのブラウザソースで読み込めば完了です。

　インターネット接続は不要です。

━━━━━━━━━━━━━━━━━━━━

▼ こんな配信に

━━━━━━━━━━━━━━━━━━━━

・勉強配信、作業配信、もくもく会、お絵描き・執筆などの長時間の作業枠

・「毎時0分と30分に作業開始」のように、時計に合わせてリスナーと同じリズムで進めたい枠

・配信中はタイマー操作に気を取られたくない方

━━━━━━━━━━━━━━━━━━━━

▼ 設定できること

━━━━━━━━━━━━━━━━━━━━

・開始時刻（毎日）

・作業 1〜180分／休憩 1〜60分

・長い休憩 1〜120分（0〜12セットごと。0で無し）

・セット数 0〜99（0で終わりなし）

・レイアウト：ボード／リング／ライン

・タイトル、次の切り替え時刻の表示、セット数の表示

・開始前・全セット終了後に表示するかどうか、表示する言葉

・作業・休憩・長い休憩・文字・パネルの色、パネルの濃さ（0%で透明）、大きさ 40〜250%

・切り替わり時の短いチャイム（オン／オフ、音量）※音声ファイルは使いません

初期設定の本体ファイルは「時計合わせ」になっており、読み込むとすぐに

毎時0分・30分開始の25分作業／5分休憩で動きます。

━━━━━━━━━━━━━━━━━━━━

▼ 収録内容（ZIP 1点）

━━━━━━━━━━━━━━━━━━━━

・teikoku-pomodoro.html …… タイマー本体（初期設定入り）

・setup.html …………………… 設定ページ

・01_README.txt ……………… 導入手順・困ったときの対処

・02_TERMS.txt ………………… 利用規約

━━━━━━━━━━━━━━━━━━━━

▼ 必要なもの・動作環境

━━━━━━━━━━━━━━━━━━━━

・OBS Studio（「ブラウザ」ソースが使えるもの）

・設定ページ用のブラウザ（Google Chrome または Microsoft Edge を推奨）

動作確認環境：【出品前に記入：OS／OBS Studioのバージョン】

上記以外の環境（Mac版OBS、Safari、Firefoxなど）では動作を確認していません。

推奨ソースサイズ（大きさ100%・タイトルあり）：

ボード 540×333／リング 340×367／ライン 820×80

（設定ページに、設定に合わせた正確な数値が表示されます）

━━━━━━━━━━━━━━━━━━━━

▼ 使い始め方

━━━━━━━━━━━━━━━━━━━━

1. ZIPを展開し、フォルダを消えない場所に置く

2. OBSで「ソース」の＋ →「ブラウザ」→「ローカルファイル」にチェック →

　 teikoku-pomodoro.html を選ぶ

3. 自分の予定に合わせるときは setup.html で設定 → 保存 → OBSで読み込み直す

詳しくは同梱の 01_README.txt をご覧ください。

━━━━━━━━━━━━━━━━━━━━

▼ 利用条件（要約）

━━━━━━━━━━━━━━━━━━━━

・購入者ご本人の配信・動画での表示OK（収益化・商用の配信を含む）

・色や文言、コードの変更OK（ご自身の利用の範囲）

・クレジット表記は不要

・ファイルの再配布・販売・譲渡、素材集などへの組み込みは禁止

全文は同梱の 02_TERMS.txt をご確認ください。

━━━━━━━━━━━━━━━━━━━━

▼ 制作について

━━━━━━━━━━━━━━━━━━━━

本ツールのプログラムは、AI（Claude）を用いて制作し、出品者が動作を確認しています。

音声ファイル・画像素材・外部フォントは同梱していません。

ご質問・不具合のご報告は、BOOTHのメッセージからお送りください。