03_HTTPServer

ブラウザからLEDを操作する

CherryIoTでHTTPサーバーを動かし、WebブラウザからLEDを操作します。

準備する

CherryIoTとモジュールを接続する

CherryIoTの指定コネクタに以下のモジュールを接続し、CherryIoTをPCのUSB-A挿入口に接続します。

LEDモジュール

接続先：A

Wi-Fiの情報を確認する

CherryIoTを接続する2.4GHz Wi-FiのSSID（ネットワーク名）とパスワードを確認します。Wi-Fiルーター本体のラベルや設定画面に記載されています。分からない場合は、ネットワークの管理者に確認してください。

サンプルコード

GitHubで公開しているサンプルコードです。コードをコピーして Arduino IDEで使用します。

GitHubからコードを読み込んでいます...

プログラムを書き込む

上のサンプルコードをコピーし、Arduino IDEに貼りつけます。

設定情報を書き換える

コード内の以下の箇所を、「1 準備する」で確認・取得した情報に書き換えます。

コード内の項目	入力する情報
`ssid`	接続するWi-FiのSSID
`password`	Wi-Fiのパスワード

const char* ssid = "ここにSSIDを入力";const char* password = "ここにパスワードを入力";

コードの左側にある項目名や記号は残し、例を参考に値の部分だけを書き換えます。値を囲む"、行末の;、証明書の開始・終了行などは削除しません。書き換えたあと、xxxxxなどの仮の文字が残っていないことを確認してください。

Wi-Fiのパスワード、APIキー、トークン、証明書などを入力したコードは、 Webサイト、SNS、GitHubなどへ公開しないでください。

ボードとポートの設定を確認し、左上の「→（書き込みボタン）」を押してCherryIoTに書き込みます。

初めて書き込む方は「はじめてのCherryIoT」で詳しい手順を確認してください。

動作確認

ブラウザで確認する

1シリアルモニターでIPアドレスを確認する

Arduino IDEの画面右上にあるシリアルモニターのアイコンをクリックすると、画面下にシリアルモニターが表示されます。CherryIoTがWi-Fiへ接続すると、シリアルモニターにIPアドレスが表示されます。

2ブラウザからCherryIoTへアクセスする

ブラウザのアドレス欄に、シリアルモニターへ表示されたIPアドレスを入力してアクセスします。表示されたWebページの「ON」または「OFF」を押すと、LEDを点灯・消灯できます。

次の2つを確認できれば成功です。

シリアルモニターに表示されたIPアドレスをブラウザで開ける
ブラウザの「ON」「OFF」を押してLEDを点灯・消灯できる

コードの解説

Wi-Fiへ接続してWebページを返し、ブラウザから送られた操作に応じてLEDを切り替えます。

GitHubからコードを読み込んでいます...

#include <WiFi.h>CherryIoTのWi-Fi機能を使うため、WiFiライブラリを読み込みます。ライブラリは、あらかじめ用意された機能をプログラムから使えるようにする仕組みです。

const int ledPin = 3;コネクタAのLEDに対応するGPIO3を、定数ledPinへ保存します。

const char* ssid = "xxxxx";CherryIoTを接続するWi-FiのSSIDを、ssidへ保存します。

const char* password = "xxxxx";Wi-Fiのパスワードを、passwordへ保存します。

WiFiServer server(80);Webブラウザからの接続を受け付けるWi-Fiサーバーを用意し、serverという名前で操作できるようにします。80はHTTP通信で一般的に使われるポート番号です。

void setup()setup関数は、CherryIoTの電源を入れたときやリセットしたときに1回だけ実行されます。ここでLED、シリアル通信、Wi-Fi、Webサーバーを使う準備をします。

delay(1000);1秒待ちます。

Serial.begin(115200);Wi-Fiの接続状況やブラウザから届いた情報をPCへ表示するため、115200bpsでシリアル通信を開始します。

pinMode(ledPin, OUTPUT);LEDへ信号を送れるように、ledPinをOUTPUT（出力）に設定します。

delay(10);0.01秒待ちます。

Serial.println();シリアルモニターで表示を見やすくするため、改行します。

Serial.print("Connecting to ");接続開始を示す「Connecting to 」を、改行せずに表示します。

Serial.println(ssid);続けて接続先のSSIDを表示し、改行します。

WiFi.begin(ssid, password);ssidとpasswordに保存した情報を使って、Wi-Fiへの接続を開始します。

while (WiFi.status() != WL_CONNECTED) {Wi-Fiへ接続できるまで、中の処理を繰り返します。while文は、条件を満たしている間、同じ処理を繰り返す命令です。

delay(500);0.5秒待ちます。

Serial.print(".");接続待ちであることが分かるように、「.」を改行せず表示します。

Serial.println("");Wi-Fiへの接続が完了したら改行します。

Serial.println("WiFi connected");Wi-Fiへ接続できたことを示す「WiFi connected」を表示します。

Serial.println("IP address: ");続けてIPアドレスを表示することが分かるように、「IP address:」を表示します。

Serial.println(WiFi.localIP());CherryIoTに割り当てられたIPアドレスを表示します。このIPアドレスをブラウザに入力してCherryIoTへアクセスします。

server.begin();ブラウザからの接続を受け付けられるように、Webサーバーを開始します。

void loop(){loop関数は繰り返し実行されます。ブラウザからの接続を待ち、Webページを返し、受信したON・OFF操作に応じてLEDを切り替えます。

WiFiClient client = server.available();ブラウザから接続が来ているかを確認し、接続があればclientへ保存します。clientを使って、そのブラウザとデータを送受信します。

if (client) {ブラウザから接続があった場合だけ、直後の処理を実行します。

Serial.println("new client");新しいブラウザが接続したことを示す「new client」を表示します。

String currentLine = "";ブラウザから届くHTTPリクエストを1行ずつ保存するため、文字列型の変数currentLineを用意します。HTTPリクエストは、ブラウザからサーバーへ送られる要求です。

while (client.connected()) {ブラウザとの接続が続いている間、受信データを確認し続けます。

if (client.available()) {ブラウザから読み取れるデータが届いている場合だけ、中の処理を実行します。

char c = client.read();ブラウザから届いたデータを1文字読み取り、cへ保存します。

Serial.write(c);受信した文字をそのままシリアルモニターへ表示します。

if (c == '\n') {受信した文字が改行文字かを確認します。

if (currentLine.length() == 0) {currentLineが空の状態で改行を受け取ったら、HTTPリクエストのヘッダーを最後まで受信したと判断します。

client.println("HTTP/1.1 200 OK");要求を正常に処理できたことを表す「200 OK」をブラウザへ送信します。

client.println("Content-type:text/html");これからHTML形式のWebページを送ることをブラウザへ知らせます。

client.println();HTTPヘッダーとWebページの内容を区切るため、空行を送信します。

client.println("<!DOCTYPE html>");ブラウザへ表示するWebページのHTMLを送信します。「ESP-WROOM-32」「Wi-Fi LED Switch」などの文字を表示します。

client.println("<form method='get'>");ON・OFFボタンを押した結果を、GET方式でCherryIoTへ送れるようにします。

client.println("<input type='submit' name=0 value='ON' style='background-color:#FF00FF; color:pink;'>");「ON」ボタンを表示します。押すと、0=ONという情報がCherryIoTへ送信されます。

client.println("<input type='submit' name=1 value='OFF' style='background-color:#66FFCC; color:skyblue;'>");「OFF」ボタンを表示します。押すと、1=OFFという情報がCherryIoTへ送信されます。

client.println("</form>");Webページを構成するHTMLを終了します。

client.println();HTMLを送り終えたあと、空行を送信します。

break;Webページを送り終えたため、ブラウザからデータを読み取る繰り返しを終了します。

} else {1行分の受信が終わった場合はこちらへ進み、次の行を読み取る準備をします。

currentLine = "";次の行を保存できるように、currentLineを空に戻します。

} else if (c != '\r') {受信した文字が改行や復帰文字ではない場合、その文字をHTTPリクエストの内容として扱います。

currentLine += c;受信した1文字をcurrentLineの末尾へ追加し、HTTPリクエストの1行を組み立てます。

if (currentLine.endsWith("GET /?0=ON")) {ONボタンを押したときに送られるGET /?0=ONを受信したか確認します。

digitalWrite(ledPin, HIGH);ONボタンの操作を受け取った場合は、LEDを点灯します。

if (currentLine.endsWith("GET /?1=OFF")) {OFFボタンを押したときに送られるGET /?1=OFFを受信したか確認します。

digitalWrite(ledPin, LOW);OFFボタンの操作を受け取った場合は、LEDを消灯します。

client.stop();Webページの送信と操作の確認が終わったため、ブラウザとの接続を終了します。

Serial.println("client disconnected");ブラウザとの接続を終了したことを示す「client disconnected」を表示します。