前回までは、ブラウザを通してサーバに接続し直すたびに、プログラム自体が初期化されてすべてのスイッチがオフになってしまいましたが、今回の改良で、各ESP8266内部にもスイッチのON/OFF状況を記憶させておく変数を用意したので、現在どのスイッチがON/OFFになっているかが分かるようになりました。これで当初考えていた仕組みがほぼ完成という感じです。
これは、サーバに接続し直したときの制御画面です。一度ブラウザを閉じてしまっても、再接続と同時にフィードバック用のURLへリクエストをだし、そのレスポンスとして現在のON/OFF状態のデータを受け取る仕組みになっています。レスポンスがない場合は、一番下の「トイレ：[非接続]」というような表示になり（トイレ用のESP8266はまだ設置していないため）、それぞれのESP8266が稼働中かどうかもわかります。
それにしても今回のこの単純な仕組みを実現したいがために、Node.js、EJS、Express、Node-RED、PythonのFlaskなども試してみましたが、結局使う必要はなかったという。
しかし、ひとつ気になったのは、以前試したBlynkの応用的な使い方であるBlynk HTTP RESTful APIです。
こちらは、いわゆるスマホで操作するBlynkとは違って、パソコンのブラウザからも制御できるという仕組み。Blynkで発行したTokenを使ってBlynkサーバにリクエストすれば、接続してあるESP8266などをリアルタイムで制御できます。当然、今回のように各端子のON/OFF状況も調べることができます。おそらく登録したプロジェクト（ESP8266などのデバイス一個分）ごとにTokenが発行されるので、ESP8266を3つ使うならば3プロジェクト登録して3つのTokenを使い回せば、それぞれの制御が可能になりそうです。この機能を使えば、従来通りにスマホのBlynkアプリから操作してもいいし、パソコンのブラウザからも操作できるというわけです。
しかしながら、これはBlynkのサービスというよりも、Apiaryというモックサーバを使ってWeb開発などをするサービスでした。最近この手のクラウドコンピューティングのようなサービスが増えてきて、どう使えばいいかまだわからないのですが、ネットで調べる限りでは便利そうでした。そのうち必要があれば使ってみたいと思います。
ということで、話はもどって、
当然ながら、すべてのESP8266が接続されていない場合はこの↑ように[非接続]ばかりになります。ハードのほうがまだ出来上がっていないため、現状ではこんな感じ。
例えば、蛍光灯をONにする場合は、http://192.168.3.12/fluo_onへリクエストを出し、読み込み完了とステータス200が確認できたあとに画面表示内容（ボタンの色など）をアップデートします。この場合はレスポンスとして受け取るデータはなしです。他のボタンや音声認識による操作も同様です。
これとは別に各スイッチのON/OFF状況を知るためには、http://192.168.3.12/fluo_on_checkという別のURLへリクエストを送り、レスポンスとして変数を受け取り画面表示内容に反映させています。
接続時のプログラムの流れ：
・ブラウザでメインサーバへアクセスする
・ブラウザから各ESP8266のフィードバック用URLへリクエストをおくる
・各ESP8266との接続確認をとる
・接続確認とれた場合、レスポンスとしてON/OFF状況の変数を受け取る
・接続確認とれない場合、非接続の変数値に置き換える
・ON/OFF/非接続の状況の変数をブラウザ側のJavaScriptの変数へ入れ直す
・変数に応じて画面表示内容をアップデートする
音声認識による制御プログラムの流れ：
・音声認識を開始する
・音声入力する
・音声入力をテキスト変換する
・変換された入力テキストを正規表現でマッチングさせる
・マッチングの内容に応じて各スイッチのON/OFF制御
・対応するESP8266のON/OFF制御用URLへリクエストを送る
・読み込み完了とステータス200を確認できれば画面表示内容をアップデート
・ESP8266側で端子をON/OFFする
・読み込み完了とステータス200を確認できない場合は、「接続できません」と表示する
ボタン操作による制御プログラムの流れ：
・ON/OFFのボタンを押す
・対応するESP8266のON/OFF制御用URLへリクエストを送る
・読み込み完了とステータス200を確認できれば画面表示内容をアップデート
・ESP8266側で端子をON/OFFする
・非接続中のボタンを押しても反応せず「操作できません」と表示
結局のところ、スイッチのON/OFFの仕組みよりも、ON/OFF状態を画面に反映させるためのプログラムにかなり時間がかかってしまいました。
今回の場合はJavaScriptで非同期通信を行っているため、コマンドを発したタイミングとその処理が終了するタイミングがずれるので、値がnullになってしまったりと、エラーのでる原因を見つけるのに結構手間がかかりました。ようやく非同期通信の仕組みがわかってきたという感じです。
以下がHTML、CSS、JavaScriptのプログラム：
尚、Web Speech API（途切れなくする方法）は、こちらを参考にしました。
追記：
実は上記の途切れなくする方法だと、スマホChromeでは繰り返しているうちにエラーが出てフリーズしてしまうので、その後改良してエラーなしで動作するようになりました（まとめのページ中ほどに書いてあります）。
以下が、ESP8266のプログラム（複数あるうちの一つ）：
それにしても今回のこの単純な仕組みを実現したいがために、Node.js、EJS、Express、Node-RED、PythonのFlaskなども試してみましたが、結局使う必要はなかったという。
しかし、ひとつ気になったのは、以前試したBlynkの応用的な使い方であるBlynk HTTP RESTful APIです。
こちらは、いわゆるスマホで操作するBlynkとは違って、パソコンのブラウザからも制御できるという仕組み。Blynkで発行したTokenを使ってBlynkサーバにリクエストすれば、接続してあるESP8266などをリアルタイムで制御できます。当然、今回のように各端子のON/OFF状況も調べることができます。おそらく登録したプロジェクト（ESP8266などのデバイス一個分）ごとにTokenが発行されるので、ESP8266を3つ使うならば3プロジェクト登録して3つのTokenを使い回せば、それぞれの制御が可能になりそうです。この機能を使えば、従来通りにスマホのBlynkアプリから操作してもいいし、パソコンのブラウザからも操作できるというわけです。
しかしながら、これはBlynkのサービスというよりも、Apiaryというモックサーバを使ってWeb開発などをするサービスでした。最近この手のクラウドコンピューティングのようなサービスが増えてきて、どう使えばいいかまだわからないのですが、ネットで調べる限りでは便利そうでした。そのうち必要があれば使ってみたいと思います。
ということで、話はもどって、
例えば、蛍光灯をONにする場合は、http://192.168.3.12/fluo_onへリクエストを出し、読み込み完了とステータス200が確認できたあとに画面表示内容（ボタンの色など）をアップデートします。この場合はレスポンスとして受け取るデータはなしです。他のボタンや音声認識による操作も同様です。
これとは別に各スイッチのON/OFF状況を知るためには、http://192.168.3.12/fluo_on_checkという別のURLへリクエストを送り、レスポンスとして変数を受け取り画面表示内容に反映させています。
接続時のプログラムの流れ：
・ブラウザでメインサーバへアクセスする
・ブラウザから各ESP8266のフィードバック用URLへリクエストをおくる
・各ESP8266との接続確認をとる
・接続確認とれた場合、レスポンスとしてON/OFF状況の変数を受け取る
・接続確認とれない場合、非接続の変数値に置き換える
・ON/OFF/非接続の状況の変数をブラウザ側のJavaScriptの変数へ入れ直す
・変数に応じて画面表示内容をアップデートする
音声認識による制御プログラムの流れ：
・音声認識を開始する
・音声入力する
・音声入力をテキスト変換する
・変換された入力テキストを正規表現でマッチングさせる
・マッチングの内容に応じて各スイッチのON/OFF制御
・対応するESP8266のON/OFF制御用URLへリクエストを送る
・読み込み完了とステータス200を確認できれば画面表示内容をアップデート
・ESP8266側で端子をON/OFFする
・読み込み完了とステータス200を確認できない場合は、「接続できません」と表示する
ボタン操作による制御プログラムの流れ：
・ON/OFFのボタンを押す
・対応するESP8266のON/OFF制御用URLへリクエストを送る
・読み込み完了とステータス200を確認できれば画面表示内容をアップデート
・ESP8266側で端子をON/OFFする
・非接続中のボタンを押しても反応せず「操作できません」と表示
結局のところ、スイッチのON/OFFの仕組みよりも、ON/OFF状態を画面に反映させるためのプログラムにかなり時間がかかってしまいました。
今回の場合はJavaScriptで非同期通信を行っているため、コマンドを発したタイミングとその処理が終了するタイミングがずれるので、値がnullになってしまったりと、エラーのでる原因を見つけるのに結構手間がかかりました。ようやく非同期通信の仕組みがわかってきたという感じです。
以下がHTML、CSS、JavaScriptのプログラム：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Speech API</title>
</head>
<body id="bg">
<div class="title" id="status">[音声認識開始]</div>
<div class="api"><p id="api">COM: 音声入力して下さい</p></div>
<div class="you"><p id="you">YOU: (認識された音声)</p></div>
<div class="btn" id="fluo_on" onclick="buttonClick(0)">蛍光灯: ON</div>
<div class="btn" id="fluo_off" onclick="buttonClick(1)">蛍光灯: OFF</div>
<div class="btn" id="bed_on" onclick="buttonClick(2)">寝室: ON</div>
<div class="btn" id="bed_off" onclick="buttonClick(3)">寝室: OFF</div>
<div class="btn" id="air_on" onclick="buttonClick(4)">エアコン: ON</div>
<div class="btn" id="air_off" onclick="buttonClick(5)">エアコン: OFF</div>
<div class="btn" id="wc_on" onclick="buttonClick(6)">トイレ: ON</div>
<div class="btn" id="wc_off" onclick="buttonClick(7)">トイレ: OFF</div>
<style type="text/css">
body{
text-align:center;
font-family: 'Helvetica',sans-serif;
color:#fff;
margin:0px;
padding:0px;
background-color:#fff;
}
.title{
width:100%;
background-color:#fa8;
margin:0px;
padding:2% 0% 2% 0;
}
.api{
text-align: left;
width:96%;
background-color:#e75;
padding:2%;
margin:1% 0 0 0;
}
.you{
text-align: left;
width:96%;
background-color:#d66;
padding:2%;
margin:1% 0 0 0;
}
.btn{
float:left;
background-color:#aaa;
padding:3% 0px;
margin:1% 1% 0 1%;
width:48%;
}
.btn:hover{
opacity: 0.8;
cursor: pointer;
}
</style>
<script type="text/javascript">
var flag_speech = 0;
var youAns=[/^(?!.*(オフ|ない)).*(?=蛍光灯).*(?=(オン|on|音|つけ|付け)).*$/,
/^(?!.*(オン|ない)).*(?=蛍光灯).*(?=(オフ|off|切|消)).*$/,
/^(?!.*(オフ|ない)).*(?=寝室).*(?=(オン|on|音|つけ|付け)).*$/,
/^(?!.*(オン|ない)).*(?=寝室).*(?=(オフ|off|切|消)).*$/,
/^(?!.*(オフ|ない)).*(?=エアコン).*(?=(オン|on|音|つけ|付け)).*$/,
/^(?!.*(オン|ない)).*(?=エアコン).*(?=(オフ|off|切|消)).*$/,
/^(?!.*(オフ|ない)).*(?=トイレ).*(?=(オン|on|音|つけ|付け)).*$/,
/^(?!.*(オン|ない)).*(?=トイレ).*(?=(オフ|off|切|消)).*$/];
var apiAns=["蛍光灯をオンにしました",
"蛍光灯をオフにしました",
"寝室をオンにしました",
"寝室をオフにしました",
"エアコンをオンにしました",
"エアコンをオフにしました",
"トイレをオンにしました",
"トイレをオフにしました"];
var button_tx=["蛍光灯: ",
"蛍光灯: ",
"寝室: ",
"寝室: ",
"エアコン: ",
"エアコン: ",
"トイレ: ",
"トイレ: "];
var html_id=["fluo_on",
"fluo_off",
"bed_on",
"bed_off",
"air_on",
"air_off",
"wc_on",
"wc_off"];
var ip_address=["http://192.168.3.12/",
"http://192.168.3.12/",
"http://192.168.3.13/",
"http://192.168.3.13/",
"http://192.168.3.13/",
"http://192.168.3.13/",
"http://192.168.3.14/",
"http://192.168.3.14/"];
var url_param = [0,0,0,0];
var api_tx="COM: 音声入力して下さい";
var you_tx="YOU: 認識された音声";
//画面ボタンクリック処理
function buttonClick(button_id){
var param_id = parseInt(button_id / 2);
if(url_param[param_id] >= 0){
url_param[param_id]=1-(button_id % 2);
you_tx = "YOU: ボタンで" + apiAns[button_id];
request(html_id[button_id],button_id);
}else{
api_tx = "COM: 非接続中のため操作できません";
you_tx = "YOU: ボタンで" + apiAns[button_id] + "が、操作不可能です"
document.getElementById("bg").style.backgroundColor = '#ebf';
updateHtml();
};
};
//チェックした各種パラメータをセット
function setParam(){
for(var i = 0; i < url_param.length; i++){
checkParam(ip_address[i*2]+html_id[i*2]+"_check",i);
};
};
//非同期リクエストでパラメータを取得
function checkParam(url,index){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
url_param[index] = parseInt(xhr.response);
updateHtml();
}else{
url_param[index] = -1;
updateHtml();
};
};
xhr.open("GET", url, true);
xhr.send();
};
//ボタン操作や音声認識による制御をリクエスト
function request(url, index){
var req_url = ip_address[index] + url;
if(url_param[parseInt(index/2)] >= 0){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
api_tx = "COM: " + apiAns[index];
updateHtml();
document.getElementById("bg").style.backgroundColor = '#fff';
}else{
api_tx = "COM: 接続できません";
updateHtml();
document.getElementById("bg").style.backgroundColor = '#eef';
};
};
xhr.open("GET", req_url, true);
xhr.send();
}else{
api_tx = "COM: 現在、接続していませんよ";
updateHtml();
document.getElementById("bg").style.backgroundColor = '#ebf';
};
};
//HTML画面表示アップデート
function updateHtml(){
for(var i=0;i<url_param.length;i++){
if(url_param[i] == 1 ){
document.getElementById(html_id[i*2]).innerHTML=button_tx[i*2]+"ON";
document.getElementById(html_id[i*2+1]).innerHTML=button_tx[i*2+1]+"OFF";
document.getElementById(html_id[i*2]).style.backgroundColor = '#c2b';
document.getElementById(html_id[i*2+1]).style.backgroundColor = '#999';
}else if(url_param[i] == 0){
document.getElementById(html_id[i*2]).innerHTML=button_tx[i*2]+"ON";
document.getElementById(html_id[i*2+1]).innerHTML=button_tx[i*2+1]+"OFF";
document.getElementById(html_id[i*2]).style.backgroundColor = '#999';
document.getElementById(html_id[i*2+1]).style.backgroundColor = '#c2b';
}else{
document.getElementById(html_id[i*2]).innerHTML=button_tx[i*2]+"[非接続]";
document.getElementById(html_id[i*2+1]).innerHTML=button_tx[i*2+1]+"[非接続]";
document.getElementById(html_id[i*2]).style.backgroundColor = '#ccc';
document.getElementById(html_id[i*2+1]).style.backgroundColor = '#ccc';
};
};
document.getElementById("api").innerHTML=api_tx;
document.getElementById("you").innerHTML=you_tx;
};
//ここから音声認識処理
function vr_function() {
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var rec = new webkitSpeechRecognition();
rec.lang = 'ja-JP';
rec.interimResults = false;
rec.continuous = true;
rec.onstart = function() {
document.getElementById('status').innerHTML = "[ 認識中 ]";
};
rec.onerror = function() {
document.getElementById('status').innerHTML = "[ エラー ]";
if(flag_speech == 0){
vr_function();
};
};
rec.onsoundend = function() {
document.getElementById('status').innerHTML = "[ 停止中 ]";
vr_function();
};
rec.onresult = function(event) {
var results = event.results;
for (var i = event.resultIndex; i < results.length; i++) {
if (results[i].isFinal){
var youSaid = results[i][0].transcript;
for(var j=0;j<youAns.length;j++){
if(youSaid.match(youAns[j])){
var param_id=parseInt(j/2);
if(url_param[param_id] >= 0){
url_param[param_id]=1-(j%2);
};
you_tx = "YOU: " + youSaid;
request(html_id[j], j);
break;
}else{
document.getElementById("api").innerHTML ="COM: 音声入力をどうぞ!";
document.getElementById("you").innerHTML ="YOU: " + youSaid;
document.getElementById("bg").style.backgroundColor = '#fc9';
};
};
vr_function();
}else{
document.getElementById('you').innerHTML = "[解析中]:" + results[i][0].transcript;
flag_speech = 1;
};
};
};
flag_speech = 0;
document.getElementById('status').innerHTML = "[ 起動中 ]";
rec.start();
};
window.onload = function() {
setParam();
vr_function();
};
</script>
</body>
</html>
尚、Web Speech API（途切れなくする方法）は、こちらを参考にしました。
追記：
実は上記の途切れなくする方法だと、スマホChromeでは繰り返しているうちにエラーが出てフリーズしてしまうので、その後改良してエラーなしで動作するようになりました（まとめのページ中ほどに書いてあります）。
以下が、ESP8266のプログラム（複数あるうちの一つ）：
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>
#define ledPin 2
#define relayPin 16
const char* ssid = "*****";
const char* password = "*****";
const char* reqHost = "192.168.3.13";
String webPage = "";
String fluo_param="0";
ESP8266WebServer server(80);
void setup(void){
webPage="<html><head><meta charset='utf-8'><title>WIFI SWITCH</title></head><body>";
webPage+="<div style='text-align:center; font-size:30px;'>";
webPage+="<a href='/fluo_on'><button>蛍光灯: ON</button></a><br/>";
webPage+="<a href='/fluo_off'><button>蛍光灯: OFF</button></a><br/>";
webPage+="<a href='/bed_on'><button>寝室: ON</button></a><br/>";
webPage+="<a href='/bed_off'><button>寝室: OFF</button></a><br/>";
webPage+="<a href='/air_on'><button>エアコン: ON</button></a><br/>";
webPage+="<a href='/air_off'><button>エアコン: OFF</button></a><br/>";
webPage+="<a href='/wc_on'><button>トイレ: ON</button></a><br/>";
webPage+="<a href='/wc_off'><button>トイレ: OFF</button></a><br/>";
webPage+="</div></body></html>";
pinMode(ledPin, OUTPUT);
pinMode(relayPin, OUTPUT);
Serial.begin(115200);
delay(500);
WiFi.begin(ssid, password);
Serial.println("");
while (WiFi.status() != WL_CONNECTED) {
delay(5000);
Serial.print(".");
}
WiFi.config(IPAddress(192,168,3,12),IPAddress(192,168,3,1),IPAddress(255,255,255,0));
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", [](){
server.send(200, "text/html", webPage);
});
server.on("/fluo_on", [](){
server.send(200, "text/html", webPage);
digitalWrite(ledPin, HIGH);
fluo_param="1";
delay(1000);
});
server.on("/fluo_off", [](){
server.send(200, "text/html", webPage);
digitalWrite(ledPin, LOW);
fluo_param="0";
delay(1000);
});
server.on("/fluo_on_check", [](){
server.send(200, "text/html", fluo_param);
delay(1000);
});
server.on("/bed_on", [](){
server.send(200, "text/html", webPage);
http_request(reqHost,"/bed_on");
delay(1000);
});
server.on("/bed_off", [](){
server.send(200, "text/html", webPage);
http_request(reqHost,"/bed_off");
delay(1000);
});
server.on("/air_on", [](){
server.send(200, "text/html", webPage);
http_request(reqHost,"/air_on");
delay(1000);
});
server.on("/air_off", [](){
server.send(200, "text/html", webPage);
http_request(reqHost,"/air_off");
delay(1000);
});
server.on("/wc_on", [](){
server.send(200, "text/html", webPage);
http_request(reqHost,"/wc_on");
delay(1000);
});
server.on("/wc_off", [](){
server.send(200, "text/html", webPage);
http_request(reqHost,"/wc_off");
delay(1000);
});
server.begin();
Serial.println("HTTP server started");
}
void http_request(const char* host, String url){
WiFiClient client;
const int httpPort = 80;
if (!client.connect(host, httpPort)) {
Serial.println("connection failed");
return;
}
client.print(String("GET ") + url + " HTTP/1.1\r\n" +
"Host: " + host + "\r\n" +
"Connection: close\r\n\r\n");
unsigned long timeout = millis();
while (client.available() == 0) {
if (millis() - timeout > 5000) {
Serial.println("Client Timeout!");
client.stop();
return;
}
}
}
void loop(void){
server.handleClient();
}
fluo_paramというのが、ESP8266内における蛍光灯のON/OFF状況の変数です。ONのとき"1"、OFFのとき"0"で、フィードバック用URLである/fluo_on_checkにリクエストがくると、そのレスポンスとしてfluo_paramの値（"0"か"1"）をブラウザへ返します。
その他は前回とほぼ同じで、仮にこのESP8266のIPアドレスにアクセスしてもボタン操作できる画面（音声認識なし）が表示されます。このESP8266から他のESP8266（他のIPアドレス）へもリクエストを送ることができるので、他のESP8266を制御することも可能です。おそらくメインサーバからそれぞれのESP8266を制御することになると思うのですが、基本的にどのESP8266からであっても接続されている全てのESP8266の制御が可能になっています。
追記：
その後、非接続のESP8266に対するボタン操作や音声入力した場合の処理や表示についても追加しておきました。こういったものは、操作するたびに矛盾する処理が見つかるのできりがありません。
関連：
音声認識Wifiスイッチ/ESP8266使用（まとめ）についてはこちら。
