第11章　Pico WのWebサーバー

🔒 研修参加者向け

この章は研修参加者向けです

この章では、Pico WをWebサーバーとして動かし、PCのブラウザーから外付けLEDを操作する仕組みを扱います。

研修参加者の方は、講師から案内されたパスワードを入力してください。

この教材を利用した研修については、お問い合わせください。

この章の目的

第10章では、Pico WをWi-Fiへ接続し、ネットワーク上の住所となるIPアドレスを確認しました。

この章では、Pico Wを簡易的なWebサーバーとして動かします。 PCのブラウザーへ操作画面を表示し、画面上のボタンからGP15の外付けLEDを点灯・消灯します。

配線は第5章の外付けLED回路をそのまま使用します。プログラムを入れ替えることで、同じ出力部品をネットワーク経由で操作します。

この章でできるようになること

WebブラウザーとWebサーバーの役割を説明できる
HTTPのリクエストとレスポンスの流れを説明できる
Pico Wで簡易Webサーバーを起動できる
Shellへ表示された完全なURLをPCのブラウザーで開ける
ブラウザーのボタンからGP15のLEDを点灯・消灯できる
ローカルのWebサーバーとクラウドサービスの違いを説明できる

使用するもの

分類	部品・環境	数量・条件
マイコン	Raspberry Pi Pico WまたはPico WH	1
出力回路	第5章で作成したGP15の外付けLED回路	1式
PC接続	データ通信対応Micro USBケーブル	1
ネットワーク	事前確認済みの2.4GHz Wi-Fi	1
操作端末	Webブラウザーを使用できるPC	1

開始時は、次の状態を確認します。

第5章　LEDで学ぶデジタル出力の GP15外付けLED回路が完成している
PCとPico Wを同じ研修用Wi-Fiへ接続できる
Wi-Fiが端末間通信を禁止する設定になっていない
第10章のプログラムでPico WのIPアドレスを取得できる

安全・セキュリティ上の注意

配線を確認するときは、Pico WからUSBケーブルを外します
GP15とLEDの間には、必ず330Ω抵抗を直列に接続します
SSIDとパスワードを画面共有、提出物、写真へ残しません
この章のWebサーバーには、利用者認証や通信の暗号化がありません
研修用の同一ネットワーク内だけで使用し、インターネットへ公開しません
ルーターのポート転送や外部公開の設定は行いません

このプログラムは、HTTP通信の流れを理解するための研修用サンプルです。業務システムとして公開するWebサーバーではありません。

11-1　WebブラウザーとWebサーバー

Webページを表示するときは、情報を要求する側と、要求に応じる側に役割が分かれます。

役割	この章の機器	主な動作
クライアント	PCのWebブラウザー	ページやLED操作を要求する
Webサーバー	Pico W	要求を受け取り、画面を返す、またはLEDを操作する

ブラウザーから送られる要求をHTTPリクエスト、 Webサーバーから返される内容をHTTPレスポンスと呼びます。

この章では、次の順番で通信します。

ブラウザーがPico WのIPアドレスへ接続します
Pico Wが、LED操作用のHTML画面を返します
ブラウザーが、点灯または消灯の要求を送ります
Pico WがGP15の出力を切り替えます
Pico Wが更新後の画面へブラウザーを戻します

同じWi-Fiに接続したPCのブラウザーからPico WへHTTPリクエストを送り、Pico WがHTML画面を返し、GP15の外付けLEDを操作する流れ。

図11-1　PCのブラウザーからPico WのLEDを操作する流れ

11-2　URLと処理を対応させる

Webサーバーは、リクエストに含まれる メソッドとパスを見て処理を分けます。

メソッド	パス	この章での処理
`GET`	`/`	LED操作画面を表示する
`POST`	`/led/on`	GP15をHIGHにしてLEDを点灯する
`POST`	`/led/off`	GP15をLOWにしてLEDを消灯する

GETは画面などの情報を取得する処理、 POSTは状態を変更する操作として使い分けます。

LEDを操作した後、Pico Wは303 See Otherという応答を返します。この応答を受けたブラウザーは/を再取得するため、操作後のLED状態が画面へ反映されます。

11-3　LED回路を確認する

新しい配線は追加しません。第5章で使用した次の接続をそのまま使用します。

接続元	接続先	補足
Pico Wの`GP15`	330Ω抵抗の片側	`GP15`は物理ピン20
330Ω抵抗の反対側	LEDのアノード	一般に長い端子
LEDのカソード	Pico Wの`GND`	物理ピン18を使用

図と配線手順は、第5章の図5-1と5-4節を参照してください。

この回路では、GP15がHIGHのときにLEDが点灯し、 LOWのときに消灯します。

11-4　Pico WでWebサーバーを起動する

次のプログラムをch11_01_led_web_server.pyとして PC側へ保存します。

実行前に、WIFI_SSIDとWIFI_PASSWORDの文字列を講師から指定された値へ置き換えます。引用符は残し、その内側だけを変更します。

コード全体は長く見えますが、 HTML_TEMPLATEはブラウザーへ表示する完成済みの画面定義です。研修では全行を手入力せず、完成コードを使用します。主に確認する部分は、Wi-Fi接続、リクエストの判定、 LED操作、レスポンス、停止時の後片付けです。

1
from machine import Pin
2
import network
3
import socket
4
import time
5

6
WIFI_SSID = "YOUR_SSID"
7
WIFI_PASSWORD = "YOUR_PASSWORD"
8
CONNECT_TIMEOUT_MS = 20000
9
LED_PIN = 15
10
PORT = 80
11

12
HTML_TEMPLATE = """<!doctype html>
13
<html lang="ja">
14
<head>
15
  <meta charset="utf-8">
16
  <meta name="viewport" content="width=device-width, initial-scale=1">
17
  <title>Pico W LED操作</title>
18
  <style>
19
    body {
20
      font-family: sans-serif;
21
      max-width: 34rem;
22
      margin: 3rem auto;
23
      padding: 0 1rem;
24
      text-align: center;
25
      color: #172554;
26
    }
27
    .panel {
28
      border: 2px solid #93c5fd;
29
      border-radius: 1rem;
30
      padding: 1.5rem;
31
      background: #eff6ff;
32
    }
33
    .state {
34
      font-size: 1.4rem;
35
      font-weight: bold;
36
      margin: 1.5rem 0;
37
    }
38
    form {
39
      display: inline-block;
40
      margin: 0.4rem;
41
    }
42
    button {
43
      min-width: 8rem;
44
      padding: 0.8rem 1rem;
45
      border: 0;
46
      border-radius: 0.6rem;
47
      color: white;
48
      font-size: 1rem;
49
      cursor: pointer;
50
    }
51
    .on {
52
      background: #15803d;
53
    }
54
    .off {
55
      background: #b91c1c;
56
    }
57
  </style>
58
</head>
59
<body>
60
  <main class="panel">
61
    <h1>Pico W LED操作</h1>
62
    <p class="state">現在の状態：__LED_STATE__</p>
63
    <form action="/led/on" method="post">
64
      <button class="on" type="submit">LEDを点灯</button>
65
    </form>
66
    <form action="/led/off" method="post">
67
      <button class="off" type="submit">LEDを消灯</button>
68
    </form>
69
  </main>
70
</body>
71
</html>
72
"""
73

74

75
def connect_wifi():
76
    wlan = network.WLAN(network.WLAN.IF_STA)
77

78
    wlan.active(False)
79
    time.sleep(1)
80
    wlan.active(True)
81

82
    print("Wi-Fiへ接続します...")
83
    wlan.connect(WIFI_SSID, WIFI_PASSWORD)
84

85
    start_time = time.ticks_ms()
86

87
    while not wlan.isconnected():
88
        status = wlan.status()
89

90
        if status in (
91
            network.STAT_WRONG_PASSWORD,
92
            network.STAT_NO_AP_FOUND,
93
            network.STAT_CONNECT_FAIL,
94
        ):
95
            wlan.active(False)
96
            raise RuntimeError(
97
                "Wi-Fi接続に失敗しました。status={}".format(status)
98
            )
99

100
        elapsed = time.ticks_diff(time.ticks_ms(), start_time)
101
        if elapsed >= CONNECT_TIMEOUT_MS:
102
            wlan.active(False)
103
            raise RuntimeError(
104
                "Wi-Fi接続がタイムアウトしました。status={}".format(status)
105
            )
106

107
        print("接続待ち... status={}".format(status))
108
        time.sleep(1)
109

110
    return wlan
111

112

113
def parse_request(request):
114
    try:
115
        request_line = request.decode("utf-8").split("\r\n", 1)[0]
116
        method, path, version = request_line.split()
117
        return method, path
118
    except (ValueError, UnicodeError):
119
        return "", ""
120

121

122
def make_page(led):
123
    if led.value():
124
        state_text = "点灯"
125
    else:
126
        state_text = "消灯"
127

128
    return HTML_TEMPLATE.replace("__LED_STATE__", state_text)
129

130

131
def send_page(client, led):
132
    body = make_page(led).encode("utf-8")
133
    header = (
134
        "HTTP/1.1 200 OK\r\n"
135
        "Content-Type: text/html; charset=utf-8\r\n"
136
        "Content-Length: {}\r\n"
137
        "Connection: close\r\n"
138
        "\r\n"
139
    ).format(len(body)).encode("ascii")
140

141
    client.sendall(header)
142
    client.sendall(body)
143

144

145
def send_redirect(client):
146
    client.sendall(
147
        b"HTTP/1.1 303 See Other\r\n"
148
        b"Location: /\r\n"
149
        b"Connection: close\r\n"
150
        b"\r\n"
151
    )
152

153

154
led = Pin(LED_PIN, Pin.OUT)
155
led.off()
156
server = None
157
wlan = None
158

159
try:
160
    wlan = connect_wifi()
161
    ip_address = wlan.ifconfig()[0]
162

163
    address = socket.getaddrinfo(
164
        "0.0.0.0", PORT, 0, socket.SOCK_STREAM
165
    )[0][-1]
166
    server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
167
    server.bind(address)
168
    server.listen(1)
169

170
    print("Webサーバーを開始しました")
171
    print("ブラウザーで開くURL: http://{}/".format(ip_address))
172

173
    while True:
174
        client = None
175

176
        try:
177
            client, remote_address = server.accept()
178
            request = client.recv(1024)
179
            method, path = parse_request(request)
180
            print("リクエスト:", method, path)
181

182
            if method == "POST" and path == "/led/on":
183
                led.on()
184
                send_redirect(client)
185
            elif method == "POST" and path == "/led/off":
186
                led.off()
187
                send_redirect(client)
188
            else:
189
                send_page(client, led)
190
        except OSError as error:
191
            print("HTTP処理エラー:", error)
192
        finally:
193
            if client is not None:
194
                client.close()
195
except KeyboardInterrupt:
196
    print("Webサーバーを停止します")
197
except Exception as error:
198
    print(error)
199
finally:
200
    if server is not None:
201
        server.close()
202
    led.off()
203
    if wlan is not None:
204
        wlan.active(False)

このコードは、1件ずつリクエストを処理する簡易構成です。多数の利用者や長時間運用を目的としたものではありません。

11-5　ブラウザーからLEDを操作する

PCとPico Wを同じ研修用Wi-Fiへ接続します
Thonnyでch11_01_led_web_server.pyを実行します
Shellへ表示されたブラウザーで開くURLを確認します
表示されたURL全体を、PCのブラウザーのアドレス欄へ入力します
LEDを点灯ボタンを押し、外付けLEDと画面の状態を確認します
LEDを消灯ボタンを押し、外付けLEDと画面の状態を確認します
確認後はThonnyの停止ボタンを押し、プログラムを終了します

Shellには、次のように表示されます。

Wi-Fiへ接続します...
接続待ち... status=1
Webサーバーを開始しました
ブラウザーで開くURL: http://192.168.10.42/
リクエスト: GET /
リクエスト: POST /led/on
リクエスト: GET /

IPアドレスは表示例と異なります。毎回、実行時にShellへ表示されたURLを使用してください。

http://を含む完全なURLを入力します。ブラウザーが自動的にhttps://へ変更した場合は、アドレス欄へhttp://から入力し直します。

11-6　コードの重要部分

待ち受け用ソケットを作成する

address = socket.getaddrinfo(
    "0.0.0.0", PORT, 0, socket.SOCK_STREAM
)[0][-1]
server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(address)
server.listen(1)

socketは、ネットワーク通信の出入口を作るための機能です。

0.0.0.0は、Pico Wが持つネットワークインターフェースで接続を受け付ける指定です。 PORT = 80は、HTTPで標準的に使用されるポート番号です。

ブラウザーからの接続を待つ

client, remote_address = server.accept()
request = client.recv(1024)

accept()は、ブラウザーから接続されるまで待ちます。接続されると、recv()でHTTPリクエストを受け取ります。

この待ち時間中もプログラムは動作しています。 Shellへ新しい表示が出ないことだけで、停止したと判断しないようにします。

リクエストの先頭行を読み取る

request_line = request.decode("utf-8").split("\r\n", 1)[0]
method, path, version = request_line.split()

HTTPリクエストの先頭行には、メソッド、パス、HTTPの版が含まれます。

たとえば点灯ボタンを押した場合は、次のような先頭行になります。

POST /led/on HTTP/1.1

パスに応じてLEDを操作する

if method == "POST" and path == "/led/on":
    led.on()
    send_redirect(client)
elif method == "POST" and path == "/led/off":
    led.off()
    send_redirect(client)
else:
    send_page(client, led)

点灯または消灯のPOSTを受けたときだけ、 GP15の出力を変更します。

操作後はブラウザーを/へ戻します。それ以外の要求には、現在のLED状態を含む画面を返します。

停止時に後片付けする

finally:
    if server is not None:
        server.close()
    led.off()
    if wlan is not None:
        wlan.active(False)

停止時やエラー時には、待ち受け用ソケットを閉じ、LEDを消灯し、Wi-Fiを停止します。

実行をやり直すときは、前のプログラムが停止していることを確認します。

11-7　ローカルWebサーバーとクラウド

この章では、PCとPico Wが同じネットワーク内で直接通信します。インターネット上のクラウドサービスは使用していません。

項目	この章のローカルWebサーバー	後続章のクラウド連携
Pico Wの役割	Webサーバー	クラウドへ接続するクライアント
操作・閲覧する機器	同じネットワーク内のPC	インターネットへ接続したPCやスマートフォン
データの保存	基本的に行わない	クラウド側へ記録できる
外出先からの利用	対象外	サービスの仕組みにより可能
主な学習内容	HTTPの要求と応答	データ送信、蓄積、可視化、遠隔操作

Pico WをWebサーバーにすると、端末から直接操作する仕組みを体験できます。

一方、離れた場所から状況を確認したり、長期間のデータを保存したりするには、クラウドを介する構成が適しています。

確認チェック

よくある問題と確認方法

状況	主な確認箇所
URLを開いても画面が表示されない	プログラムが実行中か、完全なURL、`http://`、PCとPico Wの接続先
接続がタイムアウトする	PCとPico Wが同じネットワークか、端末間通信が許可されているか
前回と同じURLで接続できない	再接続後にShellへ表示された最新のIPアドレス
ブラウザーがHTTPSで開こうとする	アドレス欄へ`http://`を含む完全なURLを入力
LEDが変化しない	GP15、330Ω抵抗、LEDの向き、GND、Shellに表示されるメソッドとパス
画面状態とLEDが一致しない	ページを再読み込みし、別のプログラムがGP15を操作していないか確認
再実行時にソケットのエラーが出る	前のプログラムを停止し、必要に応じてPico Wを再起動
ブラウザーから複数の要求が表示される	アイコンなどを取得する追加要求の場合がある。LED操作の`POST`を確認

IPアドレスを確認するときは、固定値を本文やプログラムへ書き込むのではなく、毎回Shellへ表示された値を使用します。

まとめ

Webブラウザーは要求を送るクライアント、Pico Wは応答するWebサーバーです
HTTPリクエストに対し、WebサーバーはHTTPレスポンスを返します
GET /で操作画面を表示し、POSTでLEDの状態を変更します
socketを使ってポート80で接続を待ち受けます
ブラウザーでは、Shellへ表示されたhttp://<IPアドレス>/を開きます
PCとPico Wは同じネットワークへ接続し、端末間通信が許可されている必要があります
GP15の外付けLED回路は、第5章の配線をそのまま使用します
この簡易Webサーバーは研修用であり、インターネットへ公開しません
クラウドを使うと、データ保存や離れた場所からの確認へ発展できます

参考資料

次の章

次の第12章では、Pico Wから取得したデータを Googleスプレッドシートへ記録する仕組みを扱います。ローカルネットワーク内の操作から、クラウド上へのデータ送信と蓄積へ進みます。

第11章 Pico WのWebサーバー