25分やって、5分休む。作業配信のリズムを、配信画面にそのまま出すウィジェットです。 OBSに置くだけで使えます。インストールは要りません。 外部のサービスには一切つなぎません。作業時間はどこにも送られません。 ──────────────────────── ■ できること ──────────────────────── ・作業25分 → 休憩5分 を自動でくり返します ・4セットごとに長い休憩（15分）に切り替わります ・「今日の作業 1時間27分」と、その日の合計が出ます ・作業中は赤、休憩中は緑と、色が変わります ・残り時間のバーが減っていきます ・「2 / 4 セット目」で、いま何本目かが分かります 時間の長さ（25分 / 5分 / 15分 / 4セット）は、 設定ファイルの数字を書き換えるだけで変えられます。 50分やって10分休む、でも構いません。 ──────────────────────── ■ ここが違います：時間がズレません ──────────────────────── よくある作りだと「1秒ごとに1秒減らす」ので、 PCが重いときに、少しずつ時間が遅れていきます。 このタイマーは「終わる時刻」を先に決めて、 そこから引き算して表示しています。 画面の更新が何回飛んでも、残り時間は狂いません。 検算ずみです。 1秒きざみで1200回すすめても、20分を一気に飛ばしても、 どちらも残りは ちょうど 5:00 でした。 ──────────────────────── ■ 動かしかた ──────────────────────── 【方法1】配信画面のタイマーを直接クリックする OBSでソースを右クリック →「対話」を開き、クリックすると 開始と一時停止が切り替わります。いちばん手数が少ない方法です。 【方法2】操作パネル（control.html）をOBSの中に入れる OBSの「表示」→「ドック」→「カスタムブラウザドック」に control.html の場所を入れると、OBSの中にボタンが出ます。 ・開始 / 一時停止 ・次へ進む（休憩を飛ばす、作業を早く切り上げる） ・タイマーだけ戻す（その日の合計は消えません） ・今日の記録ごとリセット ★正直に書いておきます★ control.html を「ダブルクリック」で開くと、ふだんお使いの ブラウザで開きます。OBSのタイマーとは保存場所が別なので、 そこからはOBSのタイマーを動かせません。 OBSから動かしたいときは、必ずカスタムブラウザドックに入れてください。 （同じブラウザで開いたページどうしは、ちゃんと連動します） 「次へ進む」を押すと、次の区切りに切り替わっていったん止まります。 続けるときは「開始」を押してください。 （区切りが自然に来たときは、設定しだいで自動で続きます） ──────────────────────── ■ 入っているもの ──────────────────────── pomodoro.html 配信画面に置く本体 control.html 手元で押す操作パネル config.js 設定ファイル。ここだけ書き換えます README_使い方.txt 使い方 README_English.txt 英語版 設定ファイルは1つだけです。メモ帳で開いて数字を書き換えて保存するだけ。 ──────────────────────── ■ 置きかた（3分） ──────────────────────── 1. フォルダを好きな場所に置く 2. OBSで ソース ＋ → ブラウザ を追加 3. 「ローカルファイル」にチェックし、pomodoro.html を選ぶ 4. 幅600 / 高さ220 くらいから 背景は透明なので、そのまま配信画面に重ねられます。 ──────────────────────── ■ 設定でできること ──────────────────────── workMin / breakMin / longBreakMin それぞれの長さ（分） setsBeforeLong 何セットで長い休憩か（0で無し） autoNext 区切りで自動で次へ進むか size / color / workColor / breakColor 文字の大きさと色 showPhase / showRound / showTotal / showBar 出す項目を選ぶ panel うしろに帯を敷いて読みやすくする beep 区切りで短い音を鳴らす（既定はオフ） resetDaily 日付が変わったら0に戻す URLのうしろに書いて上書きすることもできます。 pomodoro.html?workMin=50&breakMin=10 このとき操作パネルは、本体が実際に使っている長さに自動で合わせます。 ──────────────────────── ■ 品質について ──────────────────────── 残り時間の計算、休憩への切り替え、4セット目の長い休憩、 通算作業時間、日付が変わったときの初期化、操作パネルとの連動などを、 仮想の時計で動かして1つずつ確かめています。 Chrome で動作を確認しています。 OBSのブラウザソースは Chrome と同じ仕組みで動きます。 Edge / Firefox でも動く作りですが、こちらでは確認できていません。 ──────────────────────── ■ よくある質問 Q. OBS にはどうやって入れますか？ A. OBS の「ソース」で「ブラウザ」を追加し、「ローカルファイル」にチェックを入れて 　　pomodoro.html を選びます。 　　幅 600 / 高さ 220 くらいが目安です。 Q. インストールは必要ですか？ A. 要りません。zipを解凍して、OBSのブラウザソースにファイルを指定するだけです。 Q. 背景は透過しますか？ A. します。OBSのブラウザソースに入れると、配信画面の上に重ねて表示されます。 Q. 設定はどこで変えますか？ A. config.js をメモ帳などで開いて、数字や文字を書き換えて保存します。 　　OBSのソースを「更新」すると反映されます。 Q. 画像はアップロードされますか？ A. されません。開いたブラウザの中だけで計算します。 　　パソコンのネットを切ってから使っても、同じように動きます。 Q. インターネットにつながりますか？ A. つながりません。外部のサービスには一切つなぎません。 Q. 動作環境を教えてください A. Chrome で動作を確認しています。 　　ほかのブラウザや環境では確認していません。 Q. 商用利用できますか？ A. できます。作った物の使用は、個人・法人を問わず自由です。 　　ファイルそのものの再配布・転売だけはご遠慮ください。 ■ 使ってよい範囲 ──────────────────────── ・個人／法人を問わず、配信・動画でお使いいただけます（商用可） ・中身を書き換えて、ご自分用に調整していただいてかまいません ・ファイルそのものの再配布・販売はご遠慮ください