ポモドーロ・タイマー

ポモドーロ・テクニックは、1980年代にフランチェスコ・シリロが創始した時間管理法です。核となる考え方は、仕事を25分の集中セッション（1つの「ポモドーロ」）に分割し、各ポモドーロの間に5分の休憩を取り、4ポモドーロ後に15〜30分の休憩を取ることです。この方法は注意力の向上、疲労の軽減、仕事のリズム感の強化に役立ちます。

ポモドーロ・テクニックは1980年代後半にフランチェスコ・シリロが発表したもので、4つのフェーズからなるサイクルを体系化しています。25分間の集中区間（1ポモドーロ）、5分間の短い休憩を4ラウンド繰り返し、その後15〜30分の長い休憩を取ります。このスケジュールは4つの状態（`work`、`shortBreak`、`longBreak`、`idle`）を持つ有限状態機械（FSM）であり、単一のカウントダウンタイマーによって遷移が駆動されます。ラウンドカウンターは各 `work -> break` 遷移の後にインクリメントされ、`round % roundsBeforeLong === 0` のときに長い休憩が発火します。50/10（深い作業）や52/17（Draugiem Groupの生産性研究）などのバリエーションも、同じFSMをパラメータ化することで実現できます。 単純な計時は `setInterval(tick, 1000)` でカウンターをデクリメントしますが、JavaScriptのタイマードリフトが蓄積します。メインスレッドの競合下では各コールバックが1003〜1020ms遅れて発火し、HTML5 Page Visibility APIとブラウザポリシーにより、非表示タブのタイマーはChrome/Firefox/Safariで約1Hzに制限されます（Safariは1分に1回まで低下することもあります）。ドリフト耐性パターンでは、開始時に `endTimestamp = performance.now() + remainingMs` を保存し、各ティックで `remainingMs = Math.max(0, endTimestamp - performance.now())` を再計算します。これにより、10分間バックグラウンドに戻ったタブが復帰した際に、架空の10秒をカウントするのではなく即座に追いつきます。`performance.now()` は高精度モノトニッククロックで、壁時計の調整（NTP、手動時刻変更）の影響を受けません。`Date.now()` はページリフレッシュをまたいでデッドラインを永続化する場合にのみ使用されます。 4つのブラウザAPIにより、ユーザーが他の作業中でもタイマーが使い続けられます。Web Audio APIは資産コストゼロでフェーズ終了のビープ音を生成します。`new AudioContext()` -> 800Hzの `createOscillator()` -> 200msで減衰する `createGain()` -> `start()` そして `stop(currentTime + 0.2)`。Notifications APIは `Notification.requestPermission()` による1回の同意後、システムレベルのアラートを表示します。`new Notification('Focus complete', { body, icon, tag: 'pomodoro' })`（`tag` により高速連続発火を重複排除）。Wake Lock APIは `navigator.wakeLock.request('screen')` で集中セッション中にディスプレイのスリープを抑制し、休憩中は解放します。`document.title` は各ティックで `mm:ss - Focus` に書き換えられ、タブストリップに時間が表示され続けます。設定（所要時間、自動開始、サウンド）は `localStorage`（同期式、オリジンごと約5MBの容量制限）で永続化されます。円形プログレスはSVGの `<circle>` で、`stroke-dasharray = 2 * pi * r`、`stroke-dashoffset = dasharray * (1 - elapsed/total)` によりキャンバスのオーバーヘッドなしにリングをアニメーションします。注意力に関するバックグラウンド研究——シリロの25分の境界、ADHDの時間知覚の研究、コンテキストスイッチのコスト——は、なぜ柔軟な「あと5分」ではなく厳しい中断が有効かを説明しています。

• 4つの状態（work/shortBreak/longBreak/idle）を持つFSM。`round % roundsBeforeLong === 0` で長い休憩が発火。デフォルト25/5/15分、4ラウンド。50/10/30（深い作業）や52/17（Draugiem研究）のバリエーションあり。
• ドリフト耐性タイマー：`endTimestamp = performance.now() + remainingMs` を保存し、各ティックで `remainingMs = endTimestamp - performance.now()` を再計算。`setInterval` のスリップや非表示タブのスロットリング制限の影響を受けない。
• `performance.now()` は高精度モノトニッククロック（NTPや手動の壁時計変更の影響なし）。`Date.now()` はページリロードをまたぐデッドラインの永続化にのみ使用。
• Web Audio APIによるフェーズ終了ビープ：`new AudioContext()` -> `createOscillator()`（800Hz正弦波）-> 200msで線形に0に下がる `createGain()` -> `start()`/`stop()`。オーディオ資産の配信は不要。
• Notifications APIによるシステムアラート：`Notification.requestPermission()` を1回実行後、`new Notification(title, { body, tag: 'pomodoro' })` を使用。タブが非表示の間に複数フェーズが終了した場合、`tag` により重複排除。
• スクリーンWake Lock API：集中時に `navigator.wakeLock.request('screen')` でディスプレイスリープを抑制。休憩時に解放。タブが非表示になるとウェイクロックは自動解放され、`visibilitychange` で再取得が必要。
• 永続化とUI：`localStorage`（約5MBの容量）で所要時間・自動開始・サウンドを保存。SVGリングは `stroke-dasharray = 2*pi*r` と `stroke-dashoffset` のアニメーション。`document.title` は `mm:ss - フェーズ名` に書き換えられ、タブストリップでも残り時間が確認可能。