ESPr Developerでインターネット接続する

インターネット回線接続
インターネット回線経由で接続する方法として、今回、レンタルサーバーを介してデータのやりとりを行うこととします。他に良い方法があるのだと思いますが、ネット等で私なりに調べて今回の方法になんとか辿りつきました。良い方法があれば改善するつもりですが、とりあえず現状の方法を整理したいと思います。

プログラム構成
プログラム構成を下の図に示します。AP接続、STA接続ではESPr Developerのプログラムによって生成されたHTMLをスマホ等のブラウザーで表示していましたが、今回はレンタルサーバー上のPHPプログラム（ESPR_POST_LED.php）によって生成されたHTMLを表示します。
スマホ等の端末から‘ON’または‘OFF’が入力されると、PHPプログラム（ESPR_POST_LED.php）はテキストファイル（‘ESPR_POST.txt’）に‘SW_ON’、‘SW_OFF’を上書きします。
一方、ESPr Developerは一定の時間間隔でレンタルサーバー上の別のPHPプログラム（espr_post.php）を起動します。PHPプログラム（espr_post.php）は、テキストファイル（‘ESPR_POST.txt’）の内容を読み出し、ESPr Developerに‘ON’または‘OFF’を送信します。
ESPr Developerは返信内容によって、LEDをON／OFFします。

レンタルサーバー
今回、使用しているレンタルサーバーのプランは、ロリポップのライトプランです。（月額２５０円～）　WordPressの使い方なども勉強してみたいと思っていましたので、PHP（CGI版）を使用できることを確認し加入してみました。後からスタンダードプランへの変更も出来るみたいですので、まずはスモールスタートするのには良いかと思います。本サイトもライトプランのWordPressを簡単インストールして作成しています。
また、別途費用はかかりますが、今回独自ドメインをムームードメインで取得しました。ロリポップドメインというのも無料で使えるのですが、長いランダムな英数字の文字列でちょっと扱いにくいと感じました。ムームードメインの独自ドメイン取得は格安で取得できるものもある様ですが、次年度の更新価格が急に高くなっているものもあり、注意した方がよいと感じました。
ロリポップについては、月々２５０円でいろいろな学びの環境を得られると思うと十分満足しています。

取得した独自ドメインと公開用フォルダーをロリポップユーザーサイトで設定します。私の認識では公開フォルダー名は外部から判らない様になっている様です。公開フォルダー下に今回のプログラム用の専用フォルダーを作成し、プログラムを格納します。

（画像引用：ロリポップ独自ドメイン設定画面）

PHPプログラム①（ESPR_POST_LED.php）
‘ESPR_POST_LED.php’は、スマホ等の端末で操作する人のクリックに応じてボタン色の変更、テキストファイル書き込みを行うサーバ側で動くプログラムです。テキストファイル書込機能は無効ですが、こちらデモリンクURLから操作画面を確認出来ます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>LED_CONT_VIA_HTTP</title>
<meta name=viewport content=width=100>
<style>
body {line-height: 100%;}
p { font-size: 35%; }

</style>
</head>


<body>
<?php

echo "<P>HTTP通信 LED点灯確認</P>";

// LED ON / OFF ボタンのクリック結果を受け取る
$chk_LED=$_POST["LED_SW"];
	
if($chk_LED=='LED ON'){ 
	// LED ONが押された時 →$flg_on=true，ﾌｧｲﾙ「ESPR_POST.txt」に"SW_ON"を書き込む
	$flg_on=true ; file_put_contents( "（注：パスを設定する）/ESPR_POST.txt" ,"SW_ON");
}else{ 	
	// LED OFFが押された時 →$flg_on=true，ﾌｧｲﾙ「ESPR_POST.txt」に"SW_OFF"を書き込む
	$flg_on=false; file_put_contents( "（注：パスを設定する）/ESPR_POST.txt" ,"SW_OFF"); 
}

// echo "<BR>";

// LED ON スィッチの状態を押されたボタンによって変更する
echo "<form action = '' method = 'post'>";
	if($flg_on){	
		echo "<input type = 'submit' name='LED_SW' value='LED ON' style='background-color:red'>";
	}else{		
		echo "<input type = 'submit' name='LED_SW' value='LED ON' style='background-color:silver'>"; 
	}
echo "</form>";

echo "<BR>";

// LED OFF スィッチの状態を押されたボタンによって変更する
echo "<form action = '' method = 'post'>";
	if($flg_on){	
		echo "<input type = 'submit' name='LED_SW' value='LED OFF' style='background-color:silver'>";
	}else{		
		echo "<input type = 'submit' name='LED_SW' value='LED OFF' style='background-color:blue'>"; 
	}
echo "</form>";

echo "<BR>";

usleep(200000); //1000000=1秒

?>

</body>
</html>

‘<?php’ ～ ‘?>’ で囲まれた部分（行番16～57）が、PHPプログラムです。行番33～40は、「LED ON」ボタンを形成し、クリックされると同じプログラムを再度呼び出します。再呼び出しされた時、行番21の‘$chk_LED=$_POST[“LED_SW”];’によって$chk_LED には押されたボタンごとに異なる値が設定されます。行番36に”<input type = ‘submit’ name=’LED_SW’ value=’LED ON’ style=’background-color:red’>”とありますが、name はボタン名、valueは値なので、行番21は、‘LED_SW’というボタンの値を変数$chk_LEDに格納する処理を行っています。この場合、変数には‘LED ON’が格納されます。
同じ様に行番44～51は、「LED OFF」ボタンを形成します。このボタンがクリックされた時には、変数$chk_LEDには‘LED OFF’が格納されます。
変数$chk_LEDの値を判定して、行番23～29でテキストファイルに書き込みします。この時、‘$flg_on’ も値によって True / False 切り替え、行番35，行番46で判定し、ボタンの色を変更します。
行番25，28でテキストファイル書き込みをしますが、テキストファイルのあるフォルダパスを設定する必要があります。

PHPプログラム②（espr_post.php）
このプログラムはESPr® Developerからのトリガーによって起動し、テキストファイルの値を読み込み、値によって‘ON’／‘OFF’を返信します。本プログラムはテキストファイルと同じフォルダ内に配置するので、行番14でファイル読み込みしますが、ファイル名のみでフォルダパスは設定はしていません。

<?php
	// 日時取得
	$timestamp = date('Y-m-d H:i:s');

	// post送信のBodyすべて取得
	$entireBody = file_get_contents('php://input');		

	// 取得内容をファイルに書込
	//（動作に全く関係しないが、post送信されたﾃﾞｰﾀを受信出来ることの確認用）
	file_put_contents("ESPR_ON_OFF_HISTORY.txt",$timestamp.','.$entireBody);
	
	// 'ESPR_POST.txt'の内容を読み込む
	// これは、ブラウザーで“SW_ON”， "SW_OFF"を書き込んだファイル
	$contents = file_get_contents('ESPR_POST.txt');

	// “SW_ON”時→“ON”、“SW_OFF”時→“OFF”を返信する
	if($contents=='SW_ON'){
		echo 'ON';
	}else{
		echo 'OFF';
	}
?>

ESPr Developer プログラム
行番3，4 でWiFiルータ等のアクセスポイント接続用の SSID，ﾊﾟｽﾜｰﾄﾞを設定します。行番6 では接続サーバードメイン、行番7 では、フォルダーパス＋‘/espr_post.php’ を設定します。
プログラム初回設定（‘setup’）は、アクセスポイントとのSTA接続と基本的には同じです。サーバー監視ループ（‘loop’）では、行番52～65の変数 host , path で指定したドメインのプログラムを呼び出しています。行番67 ～ 75 でサーバーからの応答を待ち、行番77～82でサーバーからの返信内容を受け取ります。
サーバーからの返信にはヘッダーも含まれるので、行番88でボディ部分の位置を特定し、行番89でデータ部分（最初の２文字）を取得します。
行番98～111では、受け取ったデータ部分の値によって、LEDのON／OFF出力を行っています。

#include <ESP8266WiFi.h>

const char* ssid = "ｱｸｾｽﾎﾟｲﾝﾄ SSID";              // 接続アクセスポイントのSSID         
const char* password = "ｱｸｾｽﾎﾟｲﾝﾄﾊﾟｽﾜｰﾄﾞ";        // 接続アクセスポイントのパスワード   
const int httpPort = 80 ; 
const char* host = "kats-eye.net";                // 接続サーバードメイン名
const char* path = "ﾌｫﾙﾀﾞﾊﾟｽ/espr_post.php";      // 呼び出すプログラムパス
const int led = 13;                               // LED用出力端子番号
const int s_p = 4;                                
int loopCnt=0;  

String body = "OK";
String rtn ="";

// 初回設定
void setup() {
    pinMode(led, OUTPUT);                         // 13pinを出力に設定
    digitalWrite(led, 0);                         // 13pin出力OFF
    delay(500);
    
    Serial.begin(115200);                         // シリアルモニタ出力速度設定
    Serial.println("");                           // シリアルモニタ改行

    Serial.println() ; Serial.println() ;
    Serial.print("Connecting to ") ; Serial.println(ssid);

    WiFi.mode(WIFI_STA);                          // STAﾓｰﾄﾞ設定
    WiFi.begin(ssid, password);                   // SSID,パスワードを指定してアクセスポイント接続   

    // Wi-Fi接続確認
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFiに接続しました。");  
    Serial.print( "IPアドレス： "); 
    Serial.println( WiFi.localIP());
    Serial.print( "ゲートウェイ： "); 
    Serial.println(WiFi.gatewayIP());
    Serial.print( "サブネットマスク： "); 
    Serial.println(WiFi.subnetMask());
    Serial.println("");
}

//◆サーバー監視ループ◆
void loop() {
    delay(1500);
    loopCnt=loopCnt+1;

    WiFiClient client;                           // TCP接続用にWiFiClient classを使用する

    // TCP接続確認
    if (!client.connect(host, httpPort)) {       // 外部サーバーに接続
        Serial.println("接続に失敗しました。");
        return;
    }

    // サーバにリクエストを送信(POST)
    client.print(String("POST ") + path + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" + 
               "Content-Length:" + String(body.length())+ "\r\n" + 
               "Connection: close\r\n\r\n" +
               body);
   
    // リクエスト結果受信待ち            
    unsigned long timeout = millis();
    while (client.available() == 0) {
        if (millis() - timeout > 5000) {
            Serial.println(">>> タイムアウトしました。");
            client.stop();
            return;
        }
    }

    // HTTPヘッダを含むデータの読み取り(1文字毎) 
    String raw = "";
    while (client.available()) {
        char c = client.read();
        raw = raw +c;
    }  

    Serial.println("----------------------------------------");
    Serial.println(raw);

    // HTTPヘッダの削除、
    int index = raw.indexOf("\r\n\r\n");         // 改行が２回続く箇所検索（\r\n(='CR+LF')）
    rtn = raw.substring(index+s_p,index+s_p+2);  // ( index + s_p + 1 )から２文字切り出す     

    Serial.print("受信ﾃﾞｰﾀ(byte)：") ; Serial.println( raw.length() ) ;
    Serial.print("ｺﾏﾝﾄﾞ開始：") ; Serial.println( index ) ;
    Serial.print("ｺﾏﾝﾄﾞ内容：") ; Serial.println( rtn ) ;
    Serial.println("") ;
    Serial.print(loopCnt);
    Serial.print(" . ");
 
    if(rtn == "ON"){
        digitalWrite(led, 1);
        Serial.println("POST成功：SW ON");
        body = "ON";
    }else if(rtn == "OF"){
        digitalWrite(led, 0);
        Serial.println("POST成功：SW OFF");
        body = "OFF";
    }else{
        digitalWrite(led, 0);
        Serial.print("通信異常：");
        Serial.println(rtn);
        body = "OFF";
    }

    Serial.println("");                        // 改行
    Serial.println("");
    //WiFi.disconnect();                        // Wifiの切断
  
}

まとめ
ESPr Developer は、特定のWiFi接続環境にある必要はありますが、LEDのON/OFFをコントロールするスマホ側は、インターネット上のレンタルサーバーに接続できる環境にあれば遠隔地であっても携帯回線を利用して制御可能な方法です。
LEDのON／OFFなど、基本的な確認ですが、これからもう少し実用的な実験にトライできるとよいと思っています。