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

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

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

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

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

## コード一覧

```html: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>
```


```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 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`も用意しておきました。
使用する際は、ジングルの音声ファイルを同じフォルダに入れましょう。
個人的なおすすめは学校のチャイムです。

```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();
});

```

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