実家に帰ると高齢の母は日にちの感覚が薄く、今日は何日なのかと一日１０回は聞かれる。あるいは日にちを勘違いして朝からデイサービスの準備を始ることもしばしば。ネットを見てみると同様の悩みを抱えた人が多くいるようでもう使わなくなったスマホを活用して日めくりカレンダーができないか作ってみた。
スマホの操作不要で特別なアプリのインストールをしなくても常時今日の日付けを表示、ネットに接続していなくても日付けを更新するようにした。
日付け表示 （手もとにあったアンドロイド端末を用いた場合）
常時日付けを表示するには、スクリーンセーバをOFFにし、画面表示を消灯しない設定にする必要がある。開発者オプションはシステムのビルド番号を数回クリックすることで選択できるようになる。
特定曜日の予定表示
スマホの充電
日めくり.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日付表示</title>
<style>
.container {
text-align: center;
font-family: Arial, sans-serif;
}
.monh {
text-align: left;
font-size: 60px;
font-weight: bold;
}
.date {
font-size: 260px;
font-weight: bold;
}
.day {
text-align: left;
font-size: 80px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div id="monh" class="monh"></div>
<div id="date" class="date"></div>
<div id="day" class="day"></div>
</div>
<script>
function updateDate() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
const weekday = weekdays[now.getDay()];
const hour = now.getHours();
<!-- const minu = now.getMinutes(); -->
const minu = String(now.getMinutes()).padStart(2,"0");
document.getElementById("monh").textContent = `${month}月/ ${hour}:${minu}`;
<!-- document.getElementById("monh").textContent = ` ${minu}分`; -->
document.getElementById("date").textContent = `${day}`;
document.getElementById("day").textContent = weekday;
}
updateDate();
<!-- Interval 720000=12min, 7200000=120min -->
setInterval(updateDate, 180000);
</script>
</body>
</html>
旅人システム 