ポモドーロ・テクニックのサイクルで作業をするにあたり、「広告やボタンなどが表示されておらず、シンプルに作業時間と休憩時間のタイマーだけが表示されているサービスが欲しい」と思い、ブラウザで起動するポモドーロタイマーを作りました。
見た目
デフォルト（Light）
| 作業中 | 休憩中 |
|---|---|
Dark
| 作業中 | 休憩中 |
|---|---|
使い方
https://nishina555.github.io/digital-pomodoro-browser/pomodoro にアクセスするとポモドーロタイマーが起動します。
上記のURLにクエリパラメータを追加することでポモドーロタイマーの設定を変えられます。
クエリパラメータの詳細は以下の通りです。
| クエリ | 説明 | 型 | デフォルト |
|---|---|---|---|
| work | 作業時間(分) | number | 25 |
| break | 休憩時間(分) | number | 5 |
| startFrom | 作業時間が開始する「分」 | number | 0 |
| theme | テーマカラー | light｜dark | light |
| opacity | 透過率。0から1の範囲で設定可能 | number | 1 |
| displaySession | セッション(WorkあるいはBreak)の表示有無 | 0｜1 | 0 |
たとえば、https://nishina555.github.io/digital-pomodoro-browser/pomodoro?work=50&break=10&startFrom=45 は「作業時間50分、休憩10分、作業時間の開始時間は45分のポモドーロタイマー」を意味します。（現在時刻が10:30なら、10:45に作業時間がスタートするように逆算されたタイマーが起動します。）
利用用途
PCやスマホで当該URLにアクセスするだけでポモドーロ・タイマーがすぐに準備できます。
また、opacityオプションを利用することで背景を透過にできるので、例えばOBS Studioで当該URLを読み込むことで、Study with Meのライブ配信画面にタイマーを埋め込むことができます。
サービスの運用について
ニッチなサービスで需要はほとんどないと思うので、独自ドメインは取得せずにGitHub Pagesを利用して無料で運用しています。マネタイズも今のところ考えていません。
今後について
現在、クエリパラメータを直接変更することでタイマーの設定が変えられるようになっています。
もし需要があるようでしたら、フォームに回答するだけでクエリパラメータ付きのURLが自動生成されるような画面を作ろうと思います。