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

Last updated at 2025-05-27Posted at 2025-05-19

はじめに

こんにちは、piyovateです🐣✨

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

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

🎯 今回の目標

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

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

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

// 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を作成します。

// 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閉じタグ直前に追加します。

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

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

🚩 完成後の表示

平日（営業時間）：リアルタイム表示
土日・営業時間外：「営業時間外」
祝日・臨時休業日：「休業日」

🔜 次回の予定

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

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

次回もお楽しみに🐣✨

🔗 シリーズリンク

📚 シリーズ全記事はこちら：Qiitaストックページ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up