【小ネタ】UIFlow 2.0 で本体に保持する画像を管理（追加や削除）

Last updated at 2026-05-26Posted at 2026-05-26

はじめに

この記事は、M5Stack系デバイスをビジュアルプログラミングで開発できる「UIFlow 2.0」に関する話です。

それに関する小ネタの、本体に保持する画像の追加や削除を行うやり方の話です。

自分は、M5Paper を電子ペーパー名札としてよく使っていて、その表示内容の作成に最近は UIFlow 2.0 を使っています。今回の内容は、自分の場合はこの話でよく使う内容になります。

●イベントで大活躍する電子ペーパー名札を「M5Paper」「M5PaperS3」と UIFlow 2.0 で作る！（書き込み部分のみ） - Qiita
　https://qiita.com/youtoy/items/6079c04ca5b759e63e5b

M5Paper等を使った電子ペーパー名札の作成方法については、上記の UIFlow 2.0 を使った方法以外に、PlatformIO・UIFlow を使った方法の話も記事に書いていますので、よろしければご覧ください。

●イベントで大活躍する電子ペーパー名札を作る！【その2】： M5PaperS3 を「VS Code ＋ PlatformIO ＋ M5Unified」で扱う - Qiita
　https://qiita.com/youtoy/items/904dd66d46a3ccd6048f

●イベントで大活躍する電子ペーパー名札を作る！（M5Paper と UIFlow などで作成する手順） - Qiita
　https://qiita.com/youtoy/items/545cb81fd3188e63f8aa

今回のメインの内容に入っていきます。

UIFlow 2.0 で本体に保持する画像を管理する方法は、以下の画面左下の「Project Files」という部分を使います。
※ このキャプチャ画像を撮ったとき、M5Paper で表示するための画像を 1つセット済みだったので、すでにその JPEGファイルの名前が表示されています

上記の部分の「＋」ボタンを押すと、以下のような画面が開きます。以下は、左メニューの「Image」が選ばれた状態です。

ここで、「＋ Add File」ボタンを押すことで、画像ファイルのアップロードが行えます。また、すでにセット済みの画像ファイルに関して、右にある「ゴミ箱」アイコンを押すと、このファイルを削除できます（プログラムをデバイスに書き込む際に、デバイスに書き込まれる対象のファイルから外れます）。

上記の画面上の説明文にある通り、このやり方でのアップロードでサポートされている画像形式は「JPEG、PNG、BMP」になるようです。また、この方法で扱える画像ファイルのファイルサイズ上限は、1つあたり「100KB」になるようです。

最後に、今回の機能を探したきっかけについて少し触れておきます。

電子ペーパー名札を UIFlow 2.0 で作っていた際、画像の追加は、上で紹介していた過去記事に書いた方法でやっていました。

具体的には、上記の記事内の以下の部分です。

この方法で毎回画像を追加していたところ、デバイスへのプログラムの書き込みをする際に、デバイス内に書き込まれる画像ファイルがどんどん増えていきました。

そのような中、「プログラムの書き込みをする際にデバイスに書き込まれる対象のファイルは、UIFlow 2.0 のどこかで管理されているはず」と思って、UIFlow 2.0上の画面でそれらしい部分を探したという経緯がありました。

5/26 の夜にオンライン開催されたイベントで、今回の内容に関連する LT登壇をしました。

●イベントで大活躍する電子ペーパー名札〜その３〜 / ビジュアルプログラミングIoTLT vol.23 - Speaker Deck