「モニターに窓をつける」とは

この記事を読む方は、普段業務中にオフィスにいて、PCと向き合っている方が多いでしょう。
そして作業に追われて出る一言。
「うわぁ、もうこんな時間だ！」

そんな少し悲しい瞬間を無くすために、
「時間に対応して（空の）画像が切り替わるページ」
を作っておきました。
名付けて 「窓」 です。

使い方

1.フォルダを用意します。
2.お好みの朝、昼、夜の空の写真を用意します。
3.それぞれmorning.jpg、afternoon.jpg、night.jpgとでもしておきましょう。
4.用意したフォルダに画像を入れます
5.後述のindex.html、script.js、styles.cssを同じフォルダに作りましょう
6.index.htmlをブラウザで開けば、モニターに窓が出ます

画像の名称について、コードが書き換えられる人はindex.htmlを書き換えてもOK

コード一覧

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>窓</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div id="image-container">
        <img class="bg-image" src="morning.jpg" alt="朝の風景">
        <img class="bg-image" src="afternoon.jpg" alt="昼の風景">
        <img class="bg-image" src="night.jpg" alt="夜の風景">
    </div>

    <script src="script.js"></script>
</body>

</html>

script.js

window.addEventListener("DOMContentLoaded", function () {
    var imageElements = document.querySelectorAll(".bg-image");
    var currentIndex = 0; // 現在のインデックスを保持する変数

    function showInitialImage() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var currentMinute = hour * 60 + minute;

        var initialIndex;
        if (currentMinute >= 5 * 60 && currentMinute < 10 * 60 + 30) {
            initialIndex = 0; // 朝の画像
        } else if (currentMinute >= 10 * 60 + 30 && currentMinute < 17 * 60) {
            initialIndex = 1; // 昼の画像
        } else {
            initialIndex = 2; // 夜の画像
        }

        imageElements[initialIndex].style.opacity = "1";
        currentIndex = initialIndex; // currentIndex を初期化する
    }

    function changeImage() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var currentMinute = hour * 60 + minute;

        var nextIndex;
        if (currentMinute >= 5 * 60 && currentMinute < 10 * 60 + 30) {
            nextIndex = 0; // 朝の画像
        } else if (currentMinute >= 10 * 60 + 30 && currentMinute < 17 * 60) {
            nextIndex = 1; // 昼の画像
        } else {
            nextIndex = 2; // 夜の画像
        }

        if (nextIndex !== currentIndex) {
            fadeIn(imageElements[nextIndex]);
            fadeOut(imageElements[currentIndex]);
            currentIndex = nextIndex;
        }
    }

    function fadeIn(element) {
        element.style.opacity = "1";
    }

    function fadeOut(element) {
        element.style.opacity = "0";
    }

    // 初回の画像表示
    showInitialImage();

    setInterval(changeImage, 1000);
});

styles.css

#image-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* ウィンドウの高さに合わせる */
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

おまけ

1時間ごとにちょっとした音楽（ジングル）が鳴ってくれれば、さらに時間がわかりやすいですよね。
ということで、ジングルを使うscript.jsも用意しておきました。
使用する際は、ジングルの音声ファイルを同じフォルダに入れましょう。
個人的なおすすめは学校のチャイムです。

script.js

window.addEventListener("DOMContentLoaded", function () {
    var imageElements = document.querySelectorAll(".bg-image");
    var currentIndex = 0; // 現在のインデックスを保持する変数

    function showInitialImage() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var currentMinute = hour * 60 + minute;

        var initialIndex;
        if (currentMinute >= 5 * 60 && currentMinute < 10 * 60 + 30) {
            initialIndex = 0; // 朝の画像
        } else if (currentMinute >= 10 * 60 + 30 && currentMinute < 17 * 60) {
            initialIndex = 1; // 昼の画像
        } else {
            initialIndex = 2; // 夜の画像
        }

        imageElements[initialIndex].style.opacity = "1";
        currentIndex = initialIndex; // currentIndex を初期化する
    }

    function changeImage() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var currentMinute = hour * 60 + minute;

        var nextIndex;
        if (currentMinute >= 5 * 60 && currentMinute < 10 * 60 + 30) {
            nextIndex = 0; // 朝の画像
        } else if (currentMinute >= 10 * 60 + 30 && currentMinute < 17 * 60) {
            nextIndex = 1; // 昼の画像
        } else {
            nextIndex = 2; // 夜の画像
        }

        if (nextIndex !== currentIndex) {
            fadeIn(imageElements[nextIndex]);
            fadeOut(imageElements[currentIndex]);
            currentIndex = nextIndex;
        }
    }

    function playJingleAtNextHour() {
        var date = new Date();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var delay = (60 - minutes) * 60 * 1000 - seconds * 1000; // 次の時刻までの残り時間（ミリ秒）

        var jingleAudio = new Audio("jingle.mp3"); // ジングル音声ファイルのパスを指定

        setTimeout(function () {
            if (date.getMinutes() !== 0 || date.getSeconds() !== 0) {
                // 次の時刻までの間に0分にならなかった場合は再度ジングルを設定する
                playJingleAtNextHour();
            } else {
                // ジングル音声を再生
                jingleAudio.play();
                playJingleAtNextHour(); // 次の時刻に再度ジングルを設定する
            }
        }, delay);
    }

    function fadeIn(element) {
        element.style.opacity = "1";
    }

    function fadeOut(element) {
        element.style.opacity = "0";
    }

    // 初回の画像表示
    showInitialImage();

    setInterval(changeImage, 1000);

    // 最初のジングルを設定する
    playJingleAtNextHour();
});

最後に

内容としては難しい内容ではないのですが、滑らかに画像を変えるなど、目に優しく、ちょっと楽しくなる工夫を入れています。
また、このコードは簡単であるが故に改変の方向性が沢山あるかと思いますので、是非「自分はこうしてみました」の~~つくれぽ~~コメントお待ちしています。

あなたのモニターに窓をつけよう！

「モニターに窓をつける」とは

使い方

コード一覧

おまけ

最後に