Zephyr OSでUI: GUI Guiderサンプルコードを実行してみる (日本語ブログ)

[akifumiokano]

0. この記事は？

マイコンで液晶画面を描画するには，さまざまなツールが用意されています．この記事では，NXPの汎用マイコン向けRTOS「Zephyr OS」で，タッチ対応液晶GUIを動かすまでの手順をステップ・バイ・ステップで解説します．

GUIの構築に使うのは，マイコン向け軽量GUIライブラリ「LVGL」(エルブイジーエル)と，そのコードをGUI操作で生成できるNXP製ツール「GUI Guider」です．GUI Guiderにはデモプロジェクトがあらかじめ用意されており，それを使えばすぐに実動作を確認できます．ゴールは，GUI GuiderのサンプルプロジェクトをZephyr用にエクスポートし，i.MX RT1060評価キット(MIMXRT1060-EVKC)と液晶パネル(RK043FN66HS-CTG)上で実際に動作させることです．

なお，このGUIサンプルのビルドには，現時点ではZephyr OS v4.0.0とZephyr SDK 0.17.0の特定の組み合わせが必要です．この記事では，最新のZephyr環境(v4.3.99)からv4.0.0へ一時的に切り替える方法，パッチの適用，ビルドと書き込み，そして作業後に元の環境へ戻す手順までを詳しく説明します．

この記事の手順を完了すると，次のような液晶表示が実現できます：

GUI Guiderで生成したGUIをZephyr OSで表示

この記事を読む前に(1)
この記事ではZephyrのビルド環境のバージョン切替方法を説明します．
コマンドラインツール(ターミナル)を使うため，基本的なシェル操作とgitやwestコマンドに慣れていることが前提です．
コマンド例はzsh(macOSの標準シェル)での操作です．異なるシェルを使う場合は適宜読み替えてください．

この記事を読む前に(2)
Zephyrのビルド環境がすでにインストール済みであり，NXPのマイコン(MCXシリーズやi.MX RTシリーズ)がこれらのZephyrのツールを使って動作することを想定しています．
この環境準備から始める場合には，コマンドラインツールを使ってインストールを行うZephyrの公式サイトの「Getting Started Guide」や，MCUXpresso for VSCを使って簡単にセットアップが行えるガイド動画「さぁはじめよう！MCUXpresso VS Code で Zephyr OS」を参照ください．

この記事を読む前に(3)
GUI Guiderの細かい操作はこの記事では説明しません．インストール〜対応基板，操作方法までを解説したわかりやすいページがあるので，以下の外部リンクを参照ください．

• 「GUI Guiderを使って質の高いGUIをササッと作ってみよう」(外部サイト：APS)
• 「GUI Guiderを用いたGUI作成のはじめかた」　(外部サイト：Nexty Electronics)

目次

• 0. この記事は？
• 1. 用意するもの
  • 1.1 ハードウェア
  • 1.2 ソフトウェア(インストール済みであること)
• 2. GUI Guiderでのプロジェクト作成
• 3. Zephyr環境の設定
  • 3.1 Zephyr SDK 0.17.0のインストール
  • 3.2 Zephyr OS v4.0.0への切り替え
• 4. プロジェクトに必要な変更
  • 4.1 パッチの適用
  • 4.2 プロジェクト設定ファイルの変更
• 5. ビルド
• 6. 書き込み
• 7. 環境を元のZephyr OSのバージョンに戻す
• 補遺A: 3.2節の別の手段 — Gitブランチを使ったバージョン管理
  • ステップ1：v4.0.0にパッチを適用した状態を作る
  • ステップ2：パッチを適用した状態を保存する
  • ステップ3：ブランチを切り替えて動作を確認する
• 参考資料

1. 用意するもの

1.1 ハードウェア

品名	備考
i.MX RT1060評価キット (MIMXRT1060-EVK rev.C (EVKC))	製品ページ / Zephyrドキュメント
液晶パネル RK043FN66HS-CTG	製品ページ / Zephyrドキュメント
USBケーブル	基板とPCを接続するもの

1.2 ソフトウェア(インストール済みであること)

• 最新のZephyr開発環境 (記事執筆時: Zephyr OS v4.3.99，Zephyr SDK 1.0.0)
• GUI Guider v1.10.1-GA

この記事を書くにあたり，Zephyrの公式サイトの「Getting Started Guide」にしたがってZephyr OSを新規にインストールしました．それによりZephyr OS v4.3.99，Zephyr SDK 1.0.0がインストールされたので，そのままそれを「最新のZephyr開発環境」としています(2026年3月22日現在)．

 

2. GUI Guiderでのプロジェクト作成

まず，GUI Guiderを使ってLVGLのコードを生成します．
GUI Guiderは画面上でUIを設計すると，それに対応するZephyr用のソースコードを自動的に書き出してくれるツールです．

手順は次のとおりです：

1. GUI Guiderを起動し，LVGL8.3.10ベースのプロジェクトとして作成します(Zephyrと互換性があるLVGLバージョンを選択します)
2. ターゲット(動作させる基板)としてMIMXRT1060-EVKCを選択します
3. 好きなサンプルプロジェクトを選択します(下の例では「Printer」サンプル)
4. コードを生成します
5. 必要であれば，シミュレーション機能でPC上の動作を確認します
6. Zephyrプロジェクトとしてエクスポート(書き出し)します

書き出し先のフォルダは任意です．
ただしこの記事では以降の説明をわかりやすくするため，次のフォルダに保存することとします：

~/zephyrproject/gui_sample/

~/はホームディレクトリ(自分のユーザフォルダ)を表します．

LVGL8.3.10ベースのプロジェクトとして作成

プロジェクトを作成

コードを生成

Zephyrプロジェクトを書き出し

3. Zephyr環境の設定

書き出したプロジェクトをビルドするには，Zephyr OS v4.0.0とZephyr SDK 0.17.0の組み合わせが必要です．
現在インストールされているバージョン Zephyr OS v4.3.99 と Zephyr SDK 1.0.0 から切り替える作業を行います．

このセクション以降ではwestコマンドを使用します．あらかじめ次の2つのコマンドを実行しておいてください．

まず，Python実行環境をアクティベート(有効化)します：

source ~/zephyrproject/zephyr/.venv/bin/activate

MCUXpresso for VSCでインストールした場合
bin/activateの場所が標準と異なる場合があります．
macOSであれば~/.mcuxpressotools/.venv_3_14/，
WindowsであればC:\Users\<ユーザ名>~/.mcuxpressotools/.venv_3_12/
などを探してください．

続いて，Zephyrのビルドに必要な環境変数を設定します．このコマンドにより，任意のフォルダからZephyrのビルドが行えるようになります：

source ~/zephyrproject/zephyr/zephyr-env.sh

3.1 Zephyr SDK 0.17.0のインストール

SDKとは，コンパイラやリンカなど，マイコン用のコードをビルドするためのツール一式のことです．

次のページからSDK 0.17.0をダウンロードします：
https://github.com/zephyrproject-rtos/sdk-ng/releases/tag/v0.17.0

ページ内「Downloads → SDK Bundle」の一覧から，自身のPC環境に合った Minimalファイルを選んでダウンロードします(ストレージ容量の節約のため，フルセットではなくMinimalで構いません)．

ダウンロードした.tar.xzファイルを展開し，ホームディレクトリ(~/)に置いたら，そのフォルダの中に入ってsetup.shを実行します：

./setup.sh

実行すると，インストールするツールチェーンを選ぶ対話形式の画面になります．
次のように答えてください：

Install toolchains for all targets [y/n]?  →  n  （特定のターゲットのものだけ．全部はいらない）
Install 'arm-zephyr-eabi' toolchain [y/n]? →  y  ← これだけ「y」
（その他の質問はすべて n）

arm-zephyr-eabiとは，ARM Cortex-Mコアのマイコン(今回のi.MX RT1060もこれです)向けZephyrアプリをビルドするためのツールチェーンです．

SDK 0.17.0のインストール．setup.shを実行してarm-zephyr-eabiだけをセットアップ

3.2 Zephyr OS v4.0.0への切り替え

次に，Zephyr OSのバージョンを切り替えます．
ZephyrはGitで管理されるリポジトリとなっているため，git switchコマンドを使って特定のバージョンに切り替えできます．

この節では切り替えの最も簡単な方法を紹介します．

これ以外に，git ブランチを使って「v4.0.0のパッチが当たった状態」を保存・管理する別の手段もあります．繰り返し使う場合に便利ですが，作業が煩雑なため，この記事の末尾の補遺Aで紹介しています．

まずZephyr OSのフォルダに移動します：

cd ~/zephyrproject/zephyr

切り替えられるバージョン(タグ)の一覧を確認します(長いリストが表示されるので，確認が完了したら[q]キーを押して終了します)：

git tag

v4.0.0に切り替えます：

git switch --detach v4.0.0

エラーが出て切り替えられない場合
もし，フォルダ内に変更されたファイルがある場合，切り替えが拒否されます．
このような時には，次のコマンドでインストール時の状態に戻してから，再度切り替えてください：

git restore .              # 変更を元に戻す
git switch --detach v4.0.0   # バージョンを切り替える

切り替えが完了したら，次のwest updateコマンドで関連モジュールを更新します：

west update

westはZephyrのビルドやモジュール管理をまとめて行うツールです．このコマンドで，Zephyr v4.0.0に対応した関連モジュールが揃います．

v4.0.0にスイッチ後のwest update実行の様子

(Zephyr OSの多くのモジュールがそのバージョン用に設定される)

ここまでの作業が完了した時点で，関連するフォルダの構成は次のようになっています：

~/zephyrproject/
├── zephyr/                          # Zephyr OS本体 (v4.0.0)
│   └── ...
├── modules/
│   └── lib/
│       └── gui/
│           └── lvgl/                # LVGLモジュール: 5.1節でのパッチによる変更対象
└── gui_sample/                      # GUI Guiderで書き出したプロジェクト
	├── src/
	├── CMakeLists.txt
	├── prj.conf                     # プロジェクト設定ファイル: 5.2節で変更を行う
	└── patches/
	   ├── 0001-zephyr-Add-...patch  # Zephyr本体へのパッチ: 5.1節で使用
	   └── 0001-lvgl-Add-...patch    # LVGLへのパッチ:      5.1節で使用

 

4. プロジェクトに必要な変更

4.1 パッチの適用

west updateが終わったら，保存しておいたプロジェクトに含まれるパッチを適用します．
今回のGUI Guiderサンプルには，Zephyr本体とLVGLに対してそれぞれパッチが用意されています．

① Zephyr本体へのパッチ

~/zephyrproject/zephyrフォルダ内で次のコマンドを実行します：

git apply ../gui_sample/patches/0001-zephyr-Add-build-support-for-new-lvgl-widgets-develo.patch

② LVGLへのパッチ

次のフォルダに移動してから，もう一つのパッチを適用します：

cd ../modules/lib/gui/lvgl
git apply ~/zephyrproject/gui_sample/patches/0001-lvgl-Add-new-widgets-developed-by-NXP.patch

次のような警告が出ますが，無視して構いません：

warning: 1 line adds whitespace errors.

4.2 プロジェクト設定ファイルの変更

先にGUI Guiderで準備をしておいたプロジェクトのフォルダに入ります：

cd ~/zephyrproject/gui_sample

このフォルダ内のテキストファイルprj.confを，テキストエディタで開いて編集します．
prj.confはZephyrプロジェクトの動作設定を記述するファイルです．

最初の2行を，次のとおり変更して保存してください：

項目	変更前	変更後
LVGLのメモリプールサイズ	CONFIG_LV_Z_MEM_POOL_SIZE=16384	CONFIG_LV_Z_MEM_POOL_SIZE=49152
メインスタックサイズ	CONFIG_MAIN_STACK_SIZE=2048	CONFIG_MAIN_STACK_SIZE=4096

GUI Guiderのサンプルはデフォルト設定よりも多くのメモリを必要とするため，この変更が必要です．

5. ビルド

ビルド(コンパイルとリンク)を行います．

プロジェクトのフォルダにいることを確認してから，ビルドを実行します：

cd ~/zephyrproject/gui_sample/
west build -b mimxrt1060_evk --shield rk043fn66hs_ctg

オプションの意味：

オプション	意味
-b mimxrt1060_evk	ターゲットの基板を指定します
--shield rk043fn66hs_ctg	接続した液晶パネル(シールド)を使用することを指定します

シールドとは，評価基板に接続して機能を拡張する追加ボードのことです．今回の液晶パネルがこれにあたります．

ビルド中にCMakeから「液晶を未接続のままファームウェアを実行すると基板にダメージを与えるかもしれない」という警告が出ますが，液晶が正しく接続されていれば問題ありません．

重要！ : ビルドエラーが出た場合
GUI Guiderのサンプルによっては，生成されたコードがLVGLのAPIに即していない場合があり，ビルドが通らないことがあります．
そんなときは，エラー出力とともにAIチャットに「このエラーの原因と対策を検討して」と入力してみてください．多くの場合，的確な提案が得られます．

ちなみに，今回この記事で例として使用したGUI Guiderの「Printer」デモ・サンプルで生成したコードでは，「src/generated/events_init.c」のコンパイル時にたくさんの警告が出ます．
これは同ファイル20行目の static char buf[4]; が問題で，これを使う sprintf( buf, "%d", copiesCnt ) のための充分なサイズが確保されてないというものです．
他のサンプルでも警告やエラーが出ることがありますので，適宜対応してください．

ビルド完了の様子

6. 書き込み

ビルドが成功したら，基板にプログラムを書き込みます．

基板をUSBケーブルでPCに接続した状態で，次のコマンドを実行します：

west flash --runner pyocd

--runner pyocdを指定することで，基板に内蔵のデバッグインターフェース(MCU-Link)をそのまま使って書き込めます．
(プロジェクトのデフォルト設定はJ-Linkという別の書き込みツールを想定しているため，このオプションが必要です)

液晶に表示が出たら完了です．

液晶画面表示．タッチスクリーンによる操作にも対応

7. 環境を元のZephyr OSのバージョンに戻す

作業が終わったら，Zephyr環境を元のバージョンに戻しておきましょう．

元の環境(v4.3.99)はGit上にv4.3.99というタグが存在しないため，git switch mainで戻す必要があります．また，パッチ適用で書き換えられたファイルを強制上書きするために--forceオプションが必要です．さらにlvglフォルダはパッチによる変更が残っているため，--forceでの上書きができず，先にフォルダごと削除しておく必要があります．

次の手順で元に戻します：

cd ~/zephyrproject/zephyr
rm -rf ../modules/lib/gui/lvgl   # パッチで変更されたlvglフォルダを削除
git switch main --force          # メインブランチに戻す（--forceで上書きを許可）
west update                      # モジュールを最新の状態に更新

これで環境は元に戻ります．

下のターミナル画面は，元に戻した環境でのビルドの実行を確認している様子(GUI Guiderのサンプルコードはビルドできないのでblinkyサンプルで確認．ターゲットにはFRDM-MCXA153を指定している)．

確認のため元に戻した環境でビルドを実行 (FRDM-MCXA153用にblinkyサンプルで)

補遺A: 3.2節の別の手段 — Gitブランチを使ったバージョン管理

3.2節ではgit switch --detach v4.0.0でZephyrをv4.0.0に切り替える方法を紹介しました．ここでは，Gitブランチを使って「v4.0.0のパッチが当たった状態」を保存・管理する別の手段を紹介します．この方法は作業が煩雑ですが，ブランチとして状態を恒久的に保存できるため，繰り返し使う場合に便利です．

ステップ1：v4.0.0にパッチを適用した状態を作る

zephyrproject/zephyr/のmainブランチにいる状態で，v4.0.0をベースにGUI Guider用のブランチ(ここでは「v400gg」というブランチ名にした)を作成し，west updateで関連モジュールを揃えます：

git switch -c v400gg v4.0.0
west update

続いて，4.1節と同様にGUI Guiderプロジェクトのパッチを2つ適用します．この時点でビルドが通ることを確認しておきます．

~/zephyrproject/zephyrフォルダ内で次のコマンドを実行します：

cd ~/zephyrproject/zephyr
git apply ../gui_sample/patches/0001-zephyr-Add-build-support-for-new-lvgl-widgets-develo.patch
cd ../modules/lib/gui/lvgl
git apply ~/zephyrproject/gui_sample/patches/0001-lvgl-Add-new-widgets-developed-by-NXP.patch

ステップ2：パッチを適用した状態を保存する

パッチを適用したlvglフォルダの変更をコミットします．このディレクトリはそれ自身がGitリポジトリとして管理されているため，ディレクトリ内に入ってコミットします：

cd ~/zephyrproject/modules/lib/gui/lvgl/
git add .
git commit -m '◯◯◯◯'

ちなみに.. ここで~/zephyrproject/zephyr/の git ステータスを確認すると，このコミットは反映されていません．これは Zephyr が git のサブモジュールで管理を行なっていないためです．

~/zephyrproject/modules/lib/gui/lvgl/のようなZephyrの構成単位は単独の git リポジトリとなっていて，それぞれのバージョンを west によって管理しています．

各構成単位のバージョン管理は~/zephyrproject/zephyr/west.ymlファイルに保存したハッシュ値で行われます．

次の手順はこの管理方法に合わせるための作業です．

先ほどのコミットのハッシュ値を確認します：

cd ~/zephyrproject/modules/lib/gui/lvgl/
git log

パッチによる変更を確認して全てをコミット．

ログで先ほどのコミットのハッシュを確認(赤枠)するまで

確認したハッシュ値を~/zephyrproject/zephyr/west.ymlのlvglの項に上書きします．

lvglのハッシュ値を上書きした

続いて~/zephyrproject/zephyr/に戻ってステータスを確認します：

cd ~/zephyrproject/zephyr/
git status

変更があったファイルは次の2つであることがわかります：

• modified: modules/lvgl/CMakeLists.txt
• modified: west.yml

これらをコミットします：

git add -u
git commit -m '◯◯◯◯'

この時点でもう一度ビルドが通ることを確認しておきます．

ステップ3：ブランチを切り替えて動作を確認する

mainブランチ（最新環境）に戻り，最新版を使うプロジェクトのビルドが問題ないことを確認します：

cd ~/zephyrproject/zephyr
git switch main
west update

cd ~/zephyrproject/gui_sample
west build -b mimxrt1060_evk --shield rk043fn66hs_ctg

次にv400ggブランチに切り替え，GUI Guiderプロジェクトのビルドが問題ないことを確認します：

cd ~/zephyrproject/zephyr
git switch v400gg
west update

cd ~/zephyrproject/gui_sample
west build -b mimxrt1060_evk --shield rk043fn66hs_ctg

これで最新ブランチとGUI Guiderプロジェクトのビルド用ブランチを，シンプルな一連のコマンドで切り替えられるようになりました．

 

参考資料

• [Zephyr® シリーズ] 第１回 最近流行りのZephyr OSってどんなOS？(日本語ブログ)
• [Zephyr® シリーズ] 第２回 はじめてのビルドと実機動作(日本語ブログ)
• Zephyr Project Getting Started Guide
• さぁはじめよう！MCUXpresso VS Code で Zephyr OS (ガイド動画)
• GUI Guiderを使って質の高いGUIをササッと作ってみよう (外部サイト：APS)
• GUI Guiderを用いたGUI作成のはじめかた (外部サイト：Nexty Electronics)

変更履歴：
2026-03-26：初版
=========================

本投稿の「Comment」欄にコメントをいただいても，現在返信に対応しておりません．
お手数をおかけしますが，お問い合わせの際には「NXPへの技術質問 - 問い合わせ方法 (日本語ブログ)」をご参照ください．
(既に弊社NXP代理店，もしくはNXPとお付き合いのある方は，直接担当者へご質問いただいてもかまいません．)