M5StackがUIFlow2でLVGL対応発表、ビジュアルプログラミングでより高度なUI作成可能に

2025年9月15日

M5Stackが、ビジュアルプログラミング環境「UIFlow2」で軽量グラフィックスライブラリ「LVGL」の公式サポートを開始した。これによりユーザーは、ビジュアルプログラミングの手軽さと本格的な組み込みGUIフレームワークの自由度を両立できるようになった。

UIFlow2はMicroPythonベースで設計され、ハードウェアプログラミングの敷居を下げることを目的としている。従来版では基本的なコントロールと描画機能を含んでいたが、複雑なUI要求には不十分だった。

LVGLはオープンソースの軽量クロスプラットフォーム組み込みGUIライブラリで、豊富なウィジェットライブラリ（ボタン、スライダー、プログレスバー、チャートなど）、高性能レンダリング、柔軟な拡張性（アニメーション、テーマ、イベントコールバック、高度なカスタムスタイリング）を提供する。

UIFlow2のLVGL統合により、開発者はブロックのドラッグ＆ドロップから始めて、Pythonコードで動作を細かく調整でき、初心者向けからプロレベルの制御まで滑らかに移行できる。

対応デバイスと基本機能

現在UIFlow2は第1段階の統合でLVGLをサポートしており、Core2、Tough、Dial、CoreS3、Tab5などのコントローラーに対応している。標準ウィジェット（ボタン、ラベル、画像）がビジュアルエディター内で即座に利用可能で、LVGL要素の直接操作とライブ属性調整ができる。

フォント最適化機能により、ローカライゼーション向上のためのカスタムフォント生成とダウンロードがワンクリックで可能。「コードモード」では完全なPython API アクセスにより、LVGL関数を直接呼び出して高度なロジックを構築できる。

使用開始は4ステップで完了する。UIFlow2 Web IDEを起動し、M5デバイスの電源を入れてオンラインエディターに接続。設定でM5UIを選択してLVGL対応ブロックを有効化。ブロックモードではボタンやラベルなどのコントロールを直接ドラッグ＆ドロップできる。

コードモード使用例では、m5uiとlvglをインポートし、M5.begin()とm5ui.init()で初期化。白背景のページ作成後、青いボタンと黒いラベルを配置してpage0.screen_load()で画面に表示する。プログラムをデバイスにダウンロード後、コントロールが即座に画面表示され、リアルタイム操作に対応する。

今後の展開として、チャート、アニメーション、テーマ、高度なスタイル管理などのより多くのウィジェットサポートを予定。WYSIWYG（What You See Is What You Get）レイアウト編集による視覚的デザイナーの改善も計画している。ハードウェア対応範囲も拡大し、Module DisplayやUnit CardKBなど、より多くのディスプレイモジュールと入力周辺機器への対応を進めるとしている。