このサイトはアフィリエイト広告（Amazonアソシエイト含む）を掲載しています。 M5Stack

UIFlow2：WebServerの作り方 その１（基本編）

今回は、UIFlowでWebサーバーを構築する方法について解説します。

この記事では、最も基本的なWebサーバーの例として、ブラウザからアクセスした際に「Hello M5」と表示されるサーバーの作成方法に焦点を当てて解説します。
より実用的な例については、別の記事で詳しく説明します。

関連記事
UIFlow2：WebServerの作り方 その２｜変数の値を表示

Contents
  1. WebServer作成のフロー概要
  2. WebServer作成の準備
  3. Web Serverプログラムで使用する関数を作成
  4. Web Serverプログラム　Setupブロックの詳細
  5. Web Serverプログラム　Loopブロックの詳細
  6. WebServerの作り方（基本編）まとめ

WebServer作成のフロー概要

WebServer（基本）のフロー

フローの完成形を示します。

プログラムの流れは次の通り。

Setupブロック

  • 変数を定義（関数：SetVariables）
  • WiFiに接続（関数：ConnectWiFi）
  • Tcpサーバーの設定（TCP Server start）

Loopブロック

  • クライアントからのソケットの待ち受け
  • データのやりとり
  • ソケットのクローズ

WebServer（基本）の実行結果

ブラウザからM5StackのIPアドレスにアクセスすると

Hello M5

と表示します。

UIFlow2で、WebServerのプログラムを作成していこう！

WebServer作成の準備

今回はM5Stack AtomS3を使ってプログラミングしていきます。

UIFlow2を使用してWebサーバーを構築するためには、必要なモジュールの設定が必須です。

WebServerを作るために、TCPモジュールとFileIOモジュールを追加します。

①UIFlowのメイン画面左下のSoftwareをクリック

②ソフトウェアモジュールを追加する

次のダイアログが開いたら
TCP、FileIOを選択して、Confirmをクリック

③追加したモジュールの確認

追加されたモジュールはUIFlow2の左下に表示されます。

Web Serverプログラムで使用する関数を作成

Setupブロックに配置した関数について、以下に順に説明します。

変数の設定（SetVariables）

ip、subnet、gateway、dns、ssid、passwordなどプログラム内で使う変数の初期値を設定します。
設定する値は、ご自分の環境に合わせてください。

WiFi接続（ConnectWiFi）

WiFiに接続するコードは次の通りです。
主にTCPモジュールのブロックを用いて構成します。

wlan.ifconfig((ip,subnet,gateway,dns))

このコードについては、専用のブロックがないため、『System』のを使用します。

WiFI接続の詳細について知りたい方はこちらの記事も参考にしてください。

関連記事
UIFLow2：固定IPでWiFi接続する

HTMLファイルの読み込み（ReadHTML）

Webサーバで表示するためのHTMLは、ブロックで記述すると扱いが難しいため
HTMLファイルを作成することにします。

ファイルの読み書きは、FileIOモジュール内のブロックを用いて構成します。

今回紹介するプログラム例では、index.htmlというHTMLファイルを作り、M5Stackに転送します。

UIFlowを使ってファイルを転送する手順は次の通り。

  1. HTMLファイルを作成する
  2. UIFlowを使ってM5Stackにファイルを転送する
  3. UIFlowでファイルを読込のプログラムを作成

HTMLファイルを作成する

VSCodeなどのエディターを使ってHTMLファイルを作成します。
例として『Hello M5』を表示する例を示します。
ファイルを編集後、ファイル名をindex.html としてファイルを保存します。

index.htmlの内容

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<h1>Hello M5</h1>  
</body>
</html>

UIFlowを使ってM5Stackにファイルを転送する

M5Stackを接続して、Web Terminalを開きます。
Fileをクリックします。

ダイアログが開くのでSend File to Hereをクリック。
先程作成した『index.html』を選択します。

Confirmをクリックすると、ファイル転送が完了します。

UIFlowでファイル読込の関数 ReadHtmlを作成

プログラムの流れは以下の通り。

  1. htmlファイルを読込モードでオープンする
  2. 変数 html にファイルの内容を保存
  3. ファイルをクローズする

Web Serverプログラム　Setupブロックの詳細

先に作った次の２つの関数を配置します。

  • SetVariables
  • ConnectWifi

次にTCPサーバーの設定を行います。

TCP Serverの設定

TCP Serverの設定は、TCP server startブロックを使います。

IP address ・・・ M5stackのIPアドレス

port ・・・　通常は80を指定します。

listen　・・・　Serverに接続できるクライアント数を指定

Web Serverプログラム　Loopブロックの詳細

次にLoopブロックの内容について解説します。

Loopブロックの処理内容

  • クライアントからのソケットの待ち受け
  • データのやりとり(recive と send)
  • ソケットのクローズ

順番に見ていきましょう。

accept は クライアントからの接続要求を受け入れるコマンドです。

Pythonで記述すると次のように書けます。

Python
conn_info = tcps.accept()

accept() は クライアントの接続があるまで処理を止めて待機する命令です。（これをブロッキングといいます）

外部からアクセスがあるまで、プログラムはこの場所で停止します。

クライアントから接続があると、変数 conn_info にクライアントの情報が格納されます。
conn_info の中身は、(client_socket , client_address) です。

このブロックで、conn_info に格納された情報が 変数 client_socket　および client_address に格納されます。

client_socketで受信したデータを 変数 request に保存します。

request の中身を確認するために、printブロックで、シリアルモニタに表示します。

関数 ReadHtml で index.html ファイルを読み込んで、そのHTML を client_socketに送信します。

これにより、クライアントであるWeb プラウザに、Index.html の内容が表示されます。

最後に、client_socket をクローズして、ループの最初に戻り、次のrequestがくるのを待ちます。

WebServerの作り方（基本編）まとめ

この記事では、UIFlowを使ってWebServerをつくる方法について解説しました。

UIFlowでIoT機器を開発するときに、Webブラウザでいろいろな情報を表示できると、とても使いやすく役に立つツールになります。

今回紹介した方法を応用して、あなたのIoT機器に活かしていただければと思います。

また、Webサーバの活用例として、M5Stackがもっている変数の値をブラウザに表示する方法について解説します。

気になる方はこちらの記事も参考にしてください。

関連記事
Webサーバーの作り方｜変数の値を表示する

-M5Stack