ということは、ブラウザで接続できるな！
ブラウザからRaspberry Pi Pico Wを
制御することもできる。
できるな。
Raspberry Pi Pico Wを制御してみよう。
この記事ではArduino IDEを使ったプログラミング例を紹介します。
● Google Chrome バージョン: 112.0.5615.138（Official Build）(64 ビット）
すけろく ついに、国内でもRaspberry Pi Pico Wを手に入れたぞ！ げんろく Wi-Fiモジュールがついているので、 国内の技適取得が必要だったからな。 すけろ[…]
記事内でご紹介する「Raspberry Pi Pico W」はこちら！
Arduino、C/C++、MicroPythonに対応している組み込み開発キットです。
正確なタイマ機能、温度センサーなどを備えたモデルです。ディスプレイ等がないため、消費電力を抑えた構成をとることができます。いろいろ遊べますよ～
今回の目標
今回の目標は、スマホやタブレットのブラウザ（Chrome）で「Raspberry Pi Pico W」に接続し、メッセージを「SEND」すると、「Raspberry Pi Pico W」経由で、パソコンのシリアルモニタに表示されるようにします。
動作イメージ
処理の流れ
処理の流れは次の通りです。
- Raspberry Pi Pico W をWi-Fi接続する
- スマホ、タブレットのブラウザで、Raspberry Pi Pico WのページURLを入力し接続します。
- ブラウザに表示されたページでメッセージを入力し「SEND」ボタンを押します。
- Raspberry Pi Pico Wにメッセージが送信されます。
- Raspberry Pi Pico Wにシリアル接続したパソコン上のシリアルモニタにメッセージが表示されます。
ブラウザで設定する際の仕組みを理解する
ブラウザから制御するためには、Webクライアント（ブラウザ）と、Webサーバー（今回は「Raspberry Pi Pico W」）の役割を知る必要があります。
各役割は一般的に以下のように定義されます。
- Webクライアント
ソフトウェアの種類の一つ。Webサーバーの持つ情報や機能にアクセスして利用できるようにするもの。 - Webサーバー
WebクライアントからHTTP/HTTPSで送られたリクエストに対してHTML、CSS、JavaScriptなどの情報を返す役割を持ったソフトウェアのこと。
要求への応答内容も次の2種類あります。
- ファイル
返信結果があらかじめ決まっているもの（更新されないもの）です。
これはHTMLファイルとCSSファイルや画像ファイルなどで構成され、Webサーバー上に保存されています。 - 処理結果
Webサーバー側で実行されているプログラムの実行結果を返すパターンです。
PerlやPHPと呼ばれるWebサーバー側で動作するプログラムが使われます。
Webサーバー上にプログラムが保存されています。
今回作るものに置き換えると次のようになります。
- Webクライアント →スマホやパソコンのブラウザ
- Webサーバー →「Raspberry Pi Pico W」の中に作るもの
ブラウザ（Webクライアント）は、いつも皆さんが使っているものが使えますので、特に作る必要はありません。
今回プログラミングして作るのは次の2つになります。
- Webサーバーの機能
- リクエストに対する応答内容（HTML、CSS、JavaScript）
WebクライアントからWebサーバーに接続したとき、Webサーバーから返される応答内容は次のような仕組みで動いています。
Webブラウザを使ってWebサーバー（Webサイト）にアクセスする場合、「HTTP（Hypertext Transfer Protocol）」というプロトコルが利用されます。
Webブラウザのアドレスバーに「http://karakuri-musha.com/」などと入力した場合、「http:」の部分がプロトコル指定部分です。
HTTPプロトコルを使って、サイト（karakuri-musha.com）にアクセスするという意味になります。
このHTTPというプロトコルでは、WebサーバーとWebクライアントがTCP：80番ポートを使用して通信します。
そのため、Webサーバーでは、TCPの80番ポートで待ち受け（リッスン）していています。
WebクライアントはWebサーバーの80番ポートに対してTCP接続を行ったあと、次の手順を実行します。
- WebクライアントからHTTPのファイル取得要求（GET要求）を送信する
- Webサーバ側から応答を返す
※図ではステータスとして「HTTP/1.1 200 OK」と返していますが、これは成功を意味します。
続いて応答ヘッダ（Content-type～Connection）とドキュメント部（<!DOCTYPE…～</html>）が返されます。
ドキュメント部の内容が実際にブラウザで表示される内容になります。
※応答ヘッダとドキュメント部の間には改行コードが入ります。
※図に記載した以外にも応答ヘッダで記述できるものはあります。
Raspberry Pi Pico W でWebサーバを構成するためには
「Raspberry Pi Pico W」にWebサーバの機能をプログラミングするためには、Arduino のライブラリ「WiFi」を使用します。
今回使用する「Raspberry Pi Pico W」用のボードマネージャが、Arduinoのライブラリに対応しているので利用できます。
接続情報の設定
WiFiサーバーとして設定すべき、設定情報は次の通りです。
Wi-Fiのモードをステーション（子機）として設定します。
| 関数 | 説明 |
| WiFi::mode(WiFiMode_t m) | WiFiのモードをステーション（子機）か、アクセスポイント（AP）にするかを選択します WiFiMode_t （WIFI_OFF = 0, WIFI_STA = 1, WIFI_AP = 2, WIFI_AP_STA = 3) |
Webサーバー機能
Webサーバーを開始するために、WiFiクラスの次の関数を使用します。
| 関数 | 説明 |
| WiFiServer(int port) | Webサーバを生成します。生成時にはポート番号を指定します port : ポート番号 WiFiServer server(80); |
| WiFiServer.begin() | Webサーバを開始します server.begin(); |
| WiFiServer.available() | Webクライアントからの接続情報の取得 戻り値はWiFiClient型 WiFiClient client = server.available(); ※接続されたクライアントがいない場合は、WiFiClientは、「False」になります |
Webクライアント機能
| 関数 | 説明 |
| WiFiClient() | Webクライアント接続を生成します 生成時にWiFiServer.available()の結果を格納することでWebサーバに接続されているものが取得できます WiFiClient client = server.available(); |
| WiFiClient.connected() | Webクライアント接続が接続されているかを取得します（trueまたはfalseが戻ります） client.connected() |
| WiFiClient.available() | Webクライアント接続が有効かどうかを取得します。（trueまたはfalseが戻ります） client.available() |
| WiFiClient.read() | Webクライアント接続から値を取得します |
| WiFiClient.println(char[]) | Webクライアント接続への応答内容を定義します 最後に改行が入ります |
| WiFiClient.printf(char[]) | Webクライアント接続への応答内容を定義します 最後に改行が入りません |
| WiFiClient.flush() | クライアント接続にあるデータを消去します |
|
WiFiClient.stop();
|
クライアント接続を停止します |
プログラムの構成
Raspberry Pi Pico W をWebサーバにしてみる
では実際にスマホやタブレットなどからブラウザで制御するプログラムを書き込んでいきましょう。
プログラム作成前に確認するポイント
プログラム作成前に、以下の点を押さえておいてください。
Wi-Fi接続と時刻同期
Wi-Fi接続と時刻同期の方法については、次の記事で紹介しています。
Wi-Fi接続方法は、次の記事で紹介しています。
すけろく Raspberry Pi Pico W がArduinoで プログラムを書き込めることは確認できた。 げんろく ああ。無事、初回書き込みが出来て、 COMポートとしても認識されたな。 […]
ご自分の環境に合わせて値を修正してください。
（スケッチ例では「”your-ssid“」、「”your-password“」と記載しています。）
Arduino IDEでプログラミングする
Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。
Arduino IDE スケッチ例
Raspberry Pi Pico Wへの書き込み
2回目以降
- Raspberry Pi PicoをパソコンにUSB接続します。
- Arduino IDEで前述のプログラムを記載して、 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
- 「ツール」メニューから「ボード」情報を確認し、次のものを選択します。
「Raspberry Pi Pico/RP2040」－「Raspberry Pi Pico W」 - 「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
- 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。（転送速度は「9600」です)
- 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。
プログラム実行結果
書き込みが完了後、シリアルモニタには、次のように出力されます。
Connecting to 'your-ssid' .......................................................... Connected to WiFi Connect to server at 192.168.xxx.xxx:80
スマホやタブレット、パソコンのブラウザ（Chromeで確認しています）を起動して、シリアルモニタに出力されたIPアドレスを使って、接続します。
＜入力例＞
http://192.168.xxx.xxx
次のような画面がブラウザに表示されます。
真ん中にあるテキストボックスに英数字で文字を入力して「SEND」ボタンを押します。
※今回は英数字とスペースのみ対応しています。
「SEND」ボタンを押すと、シリアルモニタ上に次のように出力されます。
Send Message : Hello World Send Message : I am GENROKU Send Message : test123 Send Message : test 123
編集後記
いかがだったでしょうか。
「Raspberry Pi Pico W」のプログラミングといえば、「microPython」と考えていましたが、Arduino IDEでプログラムできるとうれしいですね。
これで、HTTP接続を使用して、さまざまな動き（スイッチのON/OFF、センサーデータの表示、設定値の再設定など）が実装できますね！
「Raspberry Pi Pico W」と同じRP2040というチップを搭載している機器にも使えるので応用ができそうです。
記事は、以上になります。
最後までご覧いただきありがとうございました。
記事内でご紹介する「Raspberry Pi Pico W」はこちら！
Arduino、C/C++、MicroPythonに対応している組み込み開発キットです。
正確なタイマ機能、温度センサーなどを備えたモデルです。ディスプレイ等がないため、消費電力を抑えた構成をとることができます。いろいろ遊べますよ～
Raspberry Pi Pico Wの他の記事はこちらからどうぞ！
すけろく うーむ。 どうしたものか。 げんろく どうした。 暗い顔をして。 すけろく カーモデルのウィンカー点滅を再現したくてな。 明滅回路を作ろうか悩んでおる。 げんろく ん！？ そんなときは、メインプロセッサと切り離して 動作するPIOの出番ではないのか！ この記事では、「Raspberry Pi Pico／W」に実装されている「PIO(Programmable I/O」を実際に使ってみます […]
すけろく Raspberry Pi Pico／WのPIO機能を使ってUARTの送信には成功した。 しかし、まだ受信側ができていないのぉ。 げんろく そうだな。 今度は受信側を試してみるか。 すけろく どうせなら、パソコンから送った文字を返すような やり取りができるといいな。 げんろく よし。 UART送受信を実装してみよう。 この記事では、「Raspberry Pi Pico／W」に実装されてい […]
すけろく Raspberry Pi Pico／WのPIO機能については前回調べた。 今度は実際に使ってみたいの~ げんろく そうだな。 実際にプログラムする際の注意事項などを見ていこう。 すけろく Arduino IDEでも使用できるのか？ げんろく ああ。 使えるぞ！ Arduino IDEで使う場合を例にやっていこう。 この記事では、「Raspberry Pi Pico／W」に実装されている […]
すけろく Raspberry Pi Pico／Wには、PIOという機能があるらしいな。 げんろく そうだ。 UARTなどのインタフェース不足や、実装されていない機能を GPIOに対してプログラムできる機能だ。 すけろく Raspberry Pi Pico／Wをもっと知るために PIOを調べてみたい。 げんろく よし！ PIOについて少し調べてみるか！ この記事では、「Raspberry Pi P […]
すけろく うーむ。 げんろく どうした浮かない顔して。 すけろく これまで、Raspberry Pi Pico / Wをいろいろ確認してきたが 外付けのボタンの認識ってやったかぇ？ げんろく たしかに！まだ取り上げていない基本的なものがあるな よし、今回はボタン押下時の状態を Raspberry Pi Pico / Wで認識してみよう。 この記事では、「Raspberry Pi Pico W」を […]
すけろく 宅内で使っているリモコンは、どういった仕組みで テレビなどをつけているのかな~？ げんろく 赤外線を使って信号を送っているのだ。 すけろく しかし、たくさんある機器のリモコンが混信しないのは どういった仕組みなのかぇ？ げんろく よし、今回は赤外線リモコンの通信を 調査してみるか！ この記事では、「Raspberry Pi Pico W」を使って、「赤外線リモコンの通信内容を分析する」 […]
すけろく うーむ。 対応付けが難しいな。 げんろく どうした？ Raspberry Pi Picoで悩んでいるようだな。 すけろく Raspberry Pi PicoやPico Wの GPIOピンの情報がボード上にプリント されていないから資料との対応付けがやりづらくてな。 げんろく そうか。そういう課題があるのだな。 よし、解決するグッツを作って提供してみよう！ 皆さんは、「Raspberry […]
すけろく うーむ。 モーターを毎回同じくらい回転させることはできんのかな。 げんろく DCモーターや、サーボモーターだと、 回転量を正確に制御することは難しいぞ。 すけろく では、何か解決策はあるのかぇ？ げんろく ステッピングモーターというものがある。 モーターの回転をステップとして制御できる。 今回はこのあたりを動かしてみるか。 この記事では、「Raspberry Pi Pico W」を使っ […]
すけろく 以前の記事で、Raspberry Pi Pico Wを Picoprobe経由でデバッグすることができた。 しかし、シリアルの入出力がArduino IDEで 読み込めないのだ。 げんろく そうだな。 Raspberry Pi PicoやRaspberry Pi Pico Wでは、 シリアル出力用の「Serial.println」では、 Picoprobe経由で取得できない。 すけろく […]
すけろく ん～。 このエラーの時の変数の値が知りたいな～ げんろく どうした？ プログラムがうまく動かないのか？ すけろく そうなのだ。 Raspberry Pi Pico Wでもデバック機能が使えると いいのだが。。。 げんろく ちなみに、Arduino IDE 2.1.0 のデバッグ機能で Raspberry Pi Pico / Wのデバッグができるぞ！ やっとできたプログラムを動かしてみると […]