M5StickC Plus とUIFlowでプログラミング(3-2) - UIFlow Web版の動作詳細
※UIFlow Web版の動作の詳細を詳しく書き起こしました。(3)の次くらいに入ると思うので(3-2)にしました。(3)は(3-1)に変更しています。(2021/09/12)
(4)以降でも、必要な機能はその都度説明しますが、全体の説明をここでします。したがって、この記事は読み飛ばして(4)に進んでもらっても大きな問題にはならないはずです。
理解を深めるためには読んでおくとよいかもしれません。なお、UIFlowにはデスクトップ版もありますが、UIFlowのWeb版の説明です。
※2021年09月12日の時点（v1.8.4）での説明になります。今後、変更があるかもしれません。長らく下書きだったので画像はちょっと古いです。見た目は一緒なので問題にはなりませんが。
まず、サイトの外観はこんな感じです。
(3-1)で大体のことを説明していますが、ここでは(3-1)で説明していない部分を説明します。
メインメニュー
画面右上部はメインメニューです。メインメニューには、フォーラム、各種ドキュメント、プログラム例、Undu（取り消し）、Redo（やり直し）、プログラムの書き込みや実行、各種設定の項目があります。
記事の執筆時と現時点（v1.11.3）で、メニュー画面に変更が加わっています。現在は、この記事の執筆時にはないメニュー項目もありますが、基本機能として理解ください。(2023/03/04)
１ アカウント（ACCOUNT）
M5 Stack社のアカウントでログインができます。
２ 新規プロジェクト作成（NEW FILE）
新しいプロジェクトを作成します。現在のプロジェクトはクリア
されます。
３ バージョン選択
正式版とベータ版を切り替えます。
４ フォーラム（FORUM）
M5Stack Communityサイトのフォーラムへのリンクです。
５ ドキュメント（DOCS）
M5Stack社のUIFlowドキュメントページへのリンクです。
６ プログラム例（EXAMPLES）
サンプルプログラムです。
７ 取り消し（UNDO）
作業の取り消しができます。
８ やり直し（REDO）
取り消した作業をやり直します。
９ デバイスファイルマネージャー（MANAGER）
現在接続中のM5デバイスに保存されているファイルを操作します。
10 実行（RUN）
プログラムを転送して実行します。
11 ダウンロード（DOWNLOAD）
プログラムを接続中のM5デバイスにダウンロードして実行します。
12 メニュー
・開いた(Open)
保存したプロジェクトファイル（.m5fファイル）を開きます。
・保存する(Save)
現在のプロジェクトをファイル（.m5fファイル）として保存します。
・記録を更新す（UpdeteLog）
更新履歴です。
・設定(Setting)
12のメニューの日本語化が変です。「開いた」は「開く」でしょうし、「記録を更新す」は「更新履歴」辺りが妥当だと思います。まぁ機能が分かっていれば、気にしないでよいと思いますが。
M5StickC Plusの動作モード
M5StickC Plusにおける、UIFlowの主な動作モードは、プログラム書き込みモード（Code）とファイル実行モード（APP List）の２つです。（プログラム書き込みモードと、ファイル実行モードという呼び方は、説明のために便宜上つけた名前で、公式のものではありません）
この他に、アクセスポイントモードと、Setupモードの２つがありますが、それらは一時的なモードで、電源をリセットするとプログラム書き込みモードか、ファイル実行モードのいずれかに移行します。アクセスポイントモードは特殊なモードで、M5StickC Plusをアクセスポイントとして動作させるモードです。キーボード入力を持たないM5StickC PlusにWi-Fi設定を覚えさせるために使用されます。Setupモードは、各種設定を行います。
どちらにしても、プログラムの実行環境として大事なのはプログラム書き込みモードとファイル実行モードです。プログラム書き込みモードのときのみ、プログラムの書き込みを受け付けます。ファイル実行モードは、M5StickC Plusに保存されたPythonのプログラムファイル(.pyファイル)を実行するモードです。このときは、ファイルの書き込みを受け付けません。
メインメニューの10の「実行」と、11の「ダウンロード」は、どちらもプログラムを実行するという点では同じですが、10の「実行」はプログラム書き込みモードで行われ、電源を切るとプログラムの内容は失われるのに対して、11の「ダウンロード」は、Pythonのファイル（.pyファイル）をプログラム書き込みモードで、デバイスに書き込んでから、その書き込んだファイルを、ファイル実行モードに移行して実行します。10の「実行」はモードの移行を伴わないので、押すたびに何度でも書き換わりますが、11の「ダウンロード」は１度書き込むと、自動的にファイル実行モードに移行してしまい、手軽に何度も書き込むことはできません。同じプロジェクトファイル名で更新することはできますが、一旦、プログラム書き込みモードに戻してから書き込まないといけません。
モードの切り替えは、電源を入れて、UIFLowのロゴが表示されている間にボタンA（M5ボタン）を押すことで、設定画面を呼び出して行います。
右側面のボタンBを押す度に、プログラム書き込みモード、設定画面の呼び出し、ファイル実行モードの順に切り替わります。M5StickC Plusの電源を入れて、プログラムが勝手に実行されるようなら、ファイル実行モードです。API KEYが表示されてプログラムの書き込み待ちになるようならプログラム書き込みモードです。
上の画像はプログラム書き込みモードの画像です。Wi-Fiに接続されると真ん中の橙色の画面に、Wi-Fi経由でインターネットに接続されると右側の緑色の画面に変わります。
プログラム書き込みモードには、USB版とWi-Fi版とあります。上の画像では「Cloud」と表示されていますが、これはWi-Fi版です。パソコンとUSBで接続してデスクトップ版UIFLowをインストールして、ファイルを転送する場合はUSB版になります。画面上、ほとんど同じですが、Cloudの部分が、USBに変わります。設定画面からSetupを選んでSetupモードにし、Switch modeで変更します。
写真の「Internet」がプログラム書き込みモードのWi-Fi版、「USB」がプログラム書き込みモードのUSB版、「APP」がファイル実行モードです。
自分がこの辺の動作を理解するのに適切な資料を見つけられず、時間がかかりました。バラバラとした記述はインターネット上で見つかるのですが、系統立った説明は見つかりませんでした。ここの記述が役に立てば幸いです。
ファイル実行モード（APP List）
UIFLowの「ダウンロード」で、.pyファイルとして保存したファイルを実行するモードです。
UIFLowの「ダウンロード」のボタンを押して、自動的に移行させるか、電源を入れて設定画面を呼び出し、APP Listを選ぶことでファイル実行モードにできます。プログラム書き込みモードに戻すにはCodeを選ばなければなりません。
UIFlowの「ダウンロード」ボタンを押したときには、現在プログラム中のプログラムを「プロジェクト名.py」としてM5StickC Plusに保存し、ファイル実行モードに移行します。同名のファイル名があれば、プログラム内容を更新します。「ダウンロード」を選んでダウンロードが始まると、画面に「Uploading」と表示され、終わると「Resetting」となってリセットされプログラムの実行が始まります。
起動時に設定画面を呼び出し、APP Listを選ぶと、ダウンロード済みのプログラムの一覧が表示されるので、一覧からプログラムを選び、実行することができます。
※ボタンBを３秒間長押しすると、プログラムが消去されるようです。