Makepad パターン
堅牢なMakepadアプリケーション構築のための実証済みパターン。
クイックナビゲーション
| カテゴリ | 説明 |
|---|---|
| ウィジェットパターン | 拡張トレイト、モーダル、折りたたみ、リスト |
| データパターン | 非同期読み込み、ストリーミング、ステートマシン |
| 高度なパターン | Tokio統合、ツールチップ、テーマ切り替え |
ウィジェット拡張パターン
pub trait ButtonExt {
fn set_enabled(&mut self, cx: &mut Cx, enabled: bool);
}
impl ButtonExt for Button {
fn set_enabled(&mut self, cx: &mut Cx, enabled: bool) {
if enabled {
self.animator_play(cx, id!(hover.off));
} else {
self.animator_play(cx, id!(disabled.on));
}
}
}
モーダルオーバーレイパターン
live_design! {
<View> {
// メインコンテンツ
<Button> { text: "モーダルを表示" }
// モーダルオーバーレイ(初期は非表示)
modal_overlay = <View> {
visible: false
abs_pos: vec2(0, 0)
width: Fill, height: Fill
draw_bg: { color: #00000080 }
<View> {
// モーダルコンテンツ
width: 400, height: 300
<Label> { text: "モーダルコンテンツ" }
}
}
}
}
非同期読み込みパターン
pub enum LoadState<T> {
Loading,
Loaded(T),
Error(String),
}
impl Widget for MyWidget {
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
match &self.load_state {
LoadState::Loading => {
// ローディングスピナーを表示
}
LoadState::Loaded(data) => {
// データをレンダリング
}
LoadState::Error(msg) => {
// エラーを表示
}
}
}
}
ステートマシンパターン
#[derive(Clone, Debug, PartialEq)]
pub enum ViewState {
List,
Detail(String),
Edit(String),
Loading,
}
impl MyView {
fn transition_to(&mut self, cx: &mut Cx, new_state: ViewState) {
self.state = new_state;
self.redraw(cx);
}
}
Tokio統合パターン
// main.rs で
fn main() {
let runtime = tokio::runtime::Runtime::new().unwrap();
let _guard = runtime.enter();
makepad_widgets::live_design(live_design);
makepad_widgets::makepad_platform::event_loop::event_loop(|cx, event| {
// イベント処理
});
}
// ウィジェットで
fn fetch_data(&mut self, cx: &mut Cx) {
let sender = cx.get_sender();
tokio::spawn(async move {
let data = fetch_from_api().await;
sender.send(DataLoadedEvent(data));
});
}
テーマ切り替えパターン
live_design! {
THEME_LIGHT = {
bg_color: #FFFFFF
text_color: #000000
}
THEME_DARK = {
bg_color: #1E1E1E
text_color: #FFFFFF
}
<View> {
theme: $(THEME_LIGHT)
draw_bg: { color: (theme.bg_color) }
}
}
パターン選択ガイド
UI状態
- シンプルな切り替え → インスタンス変数
- 複数の状態 → ステートマシンパターン
- 排他的選択 → ラジオナビゲーションパターン
データ
- 一回限りの取得 → 非同期読み込みパターン
- 段階的表示 → ストリーミング結果パターン
- 設定の永続化 → ローカル永続化パターン
パフォーマンス
- 大きなリスト → リストテンプレートパターン
- 重いビュー → LRUビューキャッシュパターン
- バックグラウンド作業 → Tokio統合パターン
リソース
コメント
まだコメントがありません。最初のコメントを投稿してください!
関連ツール
Makepad コンポーネントギャラリー
makepad.nl
すべてのMakepad組み込みウィジェットの使用例付きクイックリファレンス。ボタン、入力、スライダー、チェックボックス、ドロップダウン、ラベル、アイコン、仮想リストをカバー。
Makepad コア概念
makepad.nl
live_design!マクロを使用したレイアウトシステム、ウィジェット、イベント処理、スタイリングを含むMakepad UI開発の基本的な構成要素。
Makepad デプロイメント
makepad.nl
デスクトップ(Linux、Windows、macOS)、モバイル(Android、iOS)、Web(Wasm)プラットフォームでMakepadアプリケーションを配布用にパッケージ化。完全なビルドとデプロイガイド。
関連インサイト

Anthropic Subagent: マルチエージェント時代のアーキテクチャ革命
Anthropicのマルチエージェントアーキテクチャ設計を徹底解説。Subagentによるコンテキストウィンドウ制限の突破、90%のパフォーマンス向上、Claude Codeでの実際の応用について学びます。
Claude Skills 完全ガイド - 必須10大 Skills 徹底解説
Claude Skills の拡張メカニズムを深掘りし、10の中核スキルと Obsidian 連携を詳しく解説。高効率な AI ワークフロー構築を支援します
Skills + Hooks + Plugins:AnthropicによるAIコーディングツールの拡張性の再定義
Claude CodeのSkills、Hooks、Pluginsという三位一体アーキテクチャを深く分析し、なぜこの設計がGitHub CopilotやCursorよりも先進的なのか、そしてオープンスタンダードを通じてAIコーディングツールの拡張性をどのように再定義しているかを探ります。