読者です 読者をやめる 読者になる 読者になる

HTMLとJavascriptで簡易ポモドーロタイマー

何か作業をする時にダラダラと時間をかけてしまいがちなので、なかば勢いでポモドーロタイマー?を作りました。

とりあえずブラウザでいいんじゃないかということでJavaScriptです。最低限満たしたかった要件としては、作業時間と休憩時間を連続してカウントさせること。

ソース

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
   <meta charset="UTF-8">
   <title>簡易ポモドーロタイマー</title>
   <script type="text/javascript">
       var work_time = 1500;
       var state = "work";
       var timer;
               
       function timer_start(){
           document.getElementById("current_time").innerText = work_time;
           timer = setInterval(time_count,1000);
       }

       function timer_stop(){
           clearInterval(timer);
       }

       function timer_reset(){
           clearInterval(timer);
           work_time = 1500;
           rest_time = 300;
           document.getElementById("current_time").innerText = work_time;
       }

       function time_count(){
           work_time--;
           document.getElementById("current_time").innerText = work_time;
           if(work_time <= 0) {
               clearInterval(timer);
               if(state == "work"){
                   alert("休憩!!!!");
                   state = "rest";
                   work_time = 10;
               }else if(state == "rest"){
                   alert("再開!!!!");
                   state = "work";
                   work_time = 1500;
               }
               timer_start();
           }
       }
   </script>
   
   <style type="text/css">
        #container{width: 250px; margin: 30px auto; border: 1px solid #CCC; text-align: center; padding: 10px;}
        #current_time{font-size: 36px; }
        input[type="button"]{ width: 80px;}
    </style>
</head>
<body>
    <div id="container">
        <div id="current_time">0</div>
        <form action="">
            <input type="button" value="START" onClick="timer_start();" /><br />
            <input type="button" value="STOP" onClick="timer_stop();" /><br />
            <input type="button" value="RESET" onClick="timer_reset();" />
        </form>
    </div>

</body>
</html>

こんな感じです。

表示形式は時刻ではなく秒数のカウントダウンですし、精度についても厳密なものは求めていません。さらに簡易的にするなら、分単位で表示させたり、途中経過もなしで作業時間と休憩時間が経過したらalertを表示するだけとかでもいいかもしれません。

作業時間を25分、休憩時間を5分としているのは、人間の集中力が持続するのはせいぜい30分くらいだというのを本で読んだため。タイトルにポモドーロタイマーなんて書いてますが、単に短時間で時間を区切って作業することだと思っていて、以下の記事を読むまで1ポモドーロって単位があることを知りませんでした。

作ってはみたものの、やっぱりブラウザじゃなくてGUIのアプリにしたほうがいいし、休憩で席を立つこともありえるから音が鳴らないと…なんてことが出てきます。記事を読んだのもいったん作り終えたあとだったので、4ポモドーロやったら15分休むっていう要件も入ってません。次に改良版を作るならAutoHotkeyあたりでしょうか。