資料を作りながらタイマーを使っていると、残り時間を見るためだけにブラウザのタブを開き直すことがあります。別のアプリで作業しているときは、タイマーが画面の奥に隠れてしまいます。
Picture-in-Picture(PiP)対応のタイマーなら、作業画面とは別の小窓で残り時間を確認できます。PiPを利用できない環境でも、通常のブラウザタイマーとして使えます。
Browser KittyのPomodoro Timerは、25分集中・5分休憩の繰り返しを基本に、対応環境での小窓表示、作業時間の延長、履歴保存に対応しています。ブラウザによって小窓でできることが違うので、操作と制限を順に確認します。
1. まず25分の集中タイマーを始める
Pomodoro Timerを開き、「このセッションでやること」に今回取り組む作業を1つ入力します。たとえば「報告書の表を直す」のように、目の前の作業だけを書きます。「スタート」を押すと集中時間の計測が始まります。
初期設定は集中25分、短い休憩5分、長い休憩15分です。集中セッションの完了を重ねると、通常は短い休憩へ進み、4回目の集中後に長い休憩が入ります。時間はあとから変更できます。
タイマーは残り時間を毎秒単純に引くのではなく、時刻を基準に計算します。別タブへ移ったときの処理間隔の変化によって、カウントが積み重なってずれるのを抑える仕組みです。
| 区分 | 時間 | 進み方 |
|---|---|---|
| 集中 | 25分 | 作業を始める |
| 短い休憩 | 5分 | 通常の集中セッション後 |
| 長い休憩 | 15分 | 4回目の集中後 |
2. PiPでタイマーを小窓表示する
PCでタイマーを開始したら「PiP」を押します。対応ブラウザでは小さな別ウィンドウが開きます。元のタブから離れ、文書編集や表計算ソフトで作業しながら残り時間を確認できます。
Document Picture-in-Pictureに対応している環境では、タイマーの小窓に現在の作業と操作ボタンが表示されます。小窓から一時停止・再開、5分追加、セッション完了を操作できます。
小窓の表示や位置はブラウザ・OSの機能に依存します。アプリからどんな環境でも小窓を強制表示できるわけではなく、対応していないときは別の表示方式や通常画面へ切り替わります。
3. 小窓で操作できないときは表示方式を確認する
Pomodoro Timerは利用可能なブラウザ機能によってPiPの方式を切り替えます。Document PiPを使えない場合は、Canvasで描いたタイマーを動画として表示するVideo PiPを試みます。
Video PiPの小窓には残り時間などが表示されますが、アプリの一時停止や完了ボタンは入りません。操作したいときは元のタイマー画面へ戻ります。Video PiPも使えない環境では、小窓を使わずにタイマーを続けられます。
Document PiPは特に対応するPC向けブラウザで利用できる機能です。スマホを含め、使えるPiP方式はブラウザとOSで変わるため、画面上に操作ボタンが出ないことだけでタイマーの不具合とは限りません。
| 表示方式 | 小窓の表示 | 操作する場所 |
|---|---|---|
| Document PiP | タイマーと操作ボタン | 小窓から操作できる |
| Video PiP | 表示専用タイマー | 元の画面 |
| PiPなし | 小窓は表示されない | 元の画面 |
4. 集中時間を変えたいときの設定方法
「設定」を開くと、集中・短い休憩・長い休憩の分数を変更できます。設定を確定するときは「保存」を押します。集中時間が25分では長すぎる場合も、使いやすい分数を指定できます。
よく使う時間の組み合わせは、3件まで「入力中の時間をセットに保存」で保存できます。セットの「適用」は設定欄に分数を入れる操作です。実際の設定として確定するには、そのあとに「保存」を押してください。
進行中・一時停止中・Flow中に設定を保存しても、タイマーの残り時間は変わりません。新しい分数は時間を追加していない未開始のタイマーや次のセッション、リセット後に反映されます。
5. 25分を過ぎても作業を続ける
集中が続いているときに時間で中断したくなければ、「Flow延長」をオンにします。設定時間が00:00になっても休憩へ強制移行せず、+03:42のように超過した時間を表示します。
あらかじめ5分だけ増やしたい場合は「+5分」を使えます。Flow中に5分追加しても、すでに記録した超過時間は維持されます。
作業を区切るときは「完了して次へ」を押します。Flowを使った場合も、集中セッションの完了を自分で決められます。
6. 集中が途切れた回数を記録する
作業中に別のことを始めたと気づいたら「気が散った」を押します。そのセッションの脱線回数が1つ増えます。押し間違えたときは画面に出る通知から元に戻せます。
記録するのは脱線の回数で、何をしていたかの詳細な日誌ではありません。今日の集中時間や完了セッション数と合わせて見返すことができます。
7. 終了通知やPiPが動かないときに確認すること
デスクトップ通知を使う場合は、ブラウザ側の通知許可が必要です。通知やPiPの利用可否はブラウザ、OS、ページを開いた環境によって変わります。通知が出ない場合でも、タイマー画面の時間表示は利用できます。
Document PiPはセキュアな実行環境などの条件があるため、単一HTMLをfile://で開くと利用できない場合があります。まず通常のWeb版で「PiP」を試し、動かなければPiPを使わずタイマーを利用してください。
小窓を閉じたときも元のページで作業を続けられます。PiPが表示されない場合は、ページ内のタイマーが開始・停止できるかを先に確かめると、表示方式の問題とタイマー自体の問題を分けて考えられます。
8. 集中履歴を確認してCSV・JSONへ保存する
今日の集中時間、完了セッション数、脱線回数を画面で確認できます。集中履歴は直近300件まで保存され、「今日」「すべて」の切り替えや、やることの文字検索で絞り込めます。
履歴のCSV出力は、表示中の絞り込みに一致した項目が対象です。日時はUTCで、分数は小数も保持されます。表計算ソフトで確認する場合はタイムゾーンに注意してください。
一方「JSONを書き出す」は設定やタイマー状態、履歴などをまとめて保存するバックアップです。CSVの絞り込み結果だけを保存する操作とは用途が違います。別の環境へ移る前にはJSONの保存を検討してください。
9. データはどこに保存される?
「このセッションでやること」、タイマーの状態、設定、履歴はブラウザのlocalStorageに保存されます。別のブラウザや端末とは自動同期しません。サイトデータを削除すると、JSONでバックアップしていない履歴が失われる場合があります。
Pomodoro Timerはタイマー処理のために外部APIへデータを送信しません。実装には外部ランタイムライブラリがなく、Content Security Policyでconnect-src 'none'を設定しています。ただし、Web版を最初に開く際はHTMLを取得する通信が発生します。
通常のタイマーは保存した単一HTMLでも動きますが、PiPや通知のようなブラウザ機能は制限される場合があります。小窓を使う予定があるなら、利用するブラウザと環境で一度確認してください。
Pomodoro Timer
作業中も画面の隅に置けるPicture-in-Picture対応のポモドーロタイマー。集中・休憩・履歴をブラウザ内で管理します。
注意点
- 操作できる小窓が必要ならDocument PiP対応のPCブラウザを使います。Video PiPでは操作を元画面で行います。
- 設定セットを「適用」しただけでは分数が確定しません。設定画面の「保存」も押してください。
- 小窓を使えないスマホでも、通常のタイマーと集中履歴の機能は利用できます。
- 履歴を残す場合、CSVは絞り込んだ履歴、JSONはローカルデータ全体のバックアップという違いがあります。
よくある質問
ポモドーロタイマーを無料で使えますか?
はい。Pomodoro Timerは登録・インストール不要で使えます。通常のタイマーはPiP非対応の環境でも動作します。
PCの画面の隅にタイマーを常に表示できますか?
対応するブラウザ・OSでPiPを開くと、小窓にタイマーを表示できます。PiP非対応の環境では通常のページ表示になります。
小窓から一時停止や5分追加はできますか?
Document PiPなら小窓から操作できます。Video PiPは表示専用なので、操作は元の画面で行います。
スマホでもPiPを使えますか?
利用可否はブラウザとOSによって異なります。Video PiPを使える場合もありますが、小窓が使えなくても通常のタイマーは利用できます。
25分集中・5分休憩以外に設定できますか?
集中・短い休憩・長い休憩を変更できます。よく使う組み合わせを3件まで保存できますが、セットを「適用」したあと設定の「保存」が必要です。
集中が続いているときは25分で止まりますか?
Flow延長をオンにすると、00:00を過ぎても超過時間を数えながら集中を続けられます。
履歴は消えませんか?
履歴はブラウザ内のlocalStorageに保存されます。サイトデータ削除で失われる場合があるため、必要ならJSONを書き出してください。
参考資料
アプリの操作と制限は現行READMEと仕様書、PiPのブラウザ側の条件はMDNの資料を参照しました。
- Pomodoro Timer 日本語README:小窓の操作・時間設定・履歴
- Pomodoro Timer 英語README:PiPの表示方式・JSON保存
- Pomodoro Timer APP_SPEC:タイマーの動作と制限
- MDN Web Docs Document Picture-in-Picture APIの対応条件
- MDN Web Docs 動画のPicture-in-Picture API