🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑧【HPとラズパイのAPI連携（結合編）

## はじめに

こんにちは、piyovateです🐣✨

いよいよ今回で『社内環境（温湿度）見える化システム』が完成します！！🎉✨

前回の記事で、ホームページ上で温湿度を表示する仕組みを実装しました。今回は、クラウド環境にあるホームページとRaspberry Pi Pico WHをAPI経由で連携し、温湿度データを10分間隔で自動的に取得・表示する方法を具体的に紹介します。

---

## 🎯 今回の目標

- ホームページ（クラウド環境）とPico WHを連携し、10分間隔でリアルタイムデータを取得
- Pico WHを外部アクセス可能な状態に設定

---

## 🌐 Step1：Raspberry Pi Pico WHの外部アクセス設定

ホームページ側からラズパイにアクセスできるよう、以下の手順でPico WHを設定しました。

### 1. Raspberry Pi Pico WHのMACアドレスを取得

MicroPythonを利用して、Pico WHのMACアドレスを確認します。

```python
import network

wlan = network.WLAN(network.STA_IF)
wlan.active(True)
mac = wlan.config('mac')

print('MACアドレス:', ':'.join(['%02X' % b for b in mac]))
```

表示されたMACアドレスをメモしてください。

### 2. ルーターで固定IPを設定

取得したMACアドレスをルーターの設定で固定IPアドレスに設定します。

### 3. ドメインを設定し外部からアクセス可能に

取得した固定IPに対してドメインを設定し、HTTPで外部からアクセスできるようにします。

---

## ⚙️ Step2：ホームページ側でAPI連携設定

クラウド上のホームページからラズパイのAPIデータにアクセスするために、設定ファイルを修正します。

```js
// raspi-config.js
const ENV_CONFIG = {
    apiUrl: 'http://設定したドメイン名/',

    holidays: [
        // 休日設定
        '2025-01-01', '2025-01-13', /* 他の日付 */
    ]
};
```

---

## 🔄 Step3：ホームページ上での自動データ更新（10分間隔）

JavaScriptのsetIntervalを使って10分ごとに自動的に更新します。

```js
// env-status.js
async function updateComfortStatus() {
    try {
        const res = await fetch(ENV_CONFIG.apiUrl);
        const data = await res.json();

        // データ取得・表示処理
    } catch (err) {
        console.error('データ取得エラー:', err);
    }
}

// 初回実行と10分間隔の更新
updateComfortStatus();
setInterval(updateComfortStatus, 600000); // 600,000ミリ秒 = 10分
```
---

## 🛠️ 問題発生しました：Mixed Contentエラー

本番環境にてホームページをHTTPSで公開していたところ、以下の問題が発生しました。

> ❗ **Mixed Contentエラー：HTTPSページからHTTP APIへアクセスがブロックされる**

これは、HTTPSページ上でJavaScriptから**Raspberry Pi Pico WH が提供するHTTP API**にアクセスした場合、**ブラウザがセキュリティ上ブロックする**ことで発生します。

---

## 🔧 対策：proxy.php による中継（プロキシ）を実装

### Step1：proxy.php を設置

以下の `proxy.php` をサーバーに設置し、HTTPS経由で安全にPico WHのHTTP APIへアクセスする中継処理を追加しました。

```php
<?php
if (!isset($_GET['target'])) {
    http_response_code(400);
    echo json_encode(['error' => 'targetパラメータが必要です']);
    exit;
}

$target = $_GET['target'];
$whitelist = [
    'http://（Raspberry Pi Pico WH のAPI URL）',
];

if (!in_array($target, $whitelist)) {
    http_response_code(403);
    echo json_encode(['error' => '許可されていないURLです']);
    exit;
}

$ch = curl_init($target);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if (curl_errno($ch)) {
    http_response_code(500);
    echo json_encode(['error' => '接続エラー']);
} else {
    http_response_code($httpCode);
    header('Content-Type: application/json');
    echo $response;
}
curl_close($ch);
?>
```

### Step2：JavaScript設定ファイルを修正

`raspi-config.js` にて、API呼び出し先を直接のHTTPではなく、proxyを経由するよう変更しました。

```js
const picoWhApiUrl = 'http://（Raspberry Pi Pico WH のAPI URL）';
const proxyUrl = `/proxy.php?target=${encodeURIComponent(picoWhApiUrl)}`;

const ENV_CONFIG = {
    rasPiPico_apiUrl: proxyUrl,
    national_holidays_apiUrl: `https://api.national-holidays.jp/${new Date().getFullYear()}`,
    holidays: [
        '2021-07-21',
        // 他の臨時休業日もここに記載
    ]
};
```

※ `picoWhApiUrl` には Raspberry Pi Pico WH が提供しているHTTP APIのURLを指定しています。

---

## 📝 教訓

HTTPSとHTTPが混在する場合は、**必ずHTTPSで統一するか、中継用のproxy処理を導入する必要がある**ということを今回学びました。

同様の構成を検討している方は、初期段階からAPIのHTTPS化、または中継構成の検討をおすすめします。

---

## 🚩 完成後の表示確認

ホームページにアクセスし、10分間隔で自動更新されることを確認します。

表示例:

```
現在のオフィス環境：温度😌 / 湿度😊
```

## 🎉 完成！

これでホームページとラズパイPico WHのAPI連携は完了！
長かった今回のプロジェクトはこれにて完成です！🎉✨ 

実際の本番環境での表示画面はこちらです：

![スクリーンショット 2025-05-02 145101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068097/928cbaa1-fcee-4362-9adf-4ab5f4d5c9a4.png)


さらに詳細な内容やソースコードは、専用の[GitHubリポジトリ](https://github.com/SystermDevelopment/rasp-temp-monitor)をご覧ください。

---

## 🔜 次回の予定

次回はこれまでの取り組みを振り返り、内容をまとめていきます。  
会社からのお知らせもあります！

次回もぜひお楽しみに🐣✨

## 🔗 シリーズリンク

* 次回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑨プロジェクト総まとめ](https://qiita.com/Piyovate/items/469f8f0c0412dca99675)
* 前回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑦【HP側コード修正（フロントエンド編）】](https://qiita.com/Piyovate/items/29003a76d1f8474fa270)
* 第１回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる①【アイデア決定編】](https://qiita.com/Piyovate/items/b0e5a4b2c4c1ed7a3bf8)

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