ということは、ブラウザで接続できるな！
ブラウザから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」はこちら！
Raspberry Pi Pico W
Arduino、C/C++、MicroPythonに対応している組み込み開発キットです。
正確なタイマ機能、温度センサーなどを備えたモデルです。ディスプレイ等がないため、消費電力を抑えた構成をとることができます。いろいろ遊べますよ～
| Click Me !!Amazonで確認 Wifi対応の小さなマイコン！ここからはじめましょう！ |
今回の目標
今回の目標は、スマホやタブレットのブラウザ（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」はこちら！
Raspberry Pi Pico W
Arduino、C/C++、MicroPythonに対応している組み込み開発キットです。
正確なタイマ機能、温度センサーなどを備えたモデルです。ディスプレイ等がないため、消費電力を抑えた構成をとることができます。いろいろ遊べますよ～
| Click Me !!Amazonで確認 Wifi対応の小さなマイコン！ここからはじめましょう！ |
Raspberry Pi Pico Wの他の記事はこちらからどうぞ！
すけろく Raspberry Pi Pico WのBluetoothを 使ってみたいの～ げんろく うむ。そうだな。 そろそろ試してみてもよかろう。 すけろく しかしどんなことができるかの？ げんろく Serial通信をBluetooth経由でやってみるのはどうだ？ せっかくなのでLEDを遠隔で操作してみよう。 今回は記事では、「Raspberry Pi Pico W」をArduinoでプログラミ […]
すけろく うぬぬ。 げんろく どうした？ 何かあったのか？ すけろく Raspberry Pi Pico W にArduinoから プログラムが書き込めないのだ・・・ げんろく そうか。 前回書き込み時にバグを仕込んだな。 再初期化の方法を教えよう。 今回は記事では、「Raspberry Pi Pico W」をArduinoでプログラミングする際に発生する問題について、解決方法を紹介します。 発生 […]
すけろく Raspberry Pi Pico Wは、Wi-Fi接続できる。 ということは、ブラウザで接続できるな！ げんろく そうだな。 ブラウザからRaspberry Pi Pico Wを 制御することもできる。 すけろく じゃあ、ブラウザから指示を出すことが できるな。 げんろく よし、スマホやパソコンからブラウザ経由で Raspberry Pi Pico Wを制御してみよう。 今回は記事では […]
すけろく Raspberry Pi Pico Wが、Arduinoでプログラミング できることは分かった。 げんろく そうだな。 意外とArduinoのライブラリで動く。 すけろく ああ。 ここらへんで、たくさんのLEDでも光らせてみないか？ げんろく よし、LEDストラップを光らせてみるか！ 今回は記事では、「Raspberry Pi Pico W」をArduinoでプログラミングします。 M5 […]
すけろく 最近、透明なディスプレイが出てきたな。 げんろく ああ。透過型ディスプレイというやつだな。 すけろく Raspberry Pi Pico Wでも使えるのか？ げんろく 手元にあるものはSPI通信を使うタイプだから Raspberry Pi Pico Wでも使えるぞ。 Arduino でプログラムしてみるか！ 今回は記事では、「Raspberry Pi Pico W」をArduinoでプロ […]
すけろく Raspberry Pi Pico Wでお天気情報を インターネットから取得できたな。 げんろく うむ。 お天気情報を取り込むことができたな。 すけろく 次は、お天気情報をディスプレイに 表示させたいな。 げんろく よし。 ならば、e-Paper（電子ペーパー）に表示してみるか！ 今回は記事では、「Raspberry Pi Pico W」をArduinoでプログラミングします。 インター […]
すけろく Raspberry Pi Pico Wをインターネットに 接続できたということは、 インターネット上のサービスを使えるということだな。 げんろく うむ。 インターネット上の情報を取得することや、 データのアップロードなどができる。 すけろく では、天気情報を取得することもできるのか？ げんろく できるぞ！ 今回は、インターネット上の天気情報サービスから 天気情報を取得して表示してみるか！ […]
すけろく Raspberry Pi Pico Wをインターネットに接続できたが インターネット上のサービスと連携させたいな。 げんろく それなら、インターネット上のサービスから データを取得する際によく使う形式があるので そこを押さえてからだな。 すけろく お！ JSON形式だな！ げんろく そのとおり。 今回は、Raspberry Pi Pico WでJSON形式データを 取り扱う方法をおさえて […]
すけろく 前回の記事で、Raspberry Pi Pico Wを Wi-Fi接続できた。 げんろく ああ。インターネットへのアクセスが できるようになったな。 すけろく これで、Raspberry Pi Pico Wの時刻を 正確に合わせることもできるな！ げんろく よし。インターネット上の NTP（時刻提供）サーバと時刻同期してみるか！ 今回は記事では、「Raspberry Pi Pico W」 […]
すけろく Raspberry Pi Pico W がArduinoで プログラムを書き込めることは確認できた。 げんろく ああ。無事、初回書き込みが出来て、 COMポートとしても認識されたな。 すけろく 次は、Raspberry Pi Pico W の特徴である Wi-Fi接続してみたいな。 げんろく よし、今度はWi-Fi接続してみるか。 今回は記事では、「Raspberry Pi Pico W […]
