🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑦【HP側コード修正（フロントエンド編）】

## はじめに

こんにちは、piyovateです🐣✨

前回の記事では、ホームページ上に表示する温湿度のデザインや表示場所を決定しました。

今回は、決定したデザインを実際にホームページに組み込み、営業時間内にリアルタイムの情報を表示、営業時間外や休業日はそれぞれ異なる表示を行う仕組みをPHPとJavaScriptを利用して実装しましたので、その方法を詳しくご紹介します。

---

## 🎯 今回の目標

- 営業時間内（平日9時〜18時）はリアルタイムで温湿度情報を表示
- 営業時間外は「営業時間外」、土日、祝日や設定した休業日は「休業日」と表示
- 祝日・臨時休業日の管理を外部の設定ファイルで簡単に変更可能にする

---

## 🛠️ Step1：設定ファイル（raspi-config.js）を作成

外部のJavaScriptファイルで祝日や休業日、APIのURLを管理します。

```js
// raspi-config.js
const ENV_CONFIG = {
    apiUrl: 'http://192.168.x.x/',
    holidays: [
        '2025-01-01', '2025-01-13', '2025-02-11', '2025-02-23', '2025-02-24',
        '2025-03-20', '2025-04-29', '2025-05-03', '2025-05-04', '2025-05-05', '2025-05-06',
        '2025-07-21', '2025-08-11', '2025-09-15', '2025-09-23', '2025-10-13',
        '2025-11-03', '2025-11-23', '2025-11-24',
        // 臨時休業日はここに追加
    ]
};
```

外部ファイル化することで管理がしやすくなります。

---

## ⚙️ Step2：メインJavaScript（env-status.js）を作成

作成した設定ファイルを読み込み、営業時間や休業日の判定、データの取得を行うJavaScriptを作成します。

```js
// env-status.js
function getTempEmoji(temp) {
    temp = parseFloat(temp);
    if (temp >= 28) return '🥵';
    else if (temp >= 25) return '😅';
    else if (temp >= 20) return '😌';
    else if (temp >= 17) return '🙂';
    else return '🥶';
}

function getHumidEmoji(humid) {
    humid = parseFloat(humid);
    if (humid >= 80) return '💦';
    else if (humid >= 65) return '💧';
    else if (humid >= 40) return '😊';
    else if (humid >= 30) return '🍂';
    else return '🌵';
}

function checkBusinessStatus() {
    const now = new Date();
    const today = now.toISOString().slice(0, 10);
    const dayOfWeek = now.getDay();
    const hour = now.getHours();

    // config.jsに記載の休日、土日の場合は休業日
    if (ENV_CONFIG.holidays.includes(today) || dayOfWeek === 0 || dayOfWeek === 6) {
        return 'holiday';
    }
    // 営業時間外(9時～18時以外)
    if (hour < 9 || hour >= 18) {
        return 'closed';
    }
    // 営業中(平日、9時～18時)
    return 'open';
}

async function updateComfortStatus() {
    const statusIcon = document.getElementById('status-icon');
    const menuStatusIcon = document.getElementById('menu-status-icon');
    const businessStatus = checkBusinessStatus();

    if (businessStatus === 'holiday') {
        const holidayText = '休業日';
        if (statusIcon) statusIcon.textContent = holidayText;
        if (menuStatusIcon) menuStatusIcon.textContent = holidayText;
        return;
    }

    if (businessStatus === 'closed') {
        const closedText = '営業時間外';
        if (statusIcon) statusIcon.textContent = closedText;
        if (menuStatusIcon) menuStatusIcon.textContent = closedText;
        return;
    }

    try {
        const res = await fetch(ENV_CONFIG.apiUrl);
        const data = await res.json();

        const temp = data.temperature.replace('C', '');
        const humid = data.humidity.replace('%', '');

        const tempIcon = getTempEmoji(temp);
        const humidIcon = getHumidEmoji(humid);

        const displayText = `温度${tempIcon} / 湿度${humidIcon}`;

        if (statusIcon) statusIcon.textContent = displayText;
        if (menuStatusIcon) menuStatusIcon.textContent = displayText;

    } catch (err) {
        const errorText = '⚠️データ取得エラー';
        if (statusIcon) statusIcon.textContent = errorText;
        if (menuStatusIcon) menuStatusIcon.textContent = errorText;
    }
}

updateComfortStatus();
setInterval(updateComfortStatus, 600000);
```

---

## 📌 Step3：index.phpに外部ファイルを読み込み

index.phpのbody閉じタグ直前に追加します。

```html
<script src="assets/js/raspi-config.js"></script>
<script src="assets/js/env-status.js"></script>
```

外部ファイル化することで管理がしやすくなります。

---

## 🚩 完成後の表示

- 平日（営業時間）：リアルタイム表示
![スクリーンショット 2025-05-01 104834.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068097/6c49038a-a6bd-4644-8fcf-a59b0b9d067f.png)
- 土日・営業時間外：「営業時間外」
![スクリーンショット 2025-05-01 105037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068097/a469e268-00c4-45a8-aac4-5530f566b3fb.png)
- 祝日・臨時休業日：「休業日」
![スクリーンショット 2025-05-01 104946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068097/f636e7af-55a3-4517-bd5f-85ddca4f1627.png)
---

## 🔜 次回の予定

次回は、『HPとラズパイのAPI連携（結合編）』をお届けします。

ホームページとRaspberry Pi Pico WHをAPIで連携し、  
温湿度データを5分〜10分間隔で自動的にリアルタイム更新する仕組みを実装します。

次回もお楽しみに🐣✨

## 🔗 シリーズリンク

* 次回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑧【HPとラズパイのAPI連携（結合編）](https://qiita.com/Piyovate/items/124ceb1faaff5fef1210)
* 前回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑥【HPへの表示デザイン決定編】](https://qiita.com/Piyovate/items/e624a3ca070bfede0a59)
* 第１回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる①【アイデア決定編】](https://qiita.com/Piyovate/items/b0e5a4b2c4c1ed7a3bf8)

📚 シリーズ全記事はこちら：[Qiitaストックページ](https://qiita.com/Piyovate/stocks/657201b660bed4ebf50c)