Makepad リファレンス
デバッグ、コード品質、高度なレイアウトパターンのリファレンス資料。
クイックナビゲーション
| トピック | 説明 |
|---|---|
| トラブルシューティング | 一般的なエラーと修正 |
| コード品質 | Makepad対応のリファクタリング |
| アダプティブレイアウト | デスクトップ/モバイルレスポンシブデザイン |
一般的な問題クイックリファレンス
| エラー | クイックフィックス |
|---|---|
no matching field: font | text_style: <THEME_FONT_*>{} を使用 |
カラーパースエラー（e で終わる） | 最後の桁を変更（例：#14141e → #14141f） |
set_text 引数不足 | 第一引数として cx を追加 |
| UIが更新されない | 変更後に redraw(cx) を呼び出す |
| ウィジェットが見つからない | IDのスペルをチェック、パスには ids!() を使用 |
一般的なビルドエラー
エラー："no matching field: font"
// ❌ 間違い
<Label> { font: "Bold" }
// ✅ 正しい
<Label> { text_style: <THEME_FONT_BOLD>{} }
エラー：カラーパース失敗
// ❌ 間違い - 'e' で終わる
draw_bg: { color: #14141e }
// ✅ 正しい - 最後の桁を変更
draw_bg: { color: #14141f }
エラー：ウィジェットが再描画されない
// ❌ 間違い - 変更が見えない
self.label.set_text(&mut cx, "新しいテキスト");
// ✅ 正しい - 再描画をトリガー
self.label.set_text(&mut cx, "新しいテキスト");
self.redraw(cx);
コード品質ガイドライン
ウィジェット拡張パターン
// 良い：再利用可能な操作のための拡張トレイトを作成
pub trait LabelExt {
fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4);
}
impl LabelExt for Label {
fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4) {
self.label(id!(text)).set_text(cx, text);
self.draw_text.color = color;
self.redraw(cx);
}
}
繰り返しパターンを避ける
// ❌ 悪い：繰り返しコード
match action {
Action1 => { self.widget1.redraw(cx); }
Action2 => { self.widget2.redraw(cx); }
Action3 => { self.widget3.redraw(cx); }
}
// ✅ 良い：共通ロジックを抽出
fn redraw_widget(&mut self, cx: &mut Cx, widget_id: WidgetId) {
self.widget(widget_id).redraw(cx);
}
アダプティブレイアウトパターン
レスポンシブサイジング
live_design! {
<View> {
// デスクトップ：固定幅、モバイル：フィル
width: { desktop: 800, mobile: Fill }
height: Fit
flow: { desktop: Right, mobile: Down }
}
}
ブレークポイントベースのレイアウト
impl Widget for MyView {
fn draw(&mut self, cx: &mut Cx2d) {
let width = cx.turtle().rect().size.x;
if width > 800.0 {
// デスクトップレイアウト
} else {
// モバイルレイアウト
}
}
}
プラットフォーム固有のスタイリング
live_design! {
<Button> {
// プラットフォーム固有のプロパティ
padding: {
desktop: {left: 20, right: 20, top: 10, bottom: 10}
mobile: {left: 15, right: 15, top: 8, bottom: 8}
}
draw_text: {
text_style: {
font_size: { desktop: 14.0, mobile: 16.0 }
}
}
}
}
デバッグヒント
ライン情報を有効にする
# より良いエラーメッセージのためにライン情報付きで実行
MAKEPAD=lines cargo +nightly run
ロギング
// デバッグ用のログを追加
log!("値: {:?}", my_value);
log!("状態: {} / {}", self.counter, self.is_loading);
log!("イベント: {:?}", event);
ウィジェットインスペクター
// ウィジェットツリーを出力
fn debug_widget_tree(&self, cx: &Cx, depth: usize) {
let indent = " ".repeat(depth);
log!("{}ウィジェット: {:?}", indent, self.widget_uid());
for child in self.children() {
child.debug_widget_tree(cx, depth + 1);
}
}
パフォーマンスヒント
- 大きなリストには PortalList を使用 - 仮想スクロールがパフォーマンスを向上
- 不要な再描画を避ける - 状態が変更されたときのみ
redraw(cx)を呼び出す - 重い計算をキャッシュ - 結果をウィジェット状態に保存
- GPUシェーダーを使用 - ビジュアルエフェクトをGPUにオフロード
リソース
- Makepad リポジトリ
- Robrix - 実用リファレンス
- Moly - 実用リファレンス
使用シナリオ
- Makepad Reference が自分のワークフローをカバーするか先に確認したい場合。
関連：Makepad Components Gallery、Makepad Core Concepts。分類は skills。
コメント
まだコメントがありません。最初のコメントを投稿してください！
関連ツール
Month Visit—DR: —AS: —
Month Visit—DR: —AS: —
関連インサイト
Anthropic Subagent: マルチエージェント時代のアーキテクチャ革命
Anthropicのマルチエージェントアーキテクチャ設計を徹底解説。Subagentによるコンテキストウィンドウ制限の突破、90%のパフォーマンス向上、Claude Codeでの実際の応用について学びます。
リポジトリの作業で AI コーディング CLI を選ぶ
Claude Code、Codex CLI、OpenCode、Pi、omp、DeepSeek Harness、Grok Build を、実際に回す作業に合わせて選ぶ。2026-10-06 に公式ドキュメントを再確認。
Skills + Hooks + Plugins：AnthropicによるAIコーディングツールの拡張性の再定義
Claude CodeのSkills、Hooks、Pluginsという三位一体アーキテクチャを深く分析し、なぜこの設計がGitHub CopilotやCursorよりも先進的なのか、そしてオープンスタンダードを通じてAIコーディングツールの拡張性をどのように再定義しているかを探ります。