(1)RaspberryPiとタッチディスプレイで自動起動LocalUIFlowサーバーを作る - 環境構築
概要
中学校技術科のプログラミング教材として、自分自身は、ここ3年ほど、M5StickC PlusとUIFlowを使って授業を展開しています。
自分自身が授業を展開する上では何の不都合もない（むしろスムーズ）のですが、校内LANにM5StickC Plusが繋がらない関係で、個人のインターネットWi-Fi環境を持ち込んで授業をする、という、あまりに一般的でなく、他の教員にオススメしにくい状況でした。
しかし、個人的には、M5SticKC Plusは、日本の学習指導要領におけるプログラミング教材として、計測・制御と双方向コンテンツを特に周辺機器を必要とせず、１つの教材で扱えるなど、Arduino、micro:bitより優れている点が多いため、自分以外の教員でも実践できるような環境がつくれればいいと思っていました。
（noteも自分の備忘録を兼ねて、そのためにまとめています）
それが、去年の12/6にLocalUIFlowが公開されたことで、状況が変わってきました。
試用させてもらっていたCM4Stack版のLocalUIFlowでは、生徒用Chromebookの中につながらないものとつながるもの（５分ほど待てばどれもつながるのですが）が存在し、授業で使うには、使い勝手に難があるものでした。他の団体所有のChromebookでは一切起きなかったことなのでおそらく、うちの自治体のChromebookの設定が原因であると考えられました。
公開された正式版をRaspberry Pi 4で実行し、うちの自治体の生徒用Chromebookからアクセスしたところ、特に問題なく使用できたので、これで、光明が見えてきました。
CM4Stackは、学校で購入となると、うちの自治体の基準では単品の価格が一定額を超えると消耗品ではなく備品扱いになる関係で、やや取り回しが悪いです。
その点、Raspberry Pi 4は単品では消耗品扱いになるので、それでLocalUIFlowを構築していけば、別途インターネット環境を用意することなく、広くうちの自治体の技術科の先生方に広めていくことができるのではないかと考えています。
準備物
・Raspberry Pi 4＋5V3A USB Type-C ACアダプタ
・3.5インチ・タッチディスプレイ
・80台さばける無線LANルーター
LocalUIFlow自体の起動は確認できた
ので、Raspberry Pi 4起動時に自動起動させるように設定します。
主には
610tさんの、こちらの記事を参考にしていますが、起動時に「LC_ALL=C」を付与する関係上、autostartで直接起動させるのではなく、シェル実行を介して起動させることにします。
具体的には610tさんが参考に挙げられている
こちらを参考にします。610tさんは、@tonosamart(西田 寛輔)さんの記事を参考に、シェルスクリプトを経由せず、簡略化して自動実行させているのですが、それだとうまくいかないので（＝が２度重なる）、元記事のようにシェルスクリプトを経由させることにします。
また、610tさんは、タッチ操作で、LocalUIFlowの操作や、Raspberry Piの終了を行うために、Raspberry Pi CM4ベースのreTerminalで環境を構築されていますが、reTerminalも結構な、お値段がするので、Raspberry Pi 4+タッチパネルディスプレイで行いました。
手順１ Raspberry Pi4の用意
まずは、Raspberry Pi 4（Raspberry Pi OS 32bit）＋3.5インチタッチパネルディスプレイで正常に起動するようにセットアップします。
私はRaspberry Pi 4 の4GBモデルに8GB microSDを挿して使用しました。
3.5インチタッチパネルディスプレイはOSOYOOのものを使用しました。
タッチパネルディスプレイ同梱の説明書どおりにセットアップすればOKです。
注意点としては、「手順があっていれば正常動作するだろう」と思ってセットアップしたら起動時黒画面のままになったので、動作確認が取れている（はずの）タッチパネル同梱の説明書どおりにやることです。
推奨イメージファイル名が記載されており、設定もひとまず説明書どおりにしたら正常に動きました。
失敗したのは、書き込むイメージファイルの問題か、飛ばしたり変更したりした設定のせいかもしれません。
手順２ LocalUIFlowのインストール
タッチパネルディスプレイが正常に動作するRaspberry Piが用意できたら、
Raspberry Piのターミナルから以下を実行します。
wget https://static-cdn.m5stack.com/resource/software/UIFlow-Local-Server/UIFlow-Local-Server_Linux_arm.tar.gz
mkdir {任意のディレクトリ}
tar zxvf UIFlow-Local-Server_Linux_arm.tar.gz -C {任意のディレクトリ}
sudo apt install ttf-mscorefonts-installerwgetで、M5Stackのページから直接LocalUIFlowのファイルをダウンロードします。Linux arm版です。OSが32bitでないと動かないらしいです（64bitで動かないかどうかは確認してませんが）。
mkdirで任意のディレクトリ名でディレクトリを作成して、tarで、ディレクトリ指定で展開します。圧縮ファイルはディレクトリに入っていないので、ディレクトリ指定で展開しないとファイルの中身をぶちまけるため、注意してください。
※注「ディレクトリ」はWindowsで言う「フォルダ」です
念のためttf-mscorefonts-installerを実行しておきます。（いらないかも）
これで、LocalUIFlowそのものは、実行できるようになっているはずです。
cd {任意のディレクトリ}
LC_ALL=C ./UIFlow.Server.Desktopcdで、LocalUIFlowのインストールディレクトリに入って、LC_ALL=C付きで実行して、LocalUIFlowのGUIが表示されればOKです。
手順３ 自動起動の設定
起動時に実行するautorun.shを作成します。
cd /home/{ユーザー名}/{任意のディレクトリ２}/
nano autorun.sh任意のディレクトリ２にcdで移動し、ファイル名autorun.shを指定してnanoエディタを起動しています（新規作成）。
任意のディレクトリ２は、どこでも構いません。LocalUIFlowのディレクトリでもいいし、そうでなくても構いません。{ユーザー名}直下でもよいでしょう。とにかく、起動時に実行するスクリプトを置いておく場所を決めてください。また、任意のディレクトリ２を新たに作成するのであれば作成してからcdで移動します。
nanoエディタが起動したら、以下のようにautorun.shを作成します。
#!/bin/sh
cd /home/{ユーザー名}/{任意のディレクトリ}/
LC_ALL=C ./UIFlow.Server.Desktopこのときの{任意のディレクトリ}は、LocalUIFlowのディレクトリです。
書いたら、Ctrl+Xでファイルを閉じようとすると、変更を保存するか聞いてくるので、保存して、同名で上書きします。
autorun.shの内容としては、LocalUIFlowのファイルをまとめてあるディレクトリにcdで移動して、./UIFlow.Server.Desktopを実行するということです。
このautorun.shに実行権限を与えます。
chmod +x autorun.sh次に、この作成したautorun.shを起動時に自動実行するように設定します。
cd /home/{ユーザー名}/.config/
mkdir autostart
cd autostart.configディレクトリに移動し、autostartディレクトリを作成、作成したautostartディレクトリに移動します。
nano autostart.desktopnanoエディタが起動するので、
[Desktop Entry]
Exec=lxterminal -e /home/{ユーザー名}/{任意のディレクトリ２}/autorun.sh
Type=Application
Name=LocalUIFLow
Terminal=true先程作成した、autorun.shを起動するように記述します。
先程と同様に、上書き保存します。
これで、Raspberry Pi起動時にautorun.shを実行しにいくようになります。
これで、
Raspberry Pi OSを起動
autostartがautorun.shを起動
autorun.shがLC_ALL=C付きでUIFlow.Server.Desktopを起動
となります。
あとは、LocalUIFlowのGUIで「Start」をタッチパネルディスプレイで押せば起動、「Stop」で停止、Raspberry Pi OSの「Shutdown」を押せば終了処理ができます。LocalUIFlow専用端末の完成、ということになります。
手順４ ルーターの設定
ルーターはCM4Stack版で試用した際の、TP-LinkのAX72を流用しました。製品の仕様としては、80台が同時接続できるので、理論上は、Chromebook40台＋M5Stick C Plus40台で使用できる、はずです。
ルーターのLANポートにLocalUIFlowの走っているRaspberry Pi 4を接続すると、ルーターのDHCPにより、IPアドレスが自動で割り当てられるのですが、これを、固定する必要があります。他の端末からLocalUIFlowにアクセスするには、IP決め打ちでアクセスするので、IPアドレスが変わっては困るのです。
TP-Linkのルーターには、アドレス予約の項目があり、そこで、MACアドレスを元に、IPアドレスを固定できます。下の画像の場合、Raspberry Pi 4のIPアドレスを「192.168.0.253」に固定することで、「http://192.168.0.253:8800」で、LocalUIFlowのWebエディタに接続できるようになります。
ルーターによって設定方法が違うと思いますが、他のルーターでも、LocalUIFlowの走っているRaspberry Pi 4のIPを固定するような設定にすればOKのはずです。
もしくは、DHCPではなく、静的IPを割り当てるのでもよいと思います。今回はルーターにアドレス予約設定があったのでそちらを利用しました。
手順５ M5SticKC Plus側の設定
M5Burnerで、ルーターのWi-Fiに接続できるようにします。
Serverの項目を、設定したLocalUIFlowのIPアドレスにします。私の場合は「192.168.0.253」です。
2024/10/23追記
(6)で後述するDNSサーバーをRaspberry Piに導入する場合、Serverの欄の変更は必要ありません。お手軽にやるのであれば、直接指定すればよいです。
これで、M5SticKC Plusの電源を入れるとルーターに接続しに行って、接続できるようになります。ルーターの電源を入れ、LocalUIFlowを「Start」にした状態でM5SticKC Plusの電源を入れ、いつもと同じように水色（緑色？）になればOKです。
ChromebookなどでルーターのWi-Fiに接続し、「http://（設定したIP）:8800」で接続します。私の場合は「192.168.0.253:8800」です。
簡単なプログラムを転送して動作することを確認しました。
終わりに
環境は構築でき、接続と動作の確認はできましたが、まだ本当に40台さばけるかは不明です。ルーターの仕様としては大丈夫のはずですが、Raspberry Pi 4がそれだけさばけるか、とか、そもそもLocalUIFlowがさばけるのか、とかやってみないと分かりません。
今年度の該当部分の授業は終了しているので、来年度実践してみようと思います。
あと、言語ファイルの差し替えとかもできるようなので、表現を中学生向けに変えたカスタムUIFlowとかにするとよりよくなるかもしれません。
自分の自治体での普及、ということを考えたときには、Raspberry Pi 4での環境構築なので、構築済みmicroSDを複製することで、同じハードウェアを持ったRaspberry Pi 4に環境を移すことができるため、導入のハードルはかなり下がるのではないかと思っています。
次回以降はこちら