🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑤【Pico WHでWebサーバーを立ち上げ＆ローカルで取得テスト編】

## はじめに

こんにちは、piyovateです🐣✨

前回の記事では、温湿度センサー『BME280』を半田付けして、ラズパイPico WHで実際にデータを取得する動作確認まで行いました。

今回はいよいよラズパイPico WHで簡単なWebサーバーを立ち上げて、取得したセンサーのデータをAPI形式で提供し、ローカル環境（XAMPPなど）で取得するテストをします！

---

## 📌 今回の目標

- Raspberry Pi Pico WHでのWebサーバーの構築
- センサーの温度・湿度・気圧をJSON形式で提供（API化）
- ローカル環境（XAMPP）からAPI経由でデータを取得・表示

※ 実環境で気圧情報を使うかはまだ未定です

---

## 🔧 Step1：Pico WHでWebサーバーを作る（MicroPython）

### 📄 Pico WHのIPアドレス確認方法

まず、Raspberry Pi Pico WHでWebサーバーを立ち上げる前に、自分の環境で割り当てられたIPアドレスを確認しておく必要があります。

以下のコードをMicroPythonで実行して、IPアドレスを取得しましょう。

```python
import urequests
import network
import time

# Wi-Fi接続情報（ご自身のSSID・パスワードを入力）
ssid = 'あなたのSSID'
password = 'あなたのパスワード'

# WLAN設定
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(ssid, password)

# 接続待機
while not wlan.isconnected():
    print('Wi-Fi接続中...')
    time.sleep(1)

# IPアドレスを表示
ip = wlan.ifconfig()[0]
print('接続完了。Pico WHのIPアドレス:', ip)
```

実行後、シリアルコンソール（ThonnyのShell画面など）に次のように表示されます。

```
接続完了。Pico WHのIPアドレス: 192.168.x.x
```

これがあなたのPico WHのIPアドレスです。  
後ほど、このIPアドレスを使って「Pico WH側のWebサーバーの立ち上げ確認」と「XAMPP側のブラウザからの動作確認」を行います。

次に、MicroPythonを使ってPico WHで簡単なWebサーバーを作ります。  
前回の記事までに準備したセンサー情報をJSON形式で返すようにしました。

### 📄 MicroPythonコード（`sensor_env.py`）

```python
import network
import socket
import json
import time
from machine import Pin, I2C
import bme280
import config  # Wi-Fi設定を別ファイルで管理

# 下記で直接Wi-FiのSSIDとパスワードを設定すればconfig.pyは不要です
# Wi-Fi接続
ssid = config.SSID 
password = config.PASSWORD

wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(ssid, password)

while not wlan.isconnected():
    print('Wi-Fi接続中...')
    time.sleep(1)
print('接続完了:', wlan.ifconfig())

# センサー準備
i2c = I2C(0, sda=Pin(0), scl=Pin(1))
sensor = bme280.BME280(i2c=i2c, address=0x76)

# Webサーバー起動
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)
print('Pico WHサーバー起動中', addr)

while True:
    cl, addr = s.accept()
    request = cl.recv(1024)

    temperature, pressure, humidity = sensor.values
    response_data = json.dumps({
        'temperature': temperature,
        'humidity': humidity,
        'pressure': pressure
    })

    cl.send('HTTP/1.0 200 OK\r\nContent-type: application/json\r\nAccess-Control-Allow-Origin: *\r\n\r\n')
    cl.send(response_data)
    cl.close()
```

### 📄 MicroPythonコード（`config.py`）

```python
SSID = 'あなたのSSID'
PASSWORD = 'あなたのパスワード'
```

ブラウザからPico WHのIPアドレスにアクセスすると、以下のようなJSONデータが確認できます。

```json
{"pressure": "1009.48hPa", "humidity": "25.38%", "temperature": "27.70C"}
```

---

## 🌐 Step2：ローカル環境（XAMPP）からデータ取得テスト

次に、ローカルPCのXAMPP環境で、ラズパイのAPIから実際にデータを取得し、表示するテストを行います。

---

### 📄 PHP（XAMPPで動作確認）

ここではホームページのフッター部分に環境情報を表示させる例を記載しています。

今回のテストでは会社のHPの **`footer.php`** に追加して表示させてみました。

実際の環境では、ご自身のサイトの構成に合わせて、任意のファイル名で保存してください。

```php
<footer>
    <div class="container">
        <div class="footer-flex">
            <a href="./">
                <img src="assets/img/common/logo_footer.svg" alt="ロゴ：株式会社テクノスフィア">             
            </a>
            <div class="txt-box">
                <a href="privacy">PRIVACYPOLICY</a>
                <small>&copy; 2023 Technosphere Inc.</small>

                <div class="env-info">
                    温度: <span id="temp">---</span> /
                    湿度: <span id="humid">---</span> /
                    気圧: <span id="press">---</span>
                </div>
            </div>
            <ul class="footer-sns">
                <li>
                    <a
                        href="https://www.facebook.com/technosphere.co.ltd"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="株式会社テクノスフィア Facebook ページ"
                    >
                        <i class="fa-brands fa-facebook"></i>
                        <span class="visually-hidden">Facebook</span>
                    </a>
                </li>
                <li>
                    <a
                        href="https://x.com/technosphere_co"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="株式会社テクノスフィア X（旧Twitter）ページ"
                    >
                        <i class="fa-brands fa-x-twitter"></i>
                        <span class="visually-hidden">X（旧Twitter）</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</footer>
<script>
const api_url = 'http://192.168.x.x/'; // Pico WHのIPアドレスに書き換え

async function fetchEnvData() {
    try {
        const res = await fetch(api_url);
        const data = await res.json();

        document.getElementById('temp').textContent = data.temperature;
        document.getElementById('humid').textContent = data.humidity;
        document.getElementById('press').textContent = data.pressure;
    } catch (err) {
        console.error('データ取得エラー:', err);
    }
}

// 10秒間隔で更新
fetchEnvData();
setInterval(fetchEnvData, 10000);
</script>
```

ブラウザから以下のURLで動作確認を行います。

```
http://localhost
```

---

## 🎉 結果（成功しました！）

ブラウザで`http://localhost`にアクセスすると…

```
温度: 27.70C / 湿度: 25.38% / 気圧: 1009.48hPa
```

リアルタイムに表示されることが確認できました✨  
これでローカル環境での取得テストは大成功です🎉

実際の表示画面は以下の通りです。

![スクリーンショット 2025-04-25 172108.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068097/24e04a99-0b91-4c33-9578-20386d31dbd1.png)

---  

## 🔜 次回の予定

次回は、今回ローカル環境で取得テストまで成功した温度・湿度・気圧のデータを、**実際のホームページに掲載するための表示方法やデザインを決定します！**

弊社ホームページでリアルタイムに環境データが確認できるように、具体的な表示デザインや掲載場所を検討していきます✨

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

## 🔗 シリーズリンク

* 次回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる⑥【HPへの表示デザイン決定編】](https://qiita.com/Piyovate/items/e624a3ca070bfede0a59)
* 前回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる④【センサー半田付け〜動作テスト編】](https://qiita.com/Piyovate/items/e2259269aa90885e0274)
* 第１回：[🌿 ラズパイを活用した『社内環境（温湿度）見える化システム』をつくる①【アイデア決定編】](https://qiita.com/Piyovate/items/b0e5a4b2c4c1ed7a3bf8)

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