LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Piyovatein株式会社テクノスフィア

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

Last updated at Posted at 2025-05-09

はじめに

こんにちは、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

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

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

スクリーンショット 2025-04-25 172108.png

🔜 次回の予定

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

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?