ポモドーロタイマーを作成する方法｜自作する手順と必要な機能を解説

「ポモドーロタイマーを自分で作成したい」「Webで動くシンプルなタイマーを作ってみたい」。

ポモドーロタイマーは、基本的な仕組みだけなら比較的シンプルに作成できます。

必要なのは、集中時間と休憩時間をカウントダウンし、終了したら次の状態へ切り替える仕組みです。

例えばWeb版なら、HTML・CSS・JavaScriptを使ってブラウザ上で動くポモドーロタイマーを作れます。

この記事では、ポモドーロタイマーを作成するときに必要な機能や基本的な設計、実装するときのポイントを紹介します。

ポモドーロタイマーは自分で作成できる？

ポモドーロタイマーの基本機能はシンプルです。

一般的なポモドーロ・テクニックでは、

25分集中する
5分休憩する
集中と休憩を繰り返す
数セットごとに長い休憩を取る

という流れで使います。

そのため、最低限必要なのは、

残り時間を表示する
タイマーを開始する
一時停止する
リセットする
集中と休憩を切り替える

といった機能です。

これだけでも基本的なポモドーロタイマーとして利用できます。

ポモドーロの基本については、ポモドーロタイマーのやり方も参考にしてください。

Web版ならHTML・CSS・JavaScriptで作れる

ブラウザで動くポモドーロタイマーなら、基本的に次の3つを使って作れます。

HTML

タイマーの画面構造を作ります。

例えば、

残り時間
開始ボタン
一時停止ボタン
リセットボタン
集中・休憩の表示

などです。

CSS

タイマーの見た目を整えます。

例えば、

文字サイズ
ボタンの配置
背景
色
レイアウト

などを設定します。

JavaScript

実際のタイマー処理を作ります。

例えば、

1秒ごとに残り時間を減らす
25分が終わったら休憩へ切り替える
ボタン操作を処理する
セット数を管理する

といった部分です。

最低限必要な画面を決める

最初から高機能なタイマーを作ろうとすると複雑になります。

まずは、必要最低限の画面を考えましょう。

例えば、

状態表示

「集中」「短い休憩」などを表示する。

残り時間

25:00のように表示する。

開始・停止ボタン

タイマーを操作する。

リセットボタン

時間を最初に戻す。

この程度でも十分使えるタイマーになります。

まず25分のカウントダウンを作る

最初に作るべきなのは、25分のカウントダウンです。

内部では時間を秒で管理すると分かりやすくなります。

25分なら、

25 × 60 = 1500秒

です。

画面は1秒ごとに更新しますが、残り時間の基準は「更新回数」ではなく終了予定時刻にします。

例えば開始時に、

const endAt = Date.now() + 25 * 60 * 1000;

と終了予定時刻を保存し、更新するたびに、

const remainingMs = Math.max(0, endAt - Date.now());

と差を計算します。

単純に1秒ごとに残り時間を1減らすだけだと、非表示タブでタイマー処理が間引かれたり、ブラウザが一時的に忙しくなったりしたときに表示が遅れることがあります。setIntervalやsetTimeoutは画面を更新するきっかけとして使い、時刻の基準にはしないほうが正確です。

ブラウザが非表示タブのタイマー処理を遅らせる仕組みは、MDNのsetTimeout解説でも確認できます。

残り秒数として見ると、

と進めます。

画面に表示するときは、秒数を「分:秒」に変換します。

例えば残り1499秒なら、

24:59

と表示します。

開始と一時停止を作る

次に、タイマーを操作できるようにします。

基本的には、

開始

カウントダウンを始める。

一時停止

カウントダウンを止める。

再開

停止した位置から続きを始める。

という動作です。

ここで重要なのは、開始ボタンを何度も押したときに複数のタイマー処理が同時に動かないようにすることです。

タイマーがすでに動いている場合は、新しい処理を開始しないようにします。

リセット機能を作る

リセットを押したら、現在のタイマーを停止し、最初の時間へ戻します。

集中中なら25分。

休憩中なら5分。

というように、その状態の初期時間へ戻す方法があります。

また、

「リセットしたら必ず集中25分へ戻す」

という仕様にしても構いません。

どちらにするかは、タイマーの使い方に合わせて決めましょう。

集中と休憩を切り替える

25分のタイマーが完成したら、次は休憩を追加します。

例えば状態を、

focus
shortBreak
longBreak

の3種類で管理します。

集中時間が終了したら、

focus → shortBreak

へ切り替えます。

5分休憩が終了したら、

shortBreak → focus

へ戻します。

この切り替えを自動化すれば、ポモドーロらしいタイマーになります。

4セットごとに長い休憩を入れる

一般的なポモドーロでは、数セットごとに長い休憩を取ります。

例えば4セットごとに、

25分集中

↓

5分休憩

を繰り返し、

4回集中したら、

15〜30分の長い休憩

へ切り替えます。

そのため、タイマー内部で、

「現在何セット目か」

を管理します。

例えば、

completedPomodoros = 0

から始め、集中時間が終了するたびに1増やします。

4になったら長い休憩へ切り替える、という仕組みにできます。

時間を変更できるようにする

25分・5分で固定しても使えますが、自分用に作るなら時間を変更できると便利です。

例えば設定画面で、

集中時間
短い休憩
長い休憩

を変更できるようにします。

ポモドーロでは25分が有名ですが、

15分
25分
45分
50分
60分

など、自分に合った時間へ変更して使う人もいます。

時間については、ポモドーロタイマーのおすすめ時間も参考にしてください。

終了音を追加する

タイマーが終了したことに気づけるよう、通知音を追加する方法があります。

集中時間が終わったら音を鳴らし、

「休憩になった」

と分かるようにします。

ただし、ブラウザでは音声の自動再生に制限がある場合があります。

ユーザーが一度操作してから音声を再生するなど、ブラウザの仕様を考慮する必要があります。

また、

無音
小さい音
好きな通知音

を選べるようにすると使いやすくなります。

ブラウザ通知を追加する方法もある

別のタブで作業していると、タイマー終了に気づかないことがあります。

その場合はブラウザ通知を使う方法があります。

例えば、

集中時間が終了しました

5分休憩しましょう

といった通知を表示します。

ただし、ブラウザ通知を利用する場合はユーザーの許可が必要です。対応ブラウザではHTTPSなどの安全な接続も必要になるため、ローカルで動いた機能を公開環境でも確認しましょう。

通知許可はページ表示直後ではなく、ユーザーが通知を有効にするボタンを押したときに求めるのが適切です。詳しい要件は、MDNのNotifications API解説を確認してください。

タブタイトルに残り時間を表示する

Web版ポモドーロタイマーでは、ブラウザのタブタイトルに残り時間を表示する方法もあります。

例えば、

24:32 | 集中

のように表示します。

別のタブで作業していても、タブを見るだけで残り時間を確認できます。

PCで仕事や勉強をする場合に便利な機能です。

終了予定時刻を表示する

残り時間だけでなく、

終了予定 15:35

のように終了時刻を表示する方法もあります。

例えば現在時刻が15:10で、残り25分なら、

15:35

が終了予定です。

「あと25分」と「15:35まで」では、後者のほうが予定を立てやすい人もいます。

自動開始を追加する

さらに便利にするなら、タイマー終了後に次のタイマーを自動で開始する機能もあります。

例えば、

25分集中終了

↓

自動で5分休憩開始

↓

5分休憩終了

↓

自動で25分集中開始

という動作です。

ただし、自動開始が苦手な人もいます。

休憩終了後に自分のタイミングで再開したい場合もあるため、

自動開始 ON / OFF

を選択できるようにすると使いやすくなります。

スキップ機能もあると便利

現在のタイマーを待たずに、次の状態へ移動したいこともあります。

例えば、

集中を早めに終える
休憩を早めに終える
長い休憩をスキップする

といったケースです。

そのため、

スキップ

ボタンを追加しておくと便利です。

ただし、スキップした場合にセット数を増やすかどうかなど、仕様を決めておく必要があります。

デザインはシンプルでも十分

ポモドーロタイマーは毎日長時間表示することがあります。

そのため、画面を派手にしすぎるより、

残り時間が見やすい
ボタンが分かりやすい
集中・休憩の状態が分かる
長時間見ても疲れにくい

というデザインが使いやすいでしょう。

最初は白い背景に大きな数字だけでも十分です。

機能が完成してから、色や背景などを追加すると作りやすくなります。

集中と休憩でデザインを変える

状態を見分けやすくするために、集中と休憩で画面の見た目を変える方法があります。

例えば、

集中

落ち着いた背景。

短い休憩

少し明るい背景。

長い休憩

別の背景。

というように切り替えます。

数字だけでなく画面全体で現在の状態を判断できるようになります。

スマホ対応も考える

Web版として公開するなら、PCだけでなくスマートフォンから利用する人もいます。

そのため、

ボタンを押しやすくする
文字を小さくしすぎない
横幅に合わせてレイアウトを変える
画面からはみ出さない

など、スマホ表示も確認しましょう。

レスポンシブデザインにしておけば、PCとスマートフォンの両方で使いやすくなります。

保存機能を付ける

設定した集中時間を毎回入力するのが面倒なら、ブラウザへ保存する方法があります。

例えばlocalStorageを利用して、

集中時間
短い休憩
長い休憩
自動開始の設定

などを保存できます。

次回タイマーを開いたときも、前回と同じ設定を利用できます。

自分専用のタイマーなら、アカウント機能まで作らなくても十分です。

統計機能を追加する

さらに機能を増やすなら、集中時間の記録を残す方法があります。

例えば、

今日の集中時間
今日のポモドーロ数
今週の集中時間
日別の記録

などです。

ただし、タイマーを作るだけなら最初から統計まで実装する必要はありません。

まず基本的なタイマーを完成させてから追加するのがおすすめです。

最初から全部作らない

ポモドーロタイマーを作成するときにありがちなのが、最初から機能を増やしすぎることです。

例えば、

タスク管理
統計
アカウント
BGM
テーマ
通知
同期

などをすべて実装しようとすると、一気に複雑になります。

まずは、

25分カウントダウン
開始・停止
リセット
5分休憩
自動切り替え

くらいまで作ります。

実際に自分で使ってみて、不便に感じた機能を追加していくほうが作りやすいでしょう。

ポモドーロタイマー作成はプログラミング練習にも向いている

ポモドーロタイマーは、Webプログラミングの練習題材としても使いやすいものです。

タイマーを作る過程で、

HTML
CSS
JavaScript
イベント処理
状態管理
時刻計算
localStorage

などを学べます。

基本版はシンプルですが、機能を増やすとさまざまな実装を試せます。

プログラミングでポモドーロを使う方法については、ポモドーロタイマーをプログラミングに活用する方法も参考にしてください。

自分で作らず既存タイマーを使う方法もある

ポモドーロタイマーを作ること自体が目的なら、自作はよい勉強になります。

一方、

「仕事や勉強で集中したいだけ」

なら、自分で作る必要はありません。

タイマー作成に何時間も使うより、既存のWebタイマーを使えばすぐにポモドーロを始められます。

作ることと使うことは、目的を分けて考えましょう。

Pomolikaなら作成せずブラウザですぐ使える

Pomolikaは、ブラウザで使えるポモドーロタイマーです。

集中時間、短い休憩、長い休憩を設定できるため、自分でタイマーを一から作らなくてもポモドーロを始められます。

自作タイマーを作る前に、

「実際にどんな機能が必要なのか」

を確認するために既存タイマーを使ってみる方法もあります。

Pomolikaのタイマーを使う

まとめ

ポモドーロタイマーは、HTML・CSS・JavaScriptを使えばWebブラウザ上で作成できます。

まず必要なのは、

残り時間
開始
一時停止
リセット
集中・休憩の切り替え

といった基本機能です。

そこから必要に応じて、

4セット後の長い休憩
時間変更
自動開始
通知
タブタイトル
終了予定時刻
スキップ
設定保存
統計

などを追加できます。

最初から高機能なタイマーを目指すのではなく、まず25分のカウントダウンを完成させ、実際に使いながら少しずつ機能を増やすのがおすすめです。