CM4Stack版Local UIFlow
https://scrapbox.io/files/6471ef19348028001bc367a2.svg
2023/12/10: M5Stack Advent Calendar 2023
by むとうたけし(/610t/610t)
この記事は、M5Stack Advent Calendar 2023の10日目のエントリとして書かれました。
Local UIFlowってなぁに?
Local UIFlowは、インターネットに接続できない環境でもUIFlowが使えるようにするしくみです。
詳しくは、Local UIFlowの自由研究をご覧ください。
システム構成
https://scrapbox.io/files/6471ef19348028001bc367a2.svg
CM4Stack用のLocal UIFlow(以下、CM4Stack版)の構成は上の図の様になります。
デフォルトでは、CM4StackのIPアドレスは192.168.12.1に固定されており、ここでUIFlowを実現するための様々なサーバー群が起動しています。
UIFlowにアクセスするためには http://flow.m5stack.com/ (httpsではありません)にアクセスしますが、この時DNSでflow.m5stack.comを192.168.12.1と見せることで、実際にはCM4Stack上のUIFlowを使わせます。
Local UIFlow上には、動作させるために、以下の様なサーバが動いています。
UIFlowサーバ: UIFlow が動作するために必要
DNSサーバー: flow.m5stack.comに対して、Local UIFlowの192.168.12.1を返すために必要
DHCPサーバー: UIFlowクライアントやM5StackにIPアドレスを割り当てるために必要
各サーバのポート番号の詳細などは、「稼働しているサーバー類」で説明します。
CM4Stack版では、無線LAN設定を行うことで、インターネットへの接続性も確保することができます。
この時、flow.m5stack.comなどのUIFlowで利用するアドレス以外へのアクセスが可能になります。
GUI
https://scrapbox.io/files/657102668437a1002cd9fadb.svg
GUIは上の図のようになっており、以下のような項目からなっています。
ON/OFF: インターネット接続の有効化/無効化スイッチ
Online: オンラインになっている数
Push: ?
Load: ロードアベレージ
Mem: メモリー使用量
WiFiの設定
CM4Stack版では、以下のようにWi-Fiの設定を行うインタフェースが用意されています。
Local UIFlowサーバーからインターネットへの接続のための設定は、 http://m5stack_wifi.config/ から可能です。
この設定をしておくと、Local UIFlowネットワークからインターネットへのアクセスができるようになります。
この場合でもUIFlowは、Local UIFlowのものが利用されます。
https://gyazo.com/c4117e7ab314dc07da4c7abf7f1f8aaa
稼働しているサーバー類
CM5Stack版では、以下のようなサーバーが稼働しています。
Local UIFlowサーバー
HTTPサーバー(nginx)
DNSサーバー: dnsmasq
設定ファイル: /etc/dnsmasq.conf
DHCPサーバー: udhcpd
設定ファイル: /etc/udhcpd.conf,/etc/default/udhcpd.config
flow.m5stack.comなどは以下のようなサーバー群で置き換えられます。
flow.m5stack.com http://192.168.12.1:443/
/home/uiflow-local/docker-volumes/website
api.m5stack.com http://192.168.12.1:5050/
ezdata.m5stack.com http://192.168.12.1:11888/
/home/uiflow-local/docker-volumes/ezdata-debugger/
flow-remote.m5stack.com http://192.168.12.1/
/home/uiflow-local/docker-volumes/remote-web
m5stack_wifi.config http://192.168.12.1:8000/
??? http://127.0.0.1:15000/
Local UIFlow公開版とのCM4Stack版に関する考察
Local UIFlowの自由研究と今回の記事とを比較して、両者の相違点をあげてみたいと思います。
Local UIFlow公開版とのCM4Stack版では、主に以下のような部分が異なります。
公開状態
Local UIFlow公開版: 2023/12/06に一般公開
CM4Stack版: アルファテスター公開のみ
サーバーへのアクセス方式
Local UIFlow公開版: flow.m5stack.com の名前解決を行う
CM4Stack版: IPアドレスで直接指定
ネットワークの構成
Local UIFlow公開版: DHCPサーバーの割り当てたIPアドレスで使用可能
CM4Stack版: 192.168.12.0/24固定 (サーバーは192.168.12.1)
提供される環境
Local UIFlow公開版: Linux/arm(32bit OS)でXが使える環境をはじめ、各種OS用が提供されている
CM4Stack版: CM4Stack用の専用インタフェースあり
インターネット接続性の確保
Local UIFlow公開版: 無線LANルーターでインターネット接続を用意する
CM4Stack版: CM4StackのWiFi側にインターネット接続を用意する
無線LANルータの必要性
Local UIFlow公開版: 必要
CM4Stack版: DHCPサーバーを自前で用意できれば不要
以上の情報から考えると、各バージョンは以下のように使いわけができると思いますが、CM4Stack版は一般公開されていないため、実際にはLocal UIFlow公開版一択になります。
Local UIFlow公開版
色々なOSでLocal UIFlowサーバーを運用したい時
固定されたIPネットワークではなくて、柔軟にネットワークを構成したい場合
CM4Stack版
M5Stack側でサーバーをデフォルト(flow.m5stack.com )から変更したくない時
専用のインターフェース画面が必要な時
ドキュメント
CM4Stack版用に用意されている公式ドキュメントとしては、以下のインストールドキュメントがあります。
CM4StackへUIFlow.localをインストールする手順(Windows)
CM4Stack のセットアップと構成
作者:I'm 610t!!
https://gyazo.com/29d993247bf7e8192f05cbc215263a1a
全部の情報: /610t/610t (無糖Teaと読むと良いかも)
むとうたけし(武藤武士)
専業主夫(53歳)＠奈良
所属コミュニティ
M5Stack User Group Japan
CoderDojo奈良
関西*BSD ユーザ会
アカウント一覧
twitter: @610t http://twitter.com/610t
Github: 610t https://github.com/610t
YouTube:https://www.youtube.com/@610t
#UIFlow #CM4Stack