ESP32活用① ESP32とブラウザでお話しする（2）ブラウザに表示する内容はHTMLとCSSで作成する①
●LEDの設定状態に応じてLEDの表示色を変える
前回、上段の here の部分をマウスでクリックするとLEDを点灯する処理を行い、最初に表示された内容と同じ次の内容を表示します。
下段の here の部分をマウスでクリックすると、LEDを消灯する処理を行い、最初に表示された内容と同じ次の内容を表示します。
| Click here to turn the LED on pin 5 on. Click here to turn the LED on pin 5 off. |
今回は、LEDの点灯の処理を行ったときは、
| the LED |
の文字を赤色で表示し、消灯の処理を行ったときは青色で表示します。
●現行での設定状態の確認
前回、作成したプログラムでは常に同じ表示なので、表示からはLEDの点滅に対する設定状態はわかりません。しかし、アドレス・バーの表示を見ることで、設定状態を確認できます。
具体的には、点灯を選択した場合は /H が、消灯を選択した場合 /L が行末に設定されていて、選択状態を確認できます。
●前回使用したタグを確認する
●リンクを設定
前回、リンクを設定するaタグを使用しました。このタグは次の書式となります。
|
<a 属性＝”属性値”>表示部</a> <a href="/H">here</a> hrefの属性値 表示するページのURLは絶対アドレスと相対アドレスで指定できる。 相対アドレス ： /、/H、/Lなどはみな同じフォルダに格納されている。 絶対アドレス : httpやhttpsなどのURLの最初からを指定する。 表示部 ： 実際にブラウザに表示されるのはこの部分で、タグは表示されない。 |
●表示文字の色を変える記述
ここで文字の色の指定は、spanタグで色を指定する範囲を設定し、styleタグで属性を設定し、colorプロパティにより文字の色を決めています。
|
<span style="color:blue">the LED </span> style ： この属性値を指定するとタグの中で直接スタイルシートを指定できる。 color ： CSS（Cascading Style Sheets）はHTML文書のスタイルなどを設定する仕組み。colorはその中で文字の色を設定するプロパティ。：で区切ってプロパティで設定する値を指定する。値はred、blue、greenなどのキーワードもしくは3バイトRGBのカラー・コード（例えば#ffffffは白色）で指定する。ここではredとblueを使用した。 |
●文字の色を変える処理を追加する
前回作成したLEDを点滅するためのメッセージを次に示します。このメッセージに、LEDの文字色を変えるための処理を追加します。
| void handleRoot() { String temp = "Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>"; temp += "Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.\n"; server.send(200, "text/HTML", temp); } |
文字の色を変えるため、the LEDの記述に次の処理を加えます。
| <span style=”color:red”>the LED</span> |
<span> </span>で囲まれたthe LEDがstyle=”color：red”の対象となり、この場合colorプロパティにその値のキーワードredにより赤く表示されるようになります。
●キーワードを関数の引数とする
/Hと/Lとでは表示の色の指定がred、blueと異なった値を設定するため、前回作成したhandleRoot関数に、赤の表示の場合、青の表示の場合とニーズに応じて必要な色の値のキーワードを引数として関数に渡します。
●引数の設定
handleRoot()関数に渡す引数は、次に示すように二つの文字列のオブジェクトで渡します。
|
String cr1、String cr2 String：先頭のSが大文字の場合、オブジェクトの文字列となる。先頭の ｓ が小文字の場合は、文字型の配列と同等な文字列型となる。 cr1： 上段のonのメッセージのthe LEDの表示色を指定する文字列オブジェクト cr2 ： 下段のoffのメッセージのthe LEDの表示色を指定する文字列オブジェクト |
設定するカラーのキーワードは、定数としてプログラムの最初に次のように定義します。
| String COLOR1 ="red"; String COLOR2 ="blue"; |
COLOR1は文字列のオブジェクトでキーワードとして赤を示すredを、COLOR2も文字列のオブジェクトで青を示すキーワードblueとして利用できるようになっています。
●メッセージ表示の関数
属性名styleの後に設定するcolorプロパティと設定値のキーワードは、”color:red” のように ” で前後を囲います。文字列の定義は前後を ” で囲い定義します。” で囲われた範囲内の ”color:red” のような ” は \” と記述します。関数は次のようになります。
| void handleRootmsg( String cr1,String cr2) { String temp = "Click <a href=\"/H\">here</a> to turn "; temp.concat("<span style=\"color:"); temp += cr1 + "\">the LED </span>on pin 5 on.<br>"; temp += "Click <a href=\"/L\">here</a> to turn <span style=\"color:"; temp += cr2 + "\">the LED </span> on pin 5 off.\n"; server.send(200, "text/HTML", temp); } |
●各応答の処理
クライアント（Webブラウザ）からの問い合わせに対する応答の処理を行う関数はserver.handleClient()で、問い合わせに対応して起動されます。
●IPアドレス/で起動するhandleRoot()関数
the LEDの文字は、共にblueを示すCOLOR2によって青い文字で表示されます。
| void handleRoot(){ handleRootmsg(COLOR2,COLOR2); } |
●/Hの指定でLEDをオンにする処理
まずdigitalWrite(5, HIGH); の命令でLEDを点灯し、表示メッセージをクライアントに送信するhandleRootmasg()関数は、引数に共に赤を示すCOLOR1がセットされ、the LEDは赤い文字になります。
| void handleon() { digitalWrite(5, HIGH); // GET /H turns the LED on handleRootmsg(COLOR1,COLOR1); } |
●/Lの指定でLEDをオフにする処理
まずdigitalWrite(5, LOW); の命令でLEDを消灯し、表示メッセージをクライアントに送信するhandleRootmasg()関数は、引数に共に青を示すCOLOR2がセットされ、the LEDは青い文字になります。
| void handleoff() { digitalWrite(5, LOW); // GET /L turns the LED off handleRootmsg(COLOR2,COLOR2); } |
●修正したプログラム
上記に示した以外、前回のスケッチと大きな変更はありません。実際に最終テストを行ったプログラムを次に示します。
●Google Chromeのデベロッパーツールを開く
次に示すように、WebブラウザChromeのメニューから、その他のツール＞デベロッパーツールを選択すると、デベロッパーツールが利用できるようになります。
●動作の確認に便利なデベロッパーツール
メニューからデベロッパーツールを開く以外にも、F12キーを押すと一発でデベロッパーツールが開きます。このデベロッパーツールは、Webのページの確認、PC以外のスマートホンなどでの表示を確認でき、便利に利用できます。
次の図は、LEDの点灯を選択したときの様子で、colorの値がredになっているのが確認できます。
次のページは、LEDの消灯を指示したときの結果です。colorの値がblueになっています。
Webの文字の色を任意のものに変えることができるようになりました。デベロッパーツールのElementsでは<html> <head> <body＞などのタグが追加されています。次回はこれらのタグについて確認し、標準的なHTML文書の書式を確認します。
（2019/5/26 V1.0）
<神崎康宏>
コラム 複数プロパティの指定
style="color:blue"では、色の指定をしました。例えば、文字の大きさを指定したいときは、“”の間に追加します。区切りは；です。
style="font-size:大きさの値 ; color:色の値"
このように続けて記述することがあるので、
style="color:blue;"
と、一つだけのときにも;をつけて記述することもあります。
