メインコンテンツへスキップ

プラットフォームガイド

Zylix は組み込みシステムを含む 8 つのプラットフォームで動作し、それぞれネイティブ UI フレームワークを使用して本物のユーザー体験を提供します。このセクションでは、プラットフォーム固有のセットアップ、統合パターン、およびベストプラクティスを説明します。

対応状況の定義は 互換性リファレンス を参照してください。

対応プラットフォーム
#

プラットフォームUI フレームワーク言語バインディングビルドコマンド
Web/WASMHTML/JavaScriptJavaScriptWebAssemblyzig build wasm
iOSSwiftUISwiftC ABIzig build ios
watchOSSwiftUISwiftC ABIzig build watchos
AndroidJetpack ComposeKotlinJNIzig build android
macOSSwiftUISwiftC ABIzig build
LinuxGTK4CC ABIzig build linux
WindowsWinUI 3C#P/Invokezig build windows-x64
M5Stackカスタム Zig UIZig直接zig build -Dtarget=xtensa-esp32s3

プラットフォーム比較
#

機能WebiOSwatchOSAndroidmacOSLinuxWindowsM5Stack
UI フレームワークHTML/JSSwiftUISwiftUIComposeSwiftUIGTK4WinUI 3Zig UI
言語JavaScriptSwiftSwiftKotlinSwiftCC#Zig
バインディングWASMC ABIC ABIJNIC ABIC ABIP/Invoke直接
最小バージョンモダンブラウザiOS 15+watchOS 10+API 26+macOS 12+GTK 4.0+Win 10+ESP-IDF 5.0+
バンドルサイズ~50 KB~100 KB~80 KB~150 KB~100 KB~80 KB~120 KB~200 KB
ホットリロード

プラットフォーム別アーキテクチャ
#

Web/WASM アーキテクチャ
#

flowchart TB
    subgraph Browser["ブラウザ"]
        subgraph JS["JavaScript (zylix.js)"]
            Load["WASM モジュールをロード"]
            DOM["DOM 操作"]
            Events["イベント転送"]
        end

        subgraph WASM["WebAssembly (zylix.wasm)"]
            VDOM1["Virtual DOM"]
            State1["状態管理"]
            Diff1["差分アルゴリズム"]
        end

        JS --> WASM
    end

ネイティブプラットフォームアーキテクチャ
#

flowchart TB
    subgraph App["ネイティブアプリ"]
        subgraph UI["プラットフォーム UI<br/>(SwiftUI / Compose / GTK4 / WinUI)"]
            Render["ネイティブレンダリング"]
            PlatformEvents["プラットフォームイベント"]
            A11y["アクセシビリティ"]
        end

        subgraph Bind["バインディング層<br/>(C ABI / JNI / P/Invoke)"]
            Calls["関数呼び出し"]
            Marshal["データマーシャリング"]
        end

        subgraph Core["Zylix Core (libzylix.a)"]
            VDOM2["Virtual DOM"]
            State2["状態管理"]
            Diff2["差分アルゴリズム"]
        end

        UI --> Bind
        Bind --> Core
    end

組み込みシステムアーキテクチャ (M5Stack)
#

flowchart TB
    subgraph Device["M5Stack CoreS3"]
        subgraph Hardware["ハードウェア層"]
            SPI["SPI バス"]
            I2C["I2C バス"]
            GPIO["GPIO"]
        end

        subgraph HAL["ハードウェア抽象化層"]
            Display["ILI9342C ディスプレイドライバ"]
            Touch["FT6336U タッチコントローラ"]
            Power["AXP2101 PMIC"]
            Expander["AW9523B GPIO エキスパンダ"]
        end

        subgraph Core["Zylix Core"]
            VDOM3["Virtual DOM"]
            State3["状態管理"]
            Renderer["RGB565 レンダラー"]
            Gestures["ジェスチャー認識"]
        end

        subgraph UI3["UI コンポーネント"]
            Widgets["ウィジェット"]
            Layout["レイアウトシステム"]
            Styles["スタイリング"]
        end

        Hardware --> HAL
        HAL --> Core
        Core --> UI3
    end

バインディング戦略
#

WebAssembly (Web)
#

JavaScript グルーコードを使用した WASM への直接コンパイル:

// WASM モジュールをロード
const wasmModule = await WebAssembly.instantiate(wasmBuffer, {
    env: {
        js_log: (ptr, len) => console.log(readString(ptr, len)),
        js_create_element: (tag, parent) => createElement(tag, parent),
        js_set_text: (el, ptr, len) => setTextContent(el, ptr, len),
    }
});

// 初期化
wasmModule.exports.zylix_init();

// イベントをディスパッチ
function onClick(callbackId) {
    wasmModule.exports.zylix_dispatch(callbackId, 0, 0);
    render();
}

C ABI (iOS, macOS, Linux)
#

直接関数呼び出しによる静的ライブラリリンク:

// Swift バインディング
@_silgen_name("zylix_init")
func zylix_init() -> Int32

@_silgen_name("zylix_dispatch")
func zylix_dispatch(_ eventType: UInt32, _ payload: UnsafeRawPointer?, _ len: Int) -> Int32

@_silgen_name("zylix_get_state")
func zylix_get_state() -> UnsafePointer<ZylixState>?

// 使用例
zylix_init()
zylix_dispatch(EVENT_INCREMENT, nil, 0)
let state = zylix_get_state()?.pointee

JNI (Android)
#

Kotlin/Java 相互運用のための Java Native Interface:

// Kotlin バインディング
object ZylixLib {
    init {
        System.loadLibrary("zylix")
    }

    external fun init(): Int
    external fun deinit(): Int
    external fun dispatch(eventType: Int, payload: ByteArray?, len: Int): Int
    external fun getState(): ZylixState
}

// 使用例
ZylixLib.init()
ZylixLib.dispatch(EVENT_INCREMENT, null, 0)
val state = ZylixLib.getState()

P/Invoke (Windows)
#

.NET ソース生成相互運用:

// C# バインディング
public static partial class ZylixInterop
{
    [LibraryImport("zylix", EntryPoint = "zylix_init")]
    public static partial int Init();

    [LibraryImport("zylix", EntryPoint = "zylix_dispatch")]
    public static partial int Dispatch(uint eventType, IntPtr payload, nuint len);

    [LibraryImport("zylix", EntryPoint = "zylix_get_state")]
    public static partial IntPtr GetState();
}

// 使用例
ZylixInterop.Init();
ZylixInterop.Dispatch(EVENT_INCREMENT, IntPtr.Zero, 0);
var statePtr = ZylixInterop.GetState();

共通パターン
#

状態監視
#

各プラットフォームは状態監視を異なる方法で実装します:

// SwiftUI with ObservableObject
class ZylixStore: ObservableObject {
    @Published var state: ZylixState

    init() {
        zylix_init()
        state = zylix_get_state()!.pointee
    }

    func dispatch(_ event: UInt32) {
        zylix_dispatch(event, nil, 0)
        state = zylix_get_state()!.pointee
    }
}
// Compose with MutableState
class ZylixStore {
    var state by mutableStateOf(ZylixLib.getState())
        private set

    fun dispatch(event: Int) {
        ZylixLib.dispatch(event, null, 0)
        state = ZylixLib.getState()
    }
}
// リアクティブ状態ラッパー
class ZylixStore {
    constructor() {
        this.listeners = [];
        this.state = zylix.getState();
    }

    dispatch(event) {
        zylix.dispatch(event, null, 0);
        this.state = zylix.getState();
        this.listeners.forEach(fn => fn(this.state));
    }

    subscribe(listener) {
        this.listeners.push(listener);
        return () => this.listeners = this.listeners.filter(l => l !== listener);
    }
}
// MVVM with INotifyPropertyChanged
public class ZylixStore : INotifyPropertyChanged
{
    private ZylixState _state;

    public ZylixState State
    {
        get => _state;
        private set { _state = value; OnPropertyChanged(); }
    }

    public void Dispatch(uint eventType)
    {
        ZylixInterop.Dispatch(eventType, IntPtr.Zero, 0);
        State = Marshal.PtrToStructure<ZylixState>(ZylixInterop.GetState());
    }
}

イベント処理
#

ネイティブイベントを Zylix イベントに変換:

Button("インクリメント") {
    store.dispatch(EVENT_INCREMENT)
}
.buttonStyle(.borderedProminent)

TextField("テキストを入力", text: $inputText)
    .onChange(of: inputText) { newValue in
        newValue.withCString { ptr in
            zylix_dispatch(EVENT_TEXT_INPUT, ptr, newValue.count)
        }
    }
Button(onClick = { store.dispatch(EVENT_INCREMENT) }) {
    Text("インクリメント")
}

TextField(
    value = inputText,
    onValueChange = { text ->
        ZylixLib.dispatch(EVENT_TEXT_INPUT, text.toByteArray(), text.length)
        inputText = text
    }
)
button.addEventListener('click', () => {
    store.dispatch(EVENT_INCREMENT);
});

input.addEventListener('input', (e) => {
    const text = e.target.value;
    const bytes = new TextEncoder().encode(text);
    const ptr = zylix.alloc(bytes.length);
    zylix.memory.set(bytes, ptr);
    zylix.dispatch(EVENT_TEXT_INPUT, ptr, bytes.length);
    zylix.free(ptr, bytes.length);
});
private void OnIncrementClick(object sender, RoutedEventArgs e)
{
    Store.Dispatch(EVENT_INCREMENT);
}

private void OnTextChanged(object sender, TextChangedEventArgs e)
{
    var text = ((TextBox)sender).Text;
    var bytes = Encoding.UTF8.GetBytes(text);
    fixed (byte* ptr = bytes)
    {
        ZylixInterop.Dispatch(EVENT_TEXT_INPUT, (IntPtr)ptr, (nuint)bytes.Length);
    }
}

ビルド設定
#

クロスプラットフォームビルドスクリプト
#

#!/bin/bash
# build-all.sh

# すべてのプラットフォーム向けにコアをビルド
cd core

# Web/WASM
zig build wasm -Doptimize=ReleaseSmall
cp zig-out/lib/zylix.wasm ../platforms/web/

# iOS (arm64)
zig build -Dtarget=aarch64-ios -Doptimize=ReleaseFast
cp zig-out/lib/libzylix.a ../platforms/ios/

# Android (複数 ABI)
for abi in aarch64-linux-android armv7a-linux-androideabi x86_64-linux-android; do
    zig build -Dtarget=$abi -Doptimize=ReleaseFast
    cp zig-out/lib/libzylix.a ../platforms/android/app/src/main/jniLibs/${abi}/
done

# macOS (ユニバーサルバイナリ)
zig build -Dtarget=aarch64-macos -Doptimize=ReleaseFast
zig build -Dtarget=x86_64-macos -Doptimize=ReleaseFast
lipo -create zig-out/lib/libzylix-arm64.a zig-out/lib/libzylix-x64.a -output ../platforms/macos/libzylix.a

# Linux (x64)
zig build -Dtarget=x86_64-linux-gnu -Doptimize=ReleaseFast
cp zig-out/lib/libzylix.a ../platforms/linux/

# Windows (x64)
zig build -Dtarget=x86_64-windows -Doptimize=ReleaseFast
cp zig-out/lib/zylix.dll ../platforms/windows/

パフォーマンスのヒント
#

全プラットフォーム共通
#

  1. 状態変更を最小化: 関連する更新をバッチ処理
  2. リストにキーを使用: 効率的な差分検出を有効化
  3. 遅延読み込み: オンデマンドでデータをロード
  4. メモ化: 高コストな計算をキャッシュ

プラットフォーム固有
#

プラットフォームヒント
WebWASM ストリーミングコンパイルを有効化
iOSローカル状態には @ObservedObject より @State を優先
Android高コストな計算には remember を使用
macOSカスタム描画よりネイティブコントロールを優先
Linuxインラインスタイルより CSS クラスを使用
Windowsパフォーマンス向けにコンパイル済みバインディングを有効化
M5Stackダーティ矩形レンダリングを使用し、全画面再描画を最小化

デバッグ
#

全プラットフォーム共通
#

// Zig でデバッグログを有効化
pub const log_level: std.log.Level = .debug;

// 状態変更をログ
pub fn logStateChange(event: Event) void {
    std.log.debug("イベント: {s}, バージョン: {d}", .{
        @tagName(event),
        state.getVersion()
    });
}

プラットフォーム固有ツール
#

プラットフォームツール
Webブラウザ DevTools、WASM デバッグ
iOSXcode Instruments、View Debugger
AndroidAndroid Studio Profiler、Layout Inspector
macOSXcode Instruments
LinuxGTK Inspector、Valgrind
WindowsVisual Studio Profiler、WinDbg
M5StackESP-IDF モニター、JTAG デバッグ、シリアル出力

次のステップ
#

Web/WASM

·4 分
WebAssembly を使用して Zylix アプリケーションを Web にビルドしてデプロイします。このガイドでは、プロジェクトのセットアップ、WASM コンパイル、JavaScript 統合、デプロイ戦略について説明します。 前提条件 # 始める前に、以下がインストールされていることを確認してください: Zig 0.15.0 以降 Node.js 18+(開発サーバー用) WASM をサポートするモダンブラウザ JavaScript と HTML の基本知識 # Zig インストールの確認 zig version # Node.js インストールの確認 node --version プロジェクト構造 # 典型的な Zylix Web プロジェクトの構造: my-zylix-app/ ├── core/ # Zig ソースコード │ ├── src/ │ │ ├── main.zig # エントリーポイント │ │ ├── app.zig # アプリケーションロジック │ │ ├── vdom.zig # Virtual DOM │ │ └── state.zig # 状態管理 │ └── build.zig # ビルド設定 ├── web/ # Web アセット │ ├── index.html # HTML エントリーポイント │ ├── zylix.js # JavaScript グルーコード │ └── styles.css # スタイル └── dist/ # ビルド出力 └── zylix.wasm # コンパイル済み WASM Web 向けビルド # ステップ 1: ビルド設定 # WASM ターゲット用に build.zig を作成または更新:

iOS

·3 分
SwiftUI を使用して Zylix でネイティブ iOS アプリケーションを構築します。このガイドでは、Xcode プロジェクトのセットアップ、C ABI 統合、App Store デプロイについて説明します。 対応状況の定義は 互換性リファレンス を参照してください。 前提条件 # 始める前に、以下がインストールされていることを確認してください: macOS 13.0 以降 Xcode 15.0 以降 Zig 0.15.0 以降 Apple Developer アカウント(デバイステストとデプロイ用) Swift と SwiftUI の基本知識 # インストールの確認 zig version xcodebuild -version アーキテクチャ概要 # flowchart TB subgraph iOS["iOS アプリ"] subgraph Swift["SwiftUI 層"] Views["ビュー"] Store["ZylixStore"] Binding["Swift バインディング"] end subgraph Zig["Zylix Core (libzylix.a)"] VDOM["Virtual DOM"] State["状態管理"] Events["イベントハンドラ"] end Views --> Store Store --> Binding Binding --> Zig end プロジェクトセットアップ # ステップ 1: Xcode プロジェクトの作成 # Xcode を開く → ファイル → 新規 → プロジェクト iOS → App を選択 設定: Product Name: ZylixApp Interface: SwiftUI Language: Swift ステップ 2: Zylix 静的ライブラリのビルド # iOS 用に libzylix.a をビルド:

Android

·3 分
Jetpack Compose を使用して Zylix でネイティブ Android アプリケーションを構築します。このガイドでは、Android Studio のセットアップ、JNI 統合、Google Play デプロイについて説明します。 対応状況の定義は 互換性リファレンス を参照してください。 前提条件 # 始める前に、以下がインストールされていることを確認してください: Android Studio Hedgehog (2023.1.1) 以降 Android NDK r25 以降 Zig 0.15.0 以降 JDK 17 以降 Kotlin と Jetpack Compose の基本知識 # Zig インストールの確認 zig version # Java インストールの確認 java -version アーキテクチャ概要 # flowchart TB subgraph Android["Android アプリ"] subgraph Kotlin["Kotlin/Compose 層"] UI["Composable UI"] ViewModel["ViewModel"] JNI["JNI バインディング"] end subgraph Native["ネイティブ層 (libzylix.so)"] VDOM["Virtual DOM"] State["状態管理"] Events["イベントハンドラ"] end UI --> ViewModel ViewModel --> JNI JNI --> Native end プロジェクトセットアップ # ステップ 1: Android プロジェクトの作成 # Android Studio を開く → New Project Empty Activity (Compose) を選択 設定: Name: ZylixApp Package: com.example.zylixapp Minimum SDK: API 26 (Android 8.0) ステップ 2: Zylix 共有ライブラリのビルド # Android 用に libzylix.so をビルド:

watchOS

·1 分
Zylix を使用して SwiftUI で watchOS アプリを構築します。現行のカウンター PoC 実装に合わせた手順をまとめています。 対応状況の定義は 互換性リファレンス を参照してください。 ステータス # In Development — C ABI ブリッジによる最小カウンター実装。 前提条件 # macOS 13.0 以降 Xcode 15.0 以降(watchOS SDK) Zig 0.15.0 以降 # インストールの確認 zig version xcodebuild -version xcrun simctl list devices | grep -i watch アーキテクチャ概要 # flowchart TB subgraph Watch["watchOS アプリ"] subgraph WatchSwift["SwiftUI レイヤー"] WatchViews["Views"] WatchStore["ZylixBridge"] WatchBinding["C ABI"] end subgraph WatchZig["Zylix Core (libzylix.a)"] WatchVDOM["Virtual DOM"] WatchState["State Management"] WatchEvents["Event Handlers"] end WatchViews --> WatchStore WatchStore --> WatchBinding WatchBinding --> WatchZig end subgraph iOS["iOS コンパニオン(任意)"] CompanionApp["Companion App"] end プロジェクトセットアップ # ステップ 1: watchOS 向けにコアをビルド # cd core # watchOS シミュレータ用(開発推奨) zig build watchos-sim # watchOS デバイス用 zig build watchos 出力先:

macOS

·3 分
SwiftUI を使用して Zylix でネイティブ macOS アプリケーションを構築します。このガイドでは、Xcode プロジェクトのセットアップ、C ABI 統合、Mac App Store デプロイについて説明します。 対応状況の定義は 互換性リファレンス を参照してください。 前提条件 # 始める前に、以下がインストールされていることを確認してください: macOS 13.0 (Ventura) 以降 Xcode 15.0 以降 Zig 0.15.0 以降 Apple Developer アカウント(配布用) Swift と SwiftUI の基本知識 # インストールの確認 zig version xcodebuild -version swift --version アーキテクチャ概要 # flowchart TB subgraph macOS["macOS アプリ"] subgraph Swift["SwiftUI 層"] Views["ビュー & ウィンドウ"] Store["ZylixStore"] Menu["メニューバー"] end subgraph Zig["Zylix Core (libzylix.a)"] VDOM["Virtual DOM"] State["状態管理"] Events["イベントハンドラ"] end Views --> Store Store --> Zig Menu --> Store end プロジェクトセットアップ # ステップ 1: Xcode プロジェクトの作成 # Xcode を開く → ファイル → 新規 → プロジェクト macOS → App を選択 設定: Product Name: ZylixMacApp Interface: SwiftUI Language: Swift ステップ 2: ユニバーサルバイナリのビルド # Apple Silicon と Intel の両方用に libzylix.a をビルド:

Linux

·3 分
GTK4 を使用して Zylix でネイティブ Linux アプリケーションを構築します。このガイドでは、開発環境のセットアップ、C ABI 統合、配布パッケージングについて説明します。 対応状況の定義は 互換性リファレンス を参照してください。 前提条件 # 始める前に、以下がインストールされていることを確認してください: Linux ディストリビューション(Ubuntu 22.04+、Fedora 38+ など) Zig 0.15.0 以降 GTK4 開発ライブラリ pkg-config とビルドツール C と GTK の基本知識 依存関係のインストール # # パッケージリストを更新 sudo apt update # ビルドツールをインストール sudo apt install build-essential pkg-config # GTK4 開発ライブラリをインストール sudo apt install libgtk-4-dev # インストールを確認 pkg-config --modversion gtk4 # ビルドツールをインストール sudo dnf groupinstall "Development Tools" # GTK4 開発ライブラリをインストール sudo dnf install gtk4-devel # インストールを確認 pkg-config --modversion gtk4 # ビルドツールをインストール sudo pacman -S base-devel # GTK4 開発ライブラリをインストール sudo pacman -S gtk4 # インストールを確認 pkg-config --modversion gtk4 アーキテクチャ概要 # flowchart TB subgraph Linux["Linux アプリケーション"] subgraph GTK["GTK4 層"] Window["GtkWindow"] Widgets["ウィジェット"] Signals["シグナルハンドラ"] end subgraph Zig["Zylix Core (libzylix.a)"] VDOM["Virtual DOM"] State["状態管理"] Events["イベントハンドラ"] end Window --> Widgets Widgets --> Signals Signals --> Zig end プロジェクトセットアップ # ステップ 1: プロジェクト構造 # zylix-linux-app/ ├── core/ # Zylix core (Zig) │ ├── src/ │ │ └── main.zig │ └── build.zig ├── src/ # GTK アプリケーション (C) │ ├── main.c │ ├── zylix_bindings.h │ └── app_window.c ├── Makefile └── meson.build ステップ 2: Zylix 静的ライブラリのビルド # cd core # Linux x86_64 用にビルド zig build -Dtarget=x86_64-linux-gnu -Doptimize=ReleaseFast # 出力: zig-out/lib/libzylix.a cp zig-out/lib/libzylix.a ../lib/ GTK4 統合 # メインアプリケーション # src/main.c を作成:

Windows

·3 分
WinUI 3 を使用して Zylix でネイティブ Windows アプリケーションを構築します。このガイドでは、Visual Studio のセットアップ、P/Invoke 統合、Microsoft Store デプロイについて説明します。 対応状況の定義は 互換性リファレンス を参照してください。 前提条件 # 始める前に、以下がインストールされていることを確認してください: Windows 10 バージョン 1809 (build 17763) 以降 Visual Studio 2022 with: .NET デスクトップ開発ワークロード Windows App SDK Zig 0.15.0 以降 .NET 8 SDK 以降 C# と XAML の基本知識 # Zig インストールの確認 zig version # .NET インストールの確認 dotnet --version アーキテクチャ概要 # flowchart TB subgraph Windows["Windows アプリ"] subgraph CSharp["C# / WinUI 層"] XAML["XAML ビュー"] ViewModel["ViewModel"] PInvoke["P/Invoke"] end subgraph Native["ネイティブ層 (zylix.dll)"] VDOM["Virtual DOM"] State["状態管理"] Events["イベントハンドラ"] end XAML --> ViewModel ViewModel --> PInvoke PInvoke --> Native end プロジェクトセットアップ # ステップ 1: WinUI 3 プロジェクトの作成 # Visual Studio 2022 を開く 新しいプロジェクトを作成 → Blank App, Packaged (WinUI 3 in Desktop) 設定: プロジェクト名: ZylixWindowsApp Target Framework: .NET 8.0 ステップ 2: Zylix DLL のビルド # Windows 用に zylix.dll をビルド:

M5Stack CoreS3

·9 分
M5Stack CoreS3 SE向けにZylixでネイティブZigを使用した組み込みアプリケーションを構築します。このガイドでは、ESP32-S3のセットアップ、ハードウェアドライバの統合、IoTデプロイメントについて説明します。 プラットフォームのステータス定義は互換性リファレンスに従います。 前提条件 # 開始する前に、以下を確認してください: Zig 0.15.0以降(Xtensaサポート付き) ESP-IDF 5.1以降 M5Stack CoreS3 SE デバイス フラッシュ用USB-Cケーブル 組み込みシステムの基礎知識 # インストールの確認 zig version idf.py --version ハードウェア概要 # M5Stack CoreS3 SE 仕様 # コンポーネント チップ インターフェース 仕様 MCU ESP32-S3 - デュアルコア Xtensa LX7, 240MHz ディスプレイ ILI9342C SPI (40MHz) 320x240 IPS LCD, RGB565 タッチ FT6336U I2C (0x38) 静電容量式, 2点マルチタッチ PMIC AXP2101 I2C (0x34) バッテリー管理, LDO/DC-DC GPIOエクスパンダ AW9523B I2C (0x58) 16ビットI/O, LEDドライバ メモリ - - 8MB PSRAM, 16MB Flash ピン割り当て # ディスプレイ(SPI) # ピン GPIO 機能 SCLK GPIO36 SPIクロック MOSI GPIO37 SPIデータ出力 CS GPIO3 チップセレクト D/C GPIO35 データ/コマンド RST AW9523B P1_1 リセット(I/Oエクスパンダ経由) タッチ & I2C # ピン GPIO 機能 SDA GPIO12 I2Cデータ SCL GPIO11 I2Cクロック INT GPIO21 タッチ割り込み RST AW9523B P1_0 タッチリセット アーキテクチャ概要 # flowchart TB subgraph M5Stack["M5Stack CoreS3"] subgraph App["アプリケーション層"] UI["UIコンポーネント"] Logic["アプリロジック"] end subgraph Platform["Zylixプラットフォーム"] VDOM["仮想DOM"] Renderer["レンダラー"] Touch["タッチハンドラ"] Gesture["ジェスチャー認識"] end subgraph HAL["ハードウェア抽象化"] SPI["SPIドライバ"] I2C["I2Cドライバ"] GPIO["GPIO/割り込み"] end subgraph Drivers["デバイスドライバ"] ILI["ILI9342C<br/>ディスプレイ"] FT6["FT6336U<br/>タッチ"] AXP["AXP2101<br/>電源"] AW9["AW9523B<br/>GPIO"] end App --> Platform Platform --> HAL HAL --> Drivers end プロジェクトセットアップ # ステップ1: ESP-IDFのインストール # # ESP-IDFをクローン git clone --recursive https://github.com/espressif/esp-idf.git cd esp-idf git checkout v5.1 # ツールチェーンをインストール ./install.sh esp32s3 # 環境をセットアップ . ./export.sh ステップ2: XtensaサポートのZigをインストール # # Xtensaバックエンド付きZigをダウンロード # (標準Zigビルドには0.12からXtensaサポートが含まれています) curl -LO https://ziglang.org/download/0.15.2/zig-macos-aarch64-0.15.2.tar.xz tar xf zig-macos-aarch64-0.15.2.tar.xz export PATH=$PWD/zig-macos-aarch64-0.15.2:$PATH ステップ3: M5Stack用Zylixをビルド # # M5Stackシェルに移動 cd shells/m5stack # ホスト用にビルド(テスト用) zig build # ESP32-S3用にビルド zig build -Dtarget=xtensa-esp32s3-none # テストを実行 zig build test ステップ4: デバイスにフラッシュ # # ESP-IDFツールを使用 idf.py -p /dev/tty.usbserial-* flash monitor ドライバ実装 # ディスプレイドライバ(ILI9342C) # ILI9342Cドライバは完全なLCD制御を提供します: