ポモドーロ変法タイマーの実装 (1)

動機

年末年始は当直で病院に釘付けであったため、この隙を利用して某レポート (55 症例でなんと A4 図無し 110 ページ！) を片づけることとした。が、いかんせん内容があまりにも面白くなさすぎるという問題があり、執筆中に意識散漫になるわ適当な理由をつけてやたら長い休憩を取ってしまうわで集中とは程遠い状態であった。

これを改善するために、ネット上でたまたま見かけた作業効率化用テクニック ポモドーロ法 (25 分集中し、その後 5 分休憩するという一連の流れを繰り返す手法) の実践を試みたところ、今度は以下のようなことが分かった。

• a. 上記の流れが外的な要因で破壊されたときのリカバリ方法がない。つまり、25 分の作業中に何らかの邪魔が入った場合 (病棟からの電話など) や、やむを得ず 5 分以上の休憩を取ってしまった場合 (知り合いと出くわしたときなど)、最初からやり直すしかなくなり有耶無耶になってしまう
• b. 気分が乗っているときは 25 分以上集中力が持つので、インターバルが 25 分で区切られているのは逆によろしくない場合がある
• c. そもそも席についてからポモドーロタイマーをスタートさせるまでに時間がかかる。よし作業をするぞと決意するのが、だらだらネットサーフィンをするなど一通りのんびりした後になってしまう

このうち a や b については、作業や休憩の前借りや借金 (つまり、長めに作業をしたときはそれに応じて休憩可能時間が長くなり、休憩を長くとってしまった分はそれに応じて長めの作業が付与される) を可能にすることにより、最終的に作業と休憩の合計時間比を 5:1 に調整できるのではないかと考えられた。これをポモドーロ変法と名付け、以下で実装を行っていく。完成したものは こちら。

ポモドーロ変法

概要

ポモドーロ法の基本骨格 (25 分作業をすれば 5 分休憩できるようにする) は残しつつ、以下のような仕組みを導入した。オリジナルと異なる部分を下線で示す。

1. 作業タイマーと休憩タイマーの 2 つを用意し、常にどちらか一方がカウントダウンされているようにする。能動的に切り替えない限り、状態は変わらない。
2. 25 分にセットされた作業タイマーが 0 になった瞬間、休憩タイマーに 5 分が加算されるようにする (休憩の貯金)。
3. 2 と同時に作業タイマーが 25 分にリセットされ、カウントダウンを始める。つまり、休憩に移ることなく自動的に次の作業インターバルに突入する。
4. 休憩したくなった場合はモードの切り替えを行う。今度は休憩タイマーのカウントダウンが発生し、2 の手順により貯めた休憩が消費されていく。
5. 休憩を消費しきった場合アラームが鳴るが、以降も休憩をやめなければ休憩タイマーは負の値になっていく (休憩の借金)。
6. 休憩をやめ作業に戻る際、休憩タイマーが負の値を指している場合はその秒数分を作業タイマーに加算した状態で作業タイマーのカウントダウンが発生する。つまり、長めに休んだ分だけ次の作業時間が長くなるという寸法である。

これに加え、以下のような工夫を施した。

• (上の c で挙げた) デスクについてから、仕事モードに入ってポモドーロタイマーをスタートさせるまでに時間がかかってしまう問題について。タイマーをスタートさせた時点でのデフォルトのモードを休憩 (5 分) とし、カウントダウンを開始することにより解決した。デスクについてからちょっとダラダラしてしまうのは仕方ないが、それを 5 分以内で終わらせなさいよという意図である。
• 生きている人間には食事が必要であるため、一日中上記のスケジュールに従って仕事をし続けられるわけではない問題について。食事休憩を想定して「休憩タイマーに 30 分追加する」ボタンを設置した。なお、このボタンは一度クリックすると 5 時間は無効になるので、長い休憩をむやみに何回もとることはできない。

実装

上記を JavaScript で書き、ブラウザから利用できるようにした (コードに興味がある方は こちらをどうぞ)。基本的に JavaScript の入門書にあるような setTimeout を使った至極単純なタイマーなので特に技術的に面白さがあるかといわれれば別にないが、以下のような問題が発生したので都度対処を要した。

• タブがアクティブでないと setTimeout がサボられ始める
  • こちらの stackoverflow のスレッドなどで議論がある。これは普通に知らなかったので見事に踏み抜いた。結果的に、Web Worker を利用することによりタイマーが開かれているタブが非アクティブな状態でもカウントダウンを実行することができた (参考)。
• タイマーの音がミュートになってしまう
  • Google Chrome では、ユーザが当該ページでクリックやタップなどのアクションを行わない限り音声の自動再生はミュートされる設定になっており (参考) 休憩を消費しきったタイミングでアラームを鳴らさそうにも無音になってしまう現象が発生する。
  • これを回避するために、(ややトリッキーではあるが) タイマー開始前にユーザにクリックおよび事前の音声再生を強制する仕様とした。具体的には、タイマー開始時に Start today's job なるそれっぽいボタンをクリックさせ、さらにそのタイミングで適当な音声を流すことにより上記の条件を自動的に満たすようにした。
• うっかりページ遷移や更新をしてしまった場合、リセットされてしまう
  • これは現状仕方がないので、ページ遷移のタイミングで警告を出すことによりこのような事故を防止することにした。
  • つまり、window.onbeforeunload を追記した。

実際に使ってみての感想

• 上記自作タイマーを使って実際にレポートを何本か書いてみた。単にタイマーを管理するだけでなく、やっているタスクの入力欄を作って作業の履歴が残るように実装してみたのだが、以下はその記録である。不定期に長い作業をしたり休憩を取ったりしつつ作業を進めていることが分かる。本来のポモドーロ法からは大分逸脱したスタイルだ。

• これだけだとタスクにかかった時間や休憩時間の実態がよく分からないので、Summarize 機能を追加してその日の時間の使い方を把握できるようにした。上記をまとめると以下のようになり、なんやかんや作業と休憩の比を 5:1 程度に調整できていることが分かった。結果的にレポートも捗ったし、やったね！

• ちなみにこのサマリはクリップボードにコピーできるようにしたので、こんな感じで Slack に貼るなりしてその日の作業概要を残しておくことが可能である。これは自分でも結構お気に入りの機能。

今後の課題

現状上の実装で特に困ってはいないが、今後改良が見込まれると考えられる点を以下に書き残しておく。

• 端末自体がスリープされるとカウントダウン自体がストップしてしまう
  • 電源接続時は PC を画面ロックするのみでスリープしない設定にしているので現時点では問題ないが、スマートフォンで利用する際には普通に困りそう
  • ブラウザ上の JavaScript を端末のスリープ中に動作させるのは原理的に不可能なので、タイマーの処理に Date 関数を利用する などして経過時間を計算するのが手っ取り早そう
• 休憩可能時間をオーバーした際、PC でアラームが鳴っていたとしても離席中は気づくことができない
  • 何らかの方法で iPhone の方に通知が飛ぶようにする……？ 何らかの web API を叩くにしても、ブラウザ上でやろうとすると CORS を踏みそう
  • 離席中に気づけなくても構わないように休憩の借金制度を導入しているので、まあこれはこれでいいのではないかという気はする