「モニターに窓をつける」とは
この記事を読む方は、普段業務中にオフィスにいて、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();
});
最後に
内容としては難しい内容ではないのですが、滑らかに画像を変えるなど、目に優しく、ちょっと楽しくなる工夫を入れています。
また、このコードは簡単であるが故に改変の方向性が沢山あるかと思いますので、是非「自分はこうしてみました」のつくれぽコメントお待ちしています。