micro:bitからWebサーバーへアクセスする

Wi-Fi通信モジュール（ESP8285）とアンテナを搭載したGroveデバイス「UART WiFi V2 （ESP8285）」を使って、micro:bitからWebサーバーへアクセスする方法を紹介します。

seeedのUART WiFi V2 （ESP8285）は、Wi-Fi通信モジュール（ESP8285）とアンテナを搭載したGroveデバイスです。UART WiFi V2の機能について「15-3.UART WiFi V2 （ESP8285）」で詳しく紹介していますのでご覧ください。

Wi-Fiアクセスポイントへの接続

Wi-Fiアクセスポイントへの接続は完了しているものとします。Wi-Fiアクセスポイントへの接続は「15-4.micro:bitからWi-Fi APに接続する」を参考にしてください。

ブラウザーによるアクセス

下の図は、ブラウザー（Firefox）から「http://sanuki-tech.net/wifi-test/」へアクセスして、その情報（「micro:bit」という文字）が表示されたようすです。ユーザーが、ブラウザーのアドレス欄にWebページのURLを入力して、エンターキーを押すと、ブラウザーが該当するWebサーバーへアクセスして情報を取得します。その得られた情報をもとにして、ブラウザー上に結果を表示します。

HTTPリクエストとHTTPレスポンス

もう少し詳しく見てみましょう。WebページのURLを、ブラウザーのアドレス欄に入力してエンターキーを押すと、URLに含まれているWebサーバーに対して、接続（通信の準備）を行います。続けて、Webサーバーに対して、情報の取得を要求します。この要求を「HTTPリクエスト」といい、リクエストライン・リクエストヘッダーフィールド・メッセージボディで構成されたメッセージです。表3-1が、実際に送信されたHTTPリクエストです。

1行目がリクエストラインで、HTTPリクエストの種類（GETメソッド）・取得する情報のパス（/wifi-test/）・HTTPのバージョン（HTTP/1.1）を示しています。2行目～9行目がリクエストヘッダーフィールドで、ホスト名（Host）・ブラウザー名（User-Agent）などが記されています。HTTPリクエスト（GETメソッド）の場合、メッセージボディはありません。

Webサーバーが、HTTPリクエストを受け取ると、必要な処理を行ってから、応答を返します。この応答を「HTTPレスポンス」といい、ステータスライン・レスポンスヘッダフィールド・空白行・メッセージボディで構成されたメッセージです。表3-2が、実際に返信されたHTTPレスポンスです。

1行目がステータスラインで、HTTPリクエストに対する処理結果（200 OK）を示しています。「200 OK」は、HTTPリクエストが成功したことを表します。2行目～9行目がレスポンスヘッダーフィールドで、日付（Date）、情報の形式（Content-Type）などが記されています。10行目が空白行です。11行目がメッセージボディで、HTTPリクエスト（GETメソッド）によって取得した情報になります。この情報をもとに、ブラウザー上に結果（「micro:bit」という文字）が表示されます。

このように、ブラウザーからWebサーバーへアクセスして情報（Webページ）を取得するには、HTTPリクエストとHTTPレスポンスによるやり取りが行われていることがわかりました。では、micro:bitからWebサーバーへアクセスするにはどうすればいいのでしょうか？

micro:bitからWebサーバーへアクセスするには？

前述のように、Webサーバーへアクセスして情報（Webページ）を取得するには「Webサーバーへの接続（通信の準備）」と「HTTPリクエストとHTTPレスポンスによるやり取り」をプログラミングすればよさそうです。

Webサーバーへの接続（通信の準備）には「AT+CIPSTART」コマンドを使います。パラメーターは、通信プロトコル（TCP）・接続先のWebサーバー（sanuki-tech.net）・接続するポート番号（80）です。

HTTPリクエストとHTTPレスポンスによるやり取りには「AT+CIPSEND」コマンドを使います。表3-4は、送信するHTTPリクエストです。1行目がリクエストラインで、HTTPリクエストの種類（GETメソッド）・取得する情報のパス（/wifi-test/）・HTTPのバージョン（HTTP/1.1）を示しています。2行目～4行目がリクエストヘッダーフィールドです。

HTTPリクエストのバージョンが1.1（HTTP/1.1）の場合、リクエストヘッダーフィールドの必須項目はHostです。この項目がないと「400 Bad Request」というエラーになるので必ず記述します。また、期待する情報の形式（Accept）として「text/html」、HTTPリクエストを送信する側の名前（User-Agent）として、今回は「micro:bit」を指定しました。

HTTPレスポンスは「AT+CIPSEND」コマンドの応答として返ってくるので、そのままmicro:bitのLED画面に表示します。表3-5は、実際に返信されたHTTPレスポンスです。

初期設定後、ボタンAを押したときに、Wi-Fiアクセスポイントに接続後、Webサーバーへアクセスするプログラムです。正常に接続できた場合、Webサーバーから返信されたHTTPレスポンスの内容をLED画面に表示します。「15-4.micro:bitからWi-Fi APに接続する」との差分のみ解説します。

最初だけ実行するプログラム

初期設定です。Webサーバーへの接続（通信の準備）とHTTPリクエストに必要な変数「FQDN」「PortNumber」「Path」「UserAgent」を定義しています。

関数：SendATCommandWaitResponse

変更はありません。

ボタンAが押されたときに実行するプログラム

Wi-Fiアクセスポイントへ接続するコマンド（AT+CWJAP）を発行した後、Webサーバーへアクセスするように変更しました。また、Webサーバーへ接続する直前に、いったん接続を切断するコマンド（AT+CIPCLOSE）を発行しています。

プログラム（JavaScript）です。

micro:bitにプログラムを書き込んだ後、USBケーブルをGrove Shield for micro:bit v2.0側のMicro USB端子に接続します。この端子から電源供給しないと正常に動作しませんでした。LED画面にハートが表示されたことを確認して、ボタンAを押します。うれしい顔が表示された後、HTTPレスポンスの内容が表示されると成功です。

表6-1は、Webサーバーのアクセスログです。GETメソッドにより、/wifi-test/へアクセスしているようすが記録されています。リクエストの処理結果は「200 OK」、UserAgentは「micro:bit」です。