ブラウザだけで使える HIIT / Tabata インターバルタイマーの組み方

ジムでも自宅でも「すぐ動かしたい」のがタイマー

HIIT (高強度インターバルトレーニング) や Tabata は、運動と休憩の秒数を厳密に守ることで効果が変わるトレーニング形式です。Tabata プロトコルは「20 秒運動 + 10 秒休憩 × 8 ラウンド (合計 4 分)」が定義そのもので、秒数がズレると別物になります。HIIT 30/30、45/15、40/20 のような派生も同じく秒単位の正確さが前提です。

困りごとは、設定の起動コストです。スマホアプリを毎回起動 → 広告を閉じる → プリセットを探す → 開始、という流れは続きにくい。ジムのスタジオやリビングで、ブラウザのタブを 1 つ開けば即座にラウンドが回り始める方が習慣化しやすく、PC・スマホ・タブレットの違いを意識しなくて済みます。これがブラウザ完結 interval-timer の使いどころです。

ブラウザだけでセットアップする手順

interval-timer を開き、画面上のプリセットボタンから Tabata (20s/10s × 8R)、HIIT 30/30、HIIT 45/15、HIIT 40/20 のいずれかを 1 クリックで適用します。プリセットを使わず自由に組む場合は、準備 (warm-up) / 運動 (work) / 休憩 (rest) / 整理体操 (cool-down) の各秒数とラウンド数のフィールドに直接入力します。設定は localStorage に自動保存されるので、次回タブを開いた時に同じセットが復元されます。

「開始」を押すと現在のフェーズ・残り秒・ラウンド進捗が大きく表示され、フェーズ切り替え時に Web Audio で短いビープが鳴ります。運動開始は 880 Hz の高音、休憩開始は 440 Hz の低音、セッション終了は和音、最後の 3 秒はカウントダウンの『ティック』音 (オプションで on/off) です。スマホを離れた場所に置いていても音だけで遷移が把握できます。

バックグラウンドタブでも遅れない仕組み

ブラウザのタイマーで起きがちな問題は、タブが非アクティブになると setTimeout / setInterval の発火間隔がブラウザ側にスロットルされ、1 秒タイマーが実際には数秒に 1 回しか進まなくなることです。スマホでは画面消灯時にさらに頻度が落ちます。これに対処するため、interval-timer は経過時間を setInterval のカウントではなく performance.now() の差分で計算します。発火が遅れても次の tick で「実際に何秒経ったか」を読み取って同期し直すので、バックグラウンドで再表示した瞬間に正しいフェーズに飛びます。

音声は Web Audio API の AudioContext で都度合成しています。サンプル MP3 を読み込むのではなく OscillatorNode + GainNode で正弦波を発生させ、exponentialRampToValueAtTime でフェード処理しているだけなので、ネットワーク取得は発生せず、初回タップ後はオフラインでも音が鳴ります。なお iOS Safari はユーザー操作なしで AudioContext を起動できない制約があるため、最初の「開始」ボタンで内部的に audioContext.resume() を呼んでいます。

アプリ・SaaS 型タイマーと違うところ

スマホのインターバルタイマーアプリは便利ですが、広告 SDK・解析 SDK が同梱されていることが多く、起動するたびに広告ネットワークへ識別子が送信されます。Web 版の SaaS タイマーも、設定値や利用状況をサーバーに保存するために通信が発生します。トレーニングの内容そのものは機微情報ではないにせよ、「いつ・どのくらいの頻度で運動しているか」は健康関連の行動ログで、第三者には渡したくない人もいます。

interval-timer は localStorage で設定を保存し、音は AudioContext で合成、タイマーは performance.now() で進めるだけで、外部に送信する経路がコードに存在しません。DevTools の Network タブを開いたまま 4 分間 Tabata を回しても、初回のアセット取得後はリクエストが流れません。実装は GitHub で公開しており、ストップウォッチ用途なら stopwatch、25 分集中なら pomodoro-timer も同じ思想で作られています。