はじめに

こんにちは、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アドレスを取得しましょう。

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`）

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`）

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

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

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

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

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

📄 PHP（XAMPPで動作確認）

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

今回のテストでは会社のHPの footer.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

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

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

🔜 次回の予定

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

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

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