# 作業用フォルダを作成
mkdir iot_project

# 作業用フォルダに移動
cd iot_project

# 仮想環境を作成（venvは標準機能です）
python3 -m venv venv 

# 仮想環境を有効化 (このコマンドを実行すると、ターミナルの行頭に (venv) と表示されます)
source venv/bin/activate

# OpenCV (カメラ画像処理) と NumPy (数値計算) をインストール
pip install opencv-python numpy

# Selenium (Webページ操作) をインストール
pip install selenium

(venv) saigamo@Mac-mini iot_project %

import cv2

# カメラの指定 (0は内蔵カメラ、1や2は外部カメラの場合があります)
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("カメラを開けませんでした。番号を1などに変えて試してください。")
    exit()

print("カメラ映像表示中... (qキーで終了)")

while True:
    # 1フレームずつキャプチャ
    ret, frame = cap.read()

    # 映像が取得できない場合は終了
    if not ret:
        print("映像を取得できませんでした。")
        break

    # 映像をウィンドウに表示
    cv2.imshow('Camera Feed', frame)

    # 'q' キーが押されたらループを抜ける
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

# キャプチャを終了し、ウィンドウを閉じる
cap.release()
cv2.destroyAllWindows()

python camera_test.py

import cv2

# -----------------------------------------------------------
# 【重要】顔検出のための学習済みデータ（Haar Cascade）をロード
# -----------------------------------------------------------
# このパスは、OpenCVをpipインストールした場所に依存します。
# もしエラーが出る場合は、このパスを修正する必要があります。
# Macでの一般的なOpenCVのインストールパスを使用しています。
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')

# カメラの指定
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("カメラを開けませんでした。")
    exit()

print("顔検出開始中... (qキーで終了)")

# 顔検出のフラグを初期化
face_detected = False

while True:
    ret, frame = cap.read()
    if not ret:
        break

    # 1. 映像をグレースケールに変換（検出を高速化するため）
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    # 2. 顔を検出
    # scaleFactor: スケールをどれだけ小さくするか (1.1が標準的)
    # minNeighbors: 検出候補の数 (3〜5が標準的)
    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))

    # 3. 検出結果の処理
    if len(faces) > 0:
        face_detected = True
        print("【検出】顔を認識しました！")
    else:
        face_detected = False
        # print("【未検出】顔が見つかりません。") # ログが大量に出るためコメントアウト

    # 4. 検出した顔の周りに枠を描画（オプション）
    for (x, y, w, h) in faces:
        # 枠線 (frame, 左上座標, 右下座標, 色(BGR), 線の太さ)
        cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
        # テキスト表示
        cv2.putText(frame, 'Face Detected', (x, y-10), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)

    # 画面に表示
    cv2.imshow('Face Detection', frame)

    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()

# 検出結果の最終確認（次のステップへの準備）
if face_detected:
    print("\n--- 最終結果 ---")
    print("顔が検出されました。次のステップでWeb操作のトリガーに使います。")
else:
    print("\n--- 最終結果 ---")
    print("顔は検出されませんでした。")

import cv2
import time
from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
from selenium.common.exceptions import WebDriverException
import os
import threading
import http.server # ★標準モジュールなのでそのままimport
import socketserver # ★標準モジュールなのでそのままimport
# --- 設定値 ---
COLOR_DETECTED = "red"      # 顔検出時の色
COLOR_NOT_DETECTED = "green" # 顔非検出時の色

PORT = 8000
TARGET_URL = f'http://127.0.0.1:{PORT}/test_page.html' # ★修正：ローカルサーバーのアドレス

# -----------------------------------------------------------
# 【ローカルサーバーの起動関数】
# -----------------------------------------------------------
def start_server():
    # サーバーはカレントディレクトリ（iot_project）をルートとしてファイルを公開します
    Handler = http.server.SimpleHTTPRequestHandler
    
    # 既存のポートを使用中でエラーにならないよう、TCPServerを使う
    try:
        with socketserver.TCPServer(("", PORT), Handler) as httpd:
            print(f"ローカルサーバー起動中: {TARGET_URL}")
            # このスレッドが終了しないように、サーバーを永続的に実行
            httpd.serve_forever()
    except Exception as e:
        print(f"ローカルサーバー起動エラー: {e}")

# -----------------------------------------------------------
# 【顔検出の準備】 
# -----------------------------------------------------------
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("カメラを開けませんでした。")
    # capが定義されていないため、ここでexit()する前にドライバーがあれば解放する処理が必要だが、
    # 今回はmain関数の外なので、このまま進める。

# -----------------------------------------------------------
# 【Seleniumの準備】
# -----------------------------------------------------------
try:
    # ★修正ポイント：サーバーを別スレッドで起動★
    server_thread = threading.Thread(target=start_server, daemon=True)
    server_thread.start()
    time.sleep(1.5) # サーバーが立ち上がるのを少し長めに待つ
    
    # WebDriver Managerで起動 (省略)
    service = ChromeService(ChromeDriverManager().install())
    
    # ブラウザオプション (省略)
    chrome_options = Options()
    chrome_options.add_experimental_option("detach", True)
    
    # ブラウザを起動し、テストページを開く
    driver = webdriver.Chrome(service=service, options=chrome_options)
    driver.get(TARGET_URL) # ★修正されたTARGET_URLにアクセス
    print(f"Webページを開きました: {TARGET_URL}")

except WebDriverException as e:
    print("--- WebDriver起動エラー ---")
    print(f"エラーが発生しました。Chromeブラウザが閉じられているか、インストールされていない可能性があります。")
    # print(e) # 詳細なエラー表示を省略
    # エラー時はカメラを解放して終了
    cap.release()
    exit()

# -----------------------------------------------------------
# 【メインループ：検出とWeb操作】
# -----------------------------------------------------------
print("IoT連携開始... (qキーで終了)")

# ★最終修正ポイント：カメラとブラウザが起動した後に3秒待機★
print("システム安定化のため3秒待機します...")
time.sleep(3) 

current_color = None # 現在のWebページの色を追跡

try:
    while True:
        # ★カメラフレーム取得時にtry-except★
        try:
            ret, frame = cap.read()
            if not ret:
                print("カメラからフレームが取得できませんでした。")
                break
        except Exception as e:
            # カメラが予期せず切断された場合など
            print(f"カメラフレーム取得エラー: {e}")
            time.sleep(1)
            continue # このフレームはスキップして次へ

        # 顔検出の処理
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
        
        # ★追加ポイント：顔検出の処理全体にもtry-exceptを追加★
        try:
            faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
        except Exception as e:
            print(f"顔検出処理エラー: {e}")
            faces = [] # エラー時は顔なしとして扱う
        
        # 検出ステータス
        is_detected = len(faces) > 0
        
        # Webページの背景色を操作
        new_color = COLOR_DETECTED if is_detected else COLOR_NOT_DETECTED
        
        # 色が変わる時だけWeb操作を実行
        if new_color != current_color:
            try:
                # JavaScriptを実行して色を直接変更
                js_code = f"document.getElementById('target-area').style.backgroundColor = '{new_color}';"
                driver.execute_script(js_code)
                current_color = new_color
                print(f"ステータス変更: 顔検出={is_detected} -> 色を {new_color} に変更しました。")

            except WebDriverException:
                # ブラウザが手動で閉じられた場合を想定
                print("Web操作中にエラー: ブラウザが閉じられたため、プログラムを終了します。")
                # driver.quit()を呼ばずに終了するために、ここでは単にbreakのみ
                break
        
        # 検出した顔の周りに枠を描画
        for (x, y, w, h) in faces:
            # 枠線を描画する処理（省略、元のコード参照）
            cv2.rectangle(frame, (x, y), (x+w, y+h), (0, 255, 0) if is_detected else (0, 0, 255), 2)

        cv2.imshow('IoT Controller: Camera Feed (q to quit)', frame)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break

finally:
    # 終了処理
    print("\nプログラムを終了します。リソースを解放中...")
    cap.release()
    cv2.destroyAllWindows()
    
    # driverが起動しているか確認し、ブラウザを閉じないようにする
    # SeleniumのOptionsでdetach=Trueを設定済みのため、ここではdriver.quit()を無効化します
    # ただし、例外処理内でbreakした場合に備え、手動で閉じない限り起動したままにします。
    
    # driver.quit() # ★この行は、ブラウザを強制終了させるため、今回はコメントアウト（または削除）します

    print("完了。")

(venv) saigamo@Mac-mini iot_project % pip install browser-cookie3

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>IoTテストページ</title>
    <style>
        /* ターゲットとなる要素のCSS */
        #target-area {
            width: 400px;
            height: 200px;
            background-color: lightgray; /* 初期の色 */
            border: 5px solid gray;
            margin: 50px;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            line-height: 150px;
            transition: background-color 0.5s; /* 色が滑らかに変わるように */
        }
    </style>
</head>
<body>
    <h1>PC前在席検知 IoTデモ</h1>
    
    <div id="target-area">
        <p>顔が検出されると、この背景色が変わります。</p>
    </div>
    
</body>
</html>

python web_controller.py

空ファイル

<?php
// ★★★ サーバーの書き込み可否を判定するための最終テストコード ★★★
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 1. POSTデータからstatusの値を取得
$status = filter_input(INPUT_POST, 'status', FILTER_VALIDATE_INT);
$status_file = 'status.txt';

// 2. 認証は行わず、ファイル書き込みのみを試みる
if ($status === 0 || $status === 1) {
    $data_to_write = (string)$status; 
    
    // 3. 最もシンプルな file_put_contents で書き込みを試行
    if (@file_put_contents($status_file, $data_to_write) !== false) {
        http_response_code(200);
        echo json_encode(['success' => true, 'message' => 'Write successful (Token skipped).']);
        exit;
    } else {
        // file_put_contents が失敗した場合
        http_response_code(500);
        echo json_encode(['success' => false, 'message' => 'Write failed: Server permission denied.']);
        exit;
    }

} else {
    // パラメータエラー
    http_response_code(400);
    echo json_encode(['success' => false, 'message' => 'Invalid status parameter.']);
    exit;
}
?>

(venv) saigamo@Mac-mini iot_project % pip install requests

import cv2
import time
import requests # ★追加
# from selenium import ... (Selenium関連のインポートは削除またはコメントアウト)
# from webdriver_manager.chrome import ...

# --- 設定値 ---
# LolipopサーバーのベースURL (例: 'https://yourdomain.lolipop.jp/')
PHP_SCRIPT_URL = 'https://astrowave.jp/update_status.php'
# ★Lolipopに合わせたURLに修正してください★

# -----------------------------------------------------------
# 【顔検出の準備】 ★このブロックを挿入します★
# -----------------------------------------------------------
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("カメラを開けませんでした。")
    exit() # カメラがなければ終了

# -----------------------------------------------------------
# 【メインループ：検出とHTTP通信】
# -----------------------------------------------------------
print("IoT送信開始... (qキーで終了)")
last_status = None # 最後の送信ステータスを追跡

try:
    while True:
        # 1. カメラフレームの取得
        try:
            ret, frame = cap.read()
            if not ret:
                print("カメラからフレームが取得できませんでした。")
                break
        except Exception as e:
            # カメラが予期せず切断された場合など
            print(f"カメラフレーム取得エラー: {e}")
            time.sleep(1)
            continue # このフレームはスキップして次へ

        # 2. 顔検出の処理
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
        
        try:
            faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
        except Exception as e:
            print(f"顔検出処理エラー: {e}")
            faces = [] # エラー時は顔なしとして扱う
        
        # 検出ステータス (1:在席, 0:離席)
        is_detected = len(faces) > 0
        current_status = 1 if is_detected else 0 # サーバーに送るデータ

        # ステータスが変わった時だけサーバーに送信
        if current_status != last_status:
            try:
                # HTTP POSTリクエストでステータスを送信
                response = requests.post(PHP_SCRIPT_URL, data={'status': current_status})
                response.raise_for_status() # 200 OK以外なら例外を発生させる
                
                last_status = current_status
                
                print(f"【HTTP送信成功】ステータス={current_status} -> サーバーに通知しました。")

            except requests.exceptions.RequestException as e:
                print(f"【HTTP送信エラー】通信失敗またはサーバーエラー: {e}")
                time.sleep(5) # エラー時は少し待機

        # ... (枠線の描画、cv2.imshow、qキーでの終了処理 - 変更なし)
        time.sleep(1) # ★追加: サーバー負荷軽減のため、1秒間隔でチェック

        # 検出した顔の周りに枠を描画（ローカル動作確認用）
        for (x, y, w, h) in faces:
            cv2.rectangle(frame, (x, y), (x+w, y+h), (0, 255, 0) if is_detected else (0, 0, 255), 2)

        cv2.imshow('IoT Sender: Camera Feed (q to quit)', frame)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break

        time.sleep(1) # サーバー負荷軽減のため、1秒間隔でチェック
finally:
    # -----------------------------------------------------------
    # 【終了処理】 ★このブロックでfinallyの中身を置き換えます★
    # -----------------------------------------------------------
    print("\nプログラムを終了します。リソースを解放中...")
    if 'cap' in locals() or 'cap' in globals():
        cap.release()
    cv2.destroyAllWindows()
    print("完了。")

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lolipop IoT デモ</title>
    <style>
        #target-area {
            width: 400px;
            height: 200px;
            background-color: lightgray; 
            border: 5px solid gray;
            margin: 50px;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            line-height: 150px;
            transition: background-color 0.5s; /* 色が滑らかに変わるように */
        }
    </style>
</head>
<body>
    <h1>Lolipop IoT 在席ステータス</h1>
    <div id="target-area">
        <p>現在のステータス: サーバーから取得中...</p>
    </div>
    <p id="last-update"></p>

    <script>
        const targetArea = document.getElementById('target-area');
        const updateTime = document.getElementById('last-update');
        const statusFileUrl = 'status.txt'; // サーバーにあるデータファイル

        function updateStatus() {
            // status.txtを非同期で読み込む
            fetch(statusFileUrl)
                .then(response => response.text()) // テキストとして取得
                .then(status => {
                    // データが '1' なら在席 (赤)、'0' なら離席 (緑)
                    if (status.trim() === '1') {
                        targetArea.style.backgroundColor = 'red';
                        targetArea.querySelector('p').textContent = "在席中です (RED)";
                    } else if (status.trim() === '0') {
                        targetArea.style.backgroundColor = 'green';
                        targetArea.querySelector('p').textContent = "離席中です (GREEN)";
                    } else {
                        targetArea.style.backgroundColor = 'gray';
                        targetArea.querySelector('p').textContent = "ステータス不明";
                    }
                    
                    updateTime.textContent = '最終更新: ' + new Date().toLocaleTimeString();
                })
                .catch(error => {
                    console.error('ステータス取得エラー:', error);
                    targetArea.style.backgroundColor = 'yellow';
                    targetArea.querySelector('p').textContent = "通信エラー！";
                });
        }

        // 2秒ごとにステータスを更新
        setInterval(updateStatus, 2000); 

        // ページ読み込み時に一度実行
        updateStatus();
    </script>
</body>
</html>

python iot_sender.py

# --- 設定値 --- の下に追加
SECURITY_TOKEN = 'MySecureIOT2025SecretKey' # ★あなたが決めた秘密の鍵

# ... (中略)

        if current_status != last_status:
            try:
                # HTTP POSTリクエストでステータスとトークンを送信
                payload = {
                    'status': current_status,
                    'token': SECURITY_TOKEN  # ★トークンを追加
                }
                response = requests.post(PHP_SCRIPT_URL, data=payload)
                # ... (後略)

<?php
// 秘密のトークンを設定
define('EXPECTED_TOKEN', 'MySecureIOT2025SecretKey'); // ★Pythonと一致させる

// 1. POSTデータからstatusとtokenの値を取得
$status = filter_input(INPUT_POST, 'status', FILTER_VALIDATE_INT);
$received_token = filter_input(INPUT_POST, 'token', FILTER_SANITIZE_STRING); // トークンを取得
$status_file = 'status.txt';

// ★セキュリティチェック（トークンが一致するか）
if ($received_token !== EXPECTED_TOKEN) {
    header('Content-Type: application/json');
    http_response_code(403); // 403 Forbidden（禁止）を返す
    echo json_encode(['success' => false, 'message' => 'Security token is invalid. Access denied.']);
    exit;
}
// ★トークンが正しければ、以下のファイル書き込み処理に進む
// ... (既存のファイル書き込みロジックが続く)
?>

import cv2
import time
import requests

# --- 設定値 ---
AIO_USERNAME = '●●●●●●'
AIO_KEY = '●●●●●●●●●●●●●●●●●●●' 
# ★★★ 修正！：フィードのKeyをハイフン付きに修正 ★★★
AIO_FEED_KEY = '●●●●●●●●●●●' 

# AIOのデータ送信URLを構築
# AIOの公式エンドポイントに /data を付与します
AIO_API_URL = f'https://io.adafruit.com/api/v2/{AIO_USERNAME}/feeds/{AIO_FEED_KEY}/data'

# -----------------------------------------------------------
# 【顔検出の準備】 ★このブロックを挿入します★
# -----------------------------------------------------------
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("カメラを開けませんでした。")
    exit() # カメラがなければ終了

# -----------------------------------------------------------
# 【メインループ：検出とHTTP通信】
# -----------------------------------------------------------
print("IoT送信開始... (qキーで終了)")
last_status = None # 最後の送信ステータスを追跡

try:
    while True:
        # 1. カメラフレームの取得
        try:
            ret, frame = cap.read()
            if not ret:
                print("カメラからフレームが取得できませんでした。")
                break
        except Exception as e:
            # カメラが予期せず切断された場合など
            print(f"カメラフレーム取得エラー: {e}")
            time.sleep(1)
            continue # このフレームはスキップして次へ

        # 2. 顔検出の処理
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
        
        try:
            faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5, minSize=(30, 30))
        except Exception as e:
            print(f"顔検出処理エラー: {e}")
            faces = [] # エラー時は顔なしとして扱う
        
        # 検出ステータス (1:在席, 0:離席)
        is_detected = len(faces) > 0
        current_status = 1 if is_detected else 0 # サーバーに送るデータ

        # ステータスが変わった時だけサーバーに送信
        if current_status != last_status:
            try:
                # 1. 送信データを準備 (AIOはJSONで 'value' を要求)
                payload_json = {
                    "value": "is-present" if current_status == 1 else "is-away"
                }
                
                headers = {
                    "X-AIO-Key": AIO_KEY,
                    "Content-Type": "application/json"
                }
                
                # 3. HTTP POSTリクエストでデータを送信
                response = requests.post(
                    AIO_API_URL, 
                    headers=headers, # ★認証情報をヘッダーで送信
                    json=payload_json 
                )
                # 4. サーバー応答が成功(200 OK)か確認
                response.raise_for_status() 
                
                last_status = current_status
                
                print(f"【AIO送信成功】データ={payload_json['value']} をフィードに記録しました。")

            except requests.exceptions.HTTPError as e:
                print(f"【AIOエラー】ステータスコード: {response.status_code}")
                print(f"【サーバー応答】: {response.text}")
                time.sleep(5) 
            except Exception as e:
                print(f"【予期せぬエラー】: {e}")
                time.sleep(5)

        # 検出した顔の周りに枠を描画（ローカル動作確認用）
        for (x, y, w, h) in faces:
            cv2.rectangle(frame, (x, y), (x+w, y+h), (0, 255, 0) if is_detected else (0, 0, 255), 2)

        cv2.imshow('IoT Sender: Camera Feed (q to quit)', frame)

        # qキーが押されたかチェック (待ち時間を長くする)
        if cv2.waitKey(100) & 0xFF == ord('q'): # ★100ミリ秒に変更
            break

        # ループの末尾で一度だけ待機します
        time.sleep(2)

finally:
    # -----------------------------------------------------------
    # 【終了処理】 ★最終修正：終了時に離席信号を送信します★
    # -----------------------------------------------------------
    print("\nプログラムを終了します。リソースを解放中...")
    
    # 離席信号を強制送信
    try:
        print("最終ステータス (is-away) を送信中...")
        payload_json = {"value": "is-away"}
        headers = {"X-AIO-Key": AIO_KEY, "Content-Type": "application/json"}
        
        # POSTリクエストを送信
        requests.post(
            AIO_API_URL, 
            headers=headers, 
            json=payload_json,
            timeout=5 # 5秒以内に応答がなければ諦める
        )
        print("最終ステータス送信完了。")
        
    except Exception as e:
        print(f"最終ステータス送信エラー: {e}")

    if 'cap' in locals() or 'cap' in globals():
        cap.release()
    cv2.destroyAllWindows()
    print("完了。")

<?php
// ★★★ Adafruit IO 認証ブリッジ (get_status.php) ★★★

// 1. 設定値（このPHPファイル内に秘密の鍵を隠します）
// Webページには公開されないため安全です。
$aio_username = "●●●●●●";
$aio_key = "●●●●●●●●●●●●●●●●●●●"; // ★ご自身のAIO KEYに修正してください
$feed_key = "●●●●●●●●●●●";

// 2. AIOからのデータ取得URLを構築
$api_url = "https://io.adafruit.com/api/v2/{$aio_username}/feeds/{$feed_key}/data/last";

// 3. HTTPリクエストの実行
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $api_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
// ★認証：ヘッダーにX-AIO-Keyを設定して送信★
curl_setopt($curl, CURLOPT_HTTPHEADER, array("X-AIO-Key: " . $aio_key));
$response = curl_exec($curl);
$http_code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
curl_close($curl);

// 4. エラーチェックと応答の整形
if ($http_code === 200) {
    // 応答が成功した場合、JSONをデコード
    $data = json_decode($response, true);
    
    // Webページへ渡す最終データを準備
    // AIOは 'value' と 'created_at' を返します
    $status_value = $data['value'] ?? 'is-away'; // データがなければ is-away をデフォルトとする
    
    header('Content-Type: application/json');
    // Webページ側はJSONとしてこのステータスを受け取ります
    echo json_encode(['status' => $status_value]);
} else {
    // AIOからのエラー応答をそのままJSONで返す
    header('Content-Type: application/json');
    http_response_code($http_code);
    echo $response;
}
?>

/* --- IoT 在席ステータス表示用 CSS --- */

/* 1. ターゲット要素の準備 */
/* #chart01 はあなたのトップページにある要素のIDです */
#chart01 {
  position: relative; 
}

/* 2. 在席時 (is-present) のスタイル */
#chart01.is-present {
}

/* 3. 離席時 (is-away) のスタイル */
#chart01.is-away {
}

/* 4. メッセージ表示 (::after 擬似要素を使用) */
#chart01::after {
  content: "読み込み中..."; 
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0%, 0%);
  padding: 4px 14px;
  font-size: 13px;
  font-weight: normal;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0; /* 通常は非表示 */
  transition: opacity 0.4s;
}

/* 5. 在席中になったらメッセージを表示 */
#chart01.is-present::after {
  content: "🟢 在席中です"; 
  background:rgb(233, 38, 16); 
  opacity: 1; 
}

/* 6. 離席中になったらメッセージを表示 */
#chart01.is-away::after {
  content: "🔴 離席中です"; 
  background: rgba(0, 0, 0, 0.7);
  opacity: 1; 
}

<div id="chart01" class="column topset_01">
    <img class="set01" src="./img/top/info_photo.webp" alt="NWYH Stock Images" width="285" height="358" loading="lazy">
    <h2 class="catchcopy">一緒に宇宙旅行しようじゃないか♪</h2>
    <p id="info_text">早く宇宙船を手に入れてどこまでも続く宇宙を旅したい。<br>その熱い気持ちを胸に秘め、楽しそうな事を空想したりして、業界の発展や自身の人生を少しでも盛り上げたいと、こっそりホームページを立ち上げました。</p>
    <img class="wavebg" src="./img/top/wave-img.webp" alt="" width="336" height="153" loading="lazy">
    <a href="https://neo.astrowave.jp/category/stocks/" class="kabu">
    <picture>
          <source media="(max-width: 480px)" srcset="https://neo.astrowave.jp/wp-content/uploads/2023/09/kabu_bana_side.jpg">
          <img class="kabu_bnner" src="./img/top/kabu_bana.webp" alt="株投資・資金調達" width="506" height="100%" loading="lazy">
        </picture>
    </a>
</div>

<script>
    // パスに合わせて
    const STATUS_API_URL = '●●●サイトドメイン●●●/get_status.php'; // ステップ1で作成したPHPファイル

    const targetElement = document.getElementById('chart01'); 
    const updateInterval = 2000; // 2秒ごとに更新 (AIOの制限遵守)

    function updateStatus() {
        // キャッシュ対策として、常に最新のPHPファイルを呼び出す
        const fetchUrl = STATUS_API_URL + '?' + new Date().getTime(); 

        fetch(fetchUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                const newClass = data.status; // PHPから受け取った 'is-present' または 'is-away'
                
                // クラス切り替えのロジック
                if (newClass) {
                    // 既存のステータスクラスを全て削除
                    targetElement.classList.remove('is-present', 'is-away'); 
                    
                    // 新しいクラスを追加
                    targetElement.classList.add(newClass);
                }
            })
            .catch(error => {
                console.error('IoT Status Error:', error);
                // エラー時は背景を黄色にするなど、視覚的なフィードバックを与えます
                targetElement.classList.remove('is-present', 'is-away');
                targetElement.classList.add('is-error'); 
            });
    }

    // 2秒ごとにステータス更新関数を実行
    setInterval(updateStatus, updateInterval); 

    // ページ読み込み時に一度実行
    updateStatus();
</script>

(venv) saigamo@Mac-mini iot_project % python iot_sender.py

#!/bin/bash

# 1. スクリプトのディレクトリに移動
# スクリプトがどこから実行されても、venvフォルダを見つけられるようにします
cd "$(dirname "$0")"

# 2. 仮想環境を有効化
if [ -d "venv" ]; then
    source venv/bin/activate
else
    echo "エラー: 仮想環境 'venv' が見つかりません。"
    exit 1
fi

# 3. Pythonスクリプトを実行 (警告表示を抑止し、メインスクリプトを実行)
python -W ignore iot_sender.py

# 4. 実行後、仮想環境を終了
deactivate

# 5. カメラウィンドウが閉じられた後、ターミナルウィンドウがすぐに閉じないよう待機
echo "IoTシステムの実行が完了しました。ウィンドウを閉じるには Enter キーを押してください。"
read -r

(venv) saigamo@Mac-mini iot_project % chmod +x start_iot.sh

/Users/saigamo/Documents/iot_project/start_iot.sh