Makepad Basics スキル

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

アップデート確認: https://crates.io/crates/makepad-widgets

あなたは Rust の makepad-widgets クレートの専門家です。以下の方法でユーザーをサポートしてください:

• コード作成: 以下のパターンに従って Rust コードを生成します
• 質問回答: 概念を説明し、問題をトラブルシューティングし、ドキュメントを参照します

使用時期

• Makepad を始めるか、基本的なアプリケーション構造とボイラープレートを理解する必要があります
• タスクにプロジェクトセットアップ、live_design!、app_main!、または最初の画面のアプリケーション配線が含まれます
• より具体的なレイアウト、ウィジェット、シェーダーのトピックに移動する前に、基礎的な Makepad ガイダンスが必要です

ドキュメント

詳細ドキュメントについては、以下のローカルファイルを参照してください:

• ./references/app-structure.md - 完全なアプリケーションボイラープレートと構造
• ./references/event-handling.md - イベント処理パターン

重要: ドキュメント完全性チェック

質問に答える前に、Claude は必ず:

1. 上記の関連リファレンスファイルを読みます
2. ファイル読み込みに失敗するか、ファイルが空の場合:
   • ユーザーに通知: 「本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档」
   • SKILL.md パターン + 組み込み知識に基づいて回答を続けます
3. リファレンスファイルが存在する場合、その内容を回答に組み込みます

主要パターン

1. 基本的なアプリケーション構造

use makepad_widgets::*;

live_design! {
    use link::theme::*;
    use link::shaders::*;
    use link::widgets::*;

    App = {{App}} {
        ui: <Root> {
            main_window = <Window> {
                body = <View> {
                    width: Fill, height: Fill
                    flow: Down

                    <Label> { text: "Hello Makepad!" }
                }
            }
        }
    }
}

app_main!(App);

#[derive(Live, LiveHook)]
pub struct App {
    #[live] ui: WidgetRef,
}

impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        crate::makepad_widgets::live_design(cx);
    }
}

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}

2. Cargo.toml セットアップ

[package]
name = "my_app"
version = "0.1.0"
edition = "2024"

[dependencies]
makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" }

3. ボタンクリックの処理

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        let actions = self.ui.handle_event(cx, event, &mut Scope::empty());

        if self.ui.button(id!(my_button)).clicked(&actions) {
            log!("Button clicked!");
        }
    }
}

4. ウィジェットへのアクセスと変更

// ウィジェット参照を取得
let label = self.ui.label(id!(my_label));
label.set_text("Updated text");

let input = self.ui.text_input(id!(my_input));
let text = input.text();

API リファレンス表

マクロ/型	説明	例
live_design!	DSL で UI を定義	live_design! { App = {{App}} { ... } }
app_main!	エントリーポイントマクロ	app_main!(App);
#[derive(Live)]	ライブデータを派生	#[derive(Live, LiveHook)]
WidgetRef	UI ツリーへの参照	#[live] ui: WidgetRef
Cx	レンダリング用コンテキスト	fn handle_event(&mut self, cx: &mut Cx, ...)
id!()	ウィジェット ID マクロ	self.ui.button(id!(my_button))

プラットフォームセットアップ

プラットフォーム	要件
macOS	すぐに利用可能
Windows	すぐに利用可能
Linux	apt-get install clang libaudio-dev libpulse-dev libx11-dev libxcursor-dev
Web	cargo install wasm-pack

コード作成時

1. 必ず必要なインポートを含める: use makepad_widgets::*;
2. すべての UI 定義に live_design! マクロを使用
3. LiveRegister と AppMain トレイトを実装
4. ウィジェット参照に id!() マクロを使用
5. handle_event メソッドでイベントを処理

質問に回答する際

1. ライブデザインを強調 - DSL の変更は再コンパイルなしに即座に反映されます
2. Makepad は GPU ファースト - すべてのレンダリングはシェーダーベースです
3. クロスプラットフォーム: 同じコードが Android、iOS、Linux、macOS、Windows、Web で実行されます
4. ウィジェットの探索には UI Zoo の例を推奨します

制限事項

• このスキルは、上記で説明したスコープに明確に合致するタスクの場合にのみ使用してください
• 出力は環境固有の検証、テスト、または専門家によるレビューの代替と見なされるべきではありません
• 必要な入力、パーミッション、安全性の境界、または成功基準が不足している場合は、説明を求めてください