ポモドーロタイマー

作業25分と休憩5分を自動で往復するタイマーです。時間が来ると自分でモードを切り替え、音が3回鳴ります。今日こなしたサイクル数と集中時間の合計も同じ画面に出るので、「今日はどれくらい進んだのか」がタイマーを閉じずに分かります。集中の入り口をできるだけ短くしたくて、設定画面を持たない形にしました。

こんなときに使う

• 手をつけるまでが長い作業を、とりあえず25分だけやると決めて始めたいとき
• 気づくと2時間ぶっ通しで作業していて、休憩を挟むタイミングを外部に任せたいとき
• 資料作りや原稿など、終わりが見えにくい仕事を時間で区切って進めたいとき
• 今日どれだけ机に向かえたのか、あとから数字で振り返りたいとき

使い方

1. 上部のタブで「作業 25分」か「休憩 5分」を選びます。開いた直後は作業25分の状態です。
2. 大きな「スタート」ボタンを押すとカウントダウンが始まります。押している間はボタンの表示が「一時停止」に変わり、もう一度押すと止まります。
3. 円形のリングが残り時間に応じて減っていくので、細かい数字を見なくても進み具合が分かります。中央には mm:ss 形式で残り時間が出ます。
4. 0になると自動で音が鳴り、作業なら休憩5分へ、休憩なら作業25分へ切り替わります。切り替え後は停止状態なので、休みたいだけ休めます。
5. 途中でやり直したいときは「リセット」を押します。今のモードの初期値に戻り、タイマーは止まります。

仕様と機能

項目	値・挙動
作業時間	25分固定
休憩時間	5分固定
通知音	880Hz のビープを 0.25秒間隔で3回
サイクル加算	作業タイマーが0に達したときだけ +1
集中時間の加算	作業モードで動いている1秒ごとに +1秒
保存先	ブラウザの localStorage（キー: pomodoro-stats）

画面の背景色はモードで変わります。作業中は淡い赤系、休憩中は淡い緑系で、進行リングとボタンの色も連動します。数字を読まなくても今どちらのモードにいるかが分かるようにしたかったからです。

記録は日付とセットで保存していて、読み込んだときに保存された日付が今日と違えば、サイクル数も集中時間も0から始まります。昨日の数字が残って今日の集中時間に混ざることはありません。集中時間は60分を超えると「1時間20分」のような表記に切り替わります。

音は Web Audio API のオシレーターでその場で合成しています。音声ファイルを読み込んでいないので、待ち時間なしで鳴ります。音が出せない環境では例外を握りつぶして、タイマー自体は止まらないようにしてあります。

作るときに決めたこと

最初に決めたのは、時間の長さを設定できるようにしないことでした。この手のタイマーは作業時間・休憩時間・長い休憩の間隔まで設定させる作りが多いのですが、自分で使っていると、集中したいのに設定をいじって満足して終わる回が出てきます。25分と5分に固定してしまえば、開いてスタートを押す以外にやることがありません。迷う余地を消すのが、このツールで一番効く設計だと考えました。

長い休憩（4サイクルごとに15分など）も入れていません。入れるとサイクル数の管理と例外処理が増えるうえに、そこまで律儀に回せた試しがないというのが正直なところです。代わりに、切り替わったあと自動で走り出さない仕様にしました。休憩に入った瞬間に休憩のカウントが勝手に減っていくと、席を立った時間が休憩から差し引かれてしまいます。次のスタートは自分で押す、という一拍を残しています。

集中時間を「作業モードで動いている秒数」の積み上げにしたのも意図的です。完了したサイクル数だけを数えると、20分やって中断した日が0分として記録されます。それでは振り返りの材料にならないので、途中で止めた分も秒単位で残るようにしました。逆に、サイクル数のほうは25分を完走したときだけ増えます。2つの数字で「どれだけ座ったか」と「どれだけやり切ったか」を分けて見られるようにしています。

注意点

• 記録はブラウザの localStorage に保存されます。外部への送信はありません。別の端末やブラウザとは共有されず、閲覧履歴やサイトデータを消すと記録も消えます。
• 集計は当日分のみです。日付が変わると自動で0に戻り、過去の履歴は残りません。長期の記録が必要な用途には向きません。
• ブラウザがタブを休止させる環境では、バックグラウンドでの1秒ごとの処理が遅れることがあります。厳密な計時が必要な場面では使わないでください。