残業、遅刻、夜更かしを防ぐHTML #JavaScript

はじめに

ちょっとしたスクリプトを書いておくだけで、時間の使い方が変わるかもしれないよというお話し。

ずるずると残業するのをやめたいとき

ずるずると残業するのをやめたいとき、以下のHTMLをデスクトップにでもおいておきましょう。

帰宅時間.html

<!doctype html>
<head>
<meta charset="utf-8">
<style>
#time {
    font-size:200px;
    font-weigth:bold;
}
</style>
</head>
<body>
<p>今帰ると帰宅時間は<span id="time"></span>頃です。</p>
<script>
// 通勤にかかる時間
var hours = 1;
var minutes = 30;
update();
setInterval(update, 60 * 1000);
function update() {
    var dT = 60 * 60 * 1000 * hours + 60 * 1000 * minutes;
    var timeObj = new Date(new Date().getTime() + dT);
    var hour = timeObj.getHours();
    var minute = timeObj.getMinutes();
    hour = (10 <= hour) ? hour : "0" + hour;
    minute = (10 <= minute) ? minute :  "0" + minute;
    var time = hour + ":" + minute;

    document.querySelector("#time").textContent = time;
    document.title = time;
}
</script>
</body>
</html>

定時が近く成ったらこれをブラウザで開いて、一番左のタブにでも配置しておきましょう。「今帰ると帰宅時間が何時頃になるか」を常にタブに表示して「そろそろ帰ったら？」とプレッシャーを与えてくれます。

タブを開けば、でかでかと帰宅時間が表示されます。わざと上司に見えるように表示させておけば「そろそろ帰りたい」アピールになります。

淡々と帰宅時間を提示され続けたら、どこかのタイミングで「さすがに帰りたい」と思うでしょう。

遅刻ギリギリになってしまうとき

毎朝PCをいじってしまい遅刻ギリギリのあなたは、さっきのHTMLを文言だけ変更して保存しておきましょう。

今出発したら何時ごろに会社につくのか表示してくれます。

「今出たらギリギリなのか！」、「余裕をもって出社するには今出るしかないのか！」などと気づくことでしょう。

ずるずると夜更かししてしまう場合

ずるずると夜更かししてしまうあなたは、こんなHTMLを保存しておきましょう。

睡眠時間.html

<!doctype html>
<head>
<meta charset="utf-8">
<style>
#time {
    font-size:200px;
    font-weigth:bold;
}
</style>
</head>
<body>
<p>今から寝ると<span id="time"></span>睡眠です。</p>

<script>
// 起きる時間を設定
var wakeupHour = 7;
var wakeupMinute = 0;

update();
setInterval(update, 60 * 1000);
function update() {
    var now = new Date();
    now.setSeconds(0);
    now.setMilliseconds(0);

    var wakeUpTime = new Date();
    wakeUpTime.setHours(wakeupHour);
    wakeUpTime.setMinutes(wakeupMinute);
    wakeUpTime.setSeconds(0);
    wakeUpTime.setMilliseconds(0);
    if (wakeUpTime.getTime() <= now.getTime()) {
        wakeUpTime.setDate(wakeUpTime.getDate() + 1);
    }

    var diffSec = (wakeUpTime.getTime() - now.getTime()) / 1000;
    var hour = Math.floor(diffSec / 60 / 60);
    var minute = Math.floor((diffSec - (hour * 60 * 60)) / 60);
    var time = hour + "時間" + minute + "分"

    document.querySelector("#time").textContent = time;
    document.title = time;
}
</script>
</body>
</html>

あと何時間寝れるのか、まぎれもない事実を提示してくれます。気づかないふりをしてさらに夜更かしすると、無情に時間が減っていきます。きっと「さすがにそろそろ寝よう」と思わざるを得なくなるでしょう。