M5Stackで取得したセンサー値や変数の中身を、スマホやPCのブラウザから見られたら便利だと思いませんか？
UIFlow2では、そんな仕組みを構築することも可能です。
この記事では、UIFlowを使ってWebサーバーを立ち上げ、変数の値を表示する方法を解説していきます。
ブロックを組むだけで、あなたのM5StackがWebページを配信するIoTデバイスになります！
Webサーバー（変数を表示）のフロー
プログラムの流れは次の通りです。
Setupブロック
- 変数を定義（関数：SetVariables）
- WiFiに接続（関数：ConnectWiFi）
- Tcpサーバーの設定（TCP server start）
- ブロッキングモードの設定
Loopブロック
- ボタンクリックでカウントアップ（関数：CountUp）
- WebPageの表示
- 100msecで繰り返し
画面表示
WebServer（変数表示）の実行結果
ボタンをクリックすると、変数がカウントアップします。
Webページでもカウント値を確認することができます。
Webサーバー（変数を表示）フローの詳細
Setupブロック
関数：SetVariables
ネットワーク関連の変数 および、今回のテストアプリで使うカウント値用の変数 count に初期値を設定します。
ネットワーク関連の変数には、それぞれの環境に応じたパラメータを設定してください。
関数：ConnectWiFi
WiFiに接続する処理を行います。
このフローの詳細についてはこちらの記事を参考にしてください。
TCP server start
TCP server start ブロックに値を設定して、TCP server をスタートさせます。
- IP address : TCPサーバーのIPアドレス（M5StackのIPアドレス）
- port : 通常は80番を使用
- listen : 接続できるクライアントの数
TCP serverのブロッキングモードは False にします。（デフォルトは true ）
Loopブロック
関数：CountUp
この関数では、カウント値のカウントアップを実行します。
- Aボタンがクリックされたかどうかを判断
- クリックされたら、変数 count に 1 を加算
- ラベルに現在のカウント値を表示
関数：LoopWebpage
関数：LoopWebpage では、TCPクライアントからの接続を待ち受けて、HTMLを返します。
関数 ReadHTMLで、index.html ファイルを読み込みます。
詳細については UIFlow2：WebServerの作り方（基本編）を参考にしてください。
関連記事
UIFlow2：WebServerの作り方（基本編）
基本編との違いは、HTMLの内容と、変数 count の現在値を表示する点です。
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>
<p>Count:{{count}}</p>
</body>
</html>
10行目が、変数 count を表示する部分です。
後で、文字列置換するため、{{ }} をつけておきます。
ここでは、javascriptなどを使わずにHTMLだけで変数を表示してみます。
このブロックで、HTMLの中の{{count}} を 変数と置換することで、変数の値を表示します。
ブロッキングモードについて
UIFlow2のsetupブロックでは、ブロッキングモード（blocking）をTrueまたはFalseに設定することができます。
でクライアントからのアクセスを待受けますが、ブロッキングモードの設定によりアクセス待ちの動作が変わります。
- True（ブロッキング） :
クライアントからのアクセスがあるまで、このブロックでプログラムの実行が停止します。 - False （ノンブロッキング）：
クライアントからのアクセスがない場合、すぐに次の処理に進む（またはエラーを返す）ようになります。
ブロッキングモードがTrueの場合、クライアントのアクセスを待っている間、他の処理がすべて止まってしまいます。
たとえば、画面表示の更新やセンサーデータの取得など、Webサーバー以外の処理が進まなくなります。
一方、ブロッキングモードをFalseにすると、クライアントからのアクセスがなくても処理が止まらず、他のタスクを並行して実行することができます。
プログラムの実行結果
ボタンをクリックするたびに、カウント値が１づつ増えていきます。
ディスプレイには、カウント値をリアルタイムに表示します。
この時、ブラウザからM5Stackにアクセスすることで、現在値をブラウザに表示します。
ブラウザの更新ボタンを押すことで、画面表示が最新の状態に更新します。
WebServerの作り方｜変数の値を表示のまとめ
今回は、Webサーバーを使って変数の値をブラウザ上に表示する方法をご紹介しました。
この方法は、M5StackをIoTデバイスとして活用する際に、センサーのデータや現在時刻などをリアルタイムに確認できる便利なテクニックです。
状態の「見える化」やモニタリング機能を追加したいときに、ぜひ活用してみてください。
また他の記事では、Webサーバーを使って設定値の入力や確認をする方法についても解説していきます。