ポモドーロテクニックを適用したタイマーを作成した

ポモドーロテクニック

ポモドーロテクニックは、仕事を 25 分ずつのセッションに分け、そのあいだに短い休憩をはさんで行う時間管理術です。集中力を維持しながら生産性を上げる効果があるこの手法は、ビジネスシーンだけでなく、勉強などに集中したいときにも活用できるテクニックです。

https://asana.com/ja/resources/pomodoro-technique　より引用

この考え方を基に、2種類の時間のタイマーを交互に動作させるWebアプリを作成した。

このアプリはこちらから体験できます

▶︎ ポモドーロタイマー

使用技術

• Nuxt.js
  • virsion : 3.16.0

ホスティングサービスにはNetlifyを使用。

選定理由

私が使い慣れていたため、NUXTを使用。 正直なところ、HTMLとCSS, Javasciptを用意してindex.htmlを作成するだけで実装できたとは思う。 しかし、VueのHTML（の最低限の部分）だけ書けば良い部分も気に入ってたのでこちらを使用。

背景

在宅で作業やバイトをすることが多く、もちろん自室なので他人の目もない。 そのため、作業中にダレることが多かった。 その対処のために作成した。

スクリーンショット

特徴とこだわり

英語切り替えができる

上部のトグルスイッチで英語に切り替えられる。 日本語に疲れた人におすすめ。

作業時間と休憩時間の変更ができる

25分作業、5分休憩が一般的に良いとされているが、個人差はあると思う。 そのため、±ボタンでも、直接テキスト打ち込みでも使いやすい方で時間の調節ができる。

音声通知対応

作業中は常に画面を見ている訳ではないはずなので、もちろん音で通知してくれる。 また、音量の調整もできる。 しかし、音量の調整は、スライダーでなく複数のボタンから選ばせる方法を採用した。 スライダーではクリックしてスライドして離すという動作が要求されるが、 ボタンではクリックするだけで直感的。