matlab-build-app

MATLAB アプリの構築

MATLAB アプリに最適なアーキテクチャを判断し、内部リファレンスに基づく実装計画を作成して、構築を実行します。UIFigure アプリの場合は、必要に応じて App Designer 形式にシリアライズします。

このスキルを使う場合

次の場合にこのスキルを使います。

• MATLAB アプリ、GUI、またはインタラクティブツールの構築をユーザーが希望している
• 「このアプリはどう構築すればよいですか？」や「どの方法を使えばよいですか？」と尋ねられた
• ユーザーがアプリについて説明している（実装方法の指定がある場合もない場合も含む）
• ユーザーが MATLAB app、GUI、uifigure、uihtml、インタラクティブツール、ダッシュボード、可視化アプリ、App Designer、.mlapp、プレーンテキストアプリに言及している
• ユーザーが空間的なレイアウト要件を説明している（ダッシュボード、コントロールパネル、サイドバー、タブ、ウィザード、ステッパー、キャンバス、ワークスペース）
• ユーザーがすでに方法を選んでいる（例：「uihtml アプリを作ってください」）。その場合は、選ばれた方法で直接対応する

このスキルを使わない場合

• UI コンポーネントを伴わない MATLAB の計算だけに関する依頼
• ユーザーが既存のアプリの変更を求めている場合 → references/editing-guide.md を読む
• ユーザーが App Designer の形式間の変換を希望している場合（例：.mlapp からプレーンテキストへの変換、またはその逆）→ App Designer で「File > Save As」を使うよう案内します。プログラムによる変換は試みないでください。

重要なルール

• ユーザーがすでに方法を指定している場合を除き、方法を推奨する前に必ず要件を確認する質問をします
• 実装計画を作成する前に、選択する方法を必ずユーザーに確認します
• コードを書く前に、内部リファレンスに基づく実装計画を必ず作成します
• 計画は作業ディレクトリ内のファイル（<app-name>-plan.md）に必ず保存します
• 方法があらかじめ指定されている場合を除き、ユーザーの制約を把握せずに方法を推奨してはいけません
• ユーザーから明示的に依頼されない限り、ダークモード、カスタムカラー、ビジュアルテーマを適用してはいけません
• 推奨は指示ではなくガイダンスとして必ず提示します。最終的な判断はユーザーに委ねます
• アーキタイプは見た目ではなく、ユーザーの主なタスクに基づいて必ず選択します
• 1つのアプリ内で2つのアーキタイプを同等に扱ってはいけません。必ず1つを主要なコンテナーとします
• UIFigure アプリでは、すべての構造的レイアウトに必ず uigridlayout を使います。Position に基づくサイズ指定は使いません
• UIHTML／ウェブアプリでは、構造的なパネルの配置に必ず CSS Grid または Flexbox を使います。構造的なパネルに絶対配置は使いません
• クローム（ヘッダー、サイドバー、タブ、ステップインジケーター）は、空間的に安定した状態を保つ必要があります
• バックグラウンド実行（約1秒を超える操作）には、クラス構造のアプリが必要です。必ず事前に references/background-tasks.md を読みます。parfeval／backgroundPool／DataQueue の連携処理を記憶だけで手書きしてはいけません。App Designer アプリ（.mlapp またはプレーンテキスト）では、必ず addBackgroundTask 動詞を使います。インフラストラクチャを独自に実装したり、スタンドアロンのプログラム用手動配線を再利用したりしてはいけません。バックグラウンド処理が必要なフラットな入れ子関数アプリは、これらのいずれかに移行する必要があります
• App Designer のシリアライズでは、構築前に必ず references/app-designer/agent-guide-shared.md（所有権モデル、編集規律、プロパティのルール、引用符の扱いを解説）と、形式別ガイド（agent-guide-mlapp.md または agent-guide-plaintext.md）を読みます。これらのドキュメントを唯一の信頼できる情報源とし、読む前にアプリファイルを編集してはいけません

ワークフロー

User request arrives
        │
        ├── Path NOT specified → Full Discovery
        │       │
        │       ▼
        │   Ask Q1-Q4 (purpose, lifespan, polish, team skills)
        │       │
        │       ▼
        │   Identify layout archetype
        │       │
        │       ▼
        │   Recommend UIFigure vs UIHTML based on Q1-Q4
        │       │
        │       ▼
        │   *** STOP: Present recommendation and WAIT for user confirmation ***
        │   (Do NOT produce a plan or read references until user says yes)
        │       │
        │       ▼
        │   Ask Q5 (FINAL): Serialization format? (UIFigure apps only)
        │       │
        │       ├── App Designer → release check, present format choice,
        │       │       continue with UIFigure references + add serialization step
        │       │
        │       └── Standalone programmatic → no extra step
        │       │
        │       ▼
        │   Produce Implementation Plan → write to <app-name>-plan.md
        │       │
        │       ▼
        │   User reviews plan → confirms or adjusts
        │       │
        │       ▼
        │   Begin building (read references per the plan)
        │
        └── Path IS specified
                │
                ├── Serialization explicit (e.g., ".mlapp app", "plain-text app")
                │       → Skip Q5, proceed with stated format
                │       → Ask only missing requirements + archetype if unclear
                │       → Produce Implementation Plan
                │
                ├── Architecture explicit but serialization not stated
                │   (e.g., "build me a uifigure app")
                │       → Still ask Q5 (serialization) before planning
                │       → Ask missing requirements + archetype if unclear
                │       → Produce Implementation Plan
                │
                └── UIHTML or standalone programmatic explicit
                        → Skip Q5 entirely (not applicable)
                        → Ask missing requirements + archetype if unclear
                        → Produce Implementation Plan

要件確認の質問

決まりきったチェックリストとしてではなく、会話の中で質問します。まず要件とレイアウトの意図を把握し、シリアライズに関する質問はアプリの要件を理解した後、最後に尋ねます。

基本的な質問

1. アプリは何をするもので、誰を対象にしていますか？

このアプリでは何をしますか？誰が使いますか？

「ダッシュボード」「コントロールパネル」「ステップごとの操作」「ワークスペース」といった、アーキタイプを示す言葉に注目します。

2. 短期間使うツールですか、それとも継続的に保守するものですか？

継続的に保守・進化させるものですか？それとも、簡易的な概念実証用ツールですか？

• 継続的に保守する → 残りの質問に進みます。チームのスキルが重要です
• 一時的に使う → UIHTML アプリの方向を優先します。チームに関する質問は省略できます

3. UIにはどの程度の仕上がりが必要ですか？

MATLAB の標準的なボタン、スライダー、テーブル、プロットで十分ですか？それとも、ブランドに合わせたもの、アニメーション付きのもの、あるいは視覚的に豊かなものなど、カスタムビジュアルが必要ですか？

• 標準コントロールで十分 → UIFigure アプリの可能性が高いです
• カスタムビジュアルが必要 → UIHTML アプリの可能性が高いです

4. 今後、このアプリを誰が担当しますか？

MATLAB だけに慣れた人が保守しますか？それとも、ウェブ技術にも慣れた人が保守しますか？

継続的に保守するアプリの場合のみ質問します。

• MATLAB のみを扱うチーム → UIFigure アプリ
• ウェブ技術にも慣れたチーム → UIHTML アプリ

5.（最終質問）このアプリをどのように保存しますか？

App Designer 内で開いて編集できるようにしますか？それとも、スタンドアロンのプログラムファイル（App Designer に依存しないもの）を使いますか？

これはアーキテクチャではなく、シリアライズに関する質問です。回答にかかわらず、アプリの構造（コンポーネント、レイアウト、コールバック）は UIFigure の知識に基づいて設計されます。Q5 で決まるのは、その設計をディスクに保存する方法だけです。

• App Designer → .mlapp またはプレーンテキストの .m + .xml を使用します。リリースを確認してください（プレーンテキスト形式には R2026b 以降が必要です）。Q3 でカスタムビジュアルが必要とされた場合は、UIHTML と比べて App Designer では視覚的なカスタマイズに制約があることを伝え、確認します。
• スタンドアロンのプログラム形式 → プログラム形式の .m コードを使用します。App Designer には依存しません。MVVM では複数のファイルが必要になる場合がありますが、これはビルド時に決定します。

追加の質問（使用する方向が明確でない場合のみ）

• 操作スタイル： リアルタイムのフィードバックが必要ですか？ → UIFigure をやや優先します
• 既存の作業： 既存の MATLAB UI コードがありますか？ → UIFigure。既存のウェブアセットがありますか？ → UIHTML
• 配布： MATLAB の外部でも動作させる必要がありそうですか？ → UIHTML
• 長時間の計算： 1 秒を超える処理がありますか？ → バックグラウンドタスクを使用します（references/background-tasks.md を参照）。これには、クラス構造のアプリが必要です。シリアライズ形式が App Designer の場合、またはスタンドアロンのプログラム形式の場合は MVVM を使用します。負荷の高い処理、長時間かかる処理、一度きりの処理には、必ずバックグラウンドタスクを使用します。タイマーは決して使用しません。タイマーが適しているのは、メインスレッドで UI を更新する必要がある、一定間隔で実行する軽量な処理に限られます（references/timers.md を参照）。

方向を決めるロジック

2 段階で進めます。まずアーキテクチャ（Q1～Q4）を決定し、次にシリアライズ形式（Q5）を決定します。

Stage A — Architecture (from Q1-Q4):

Ephemeral app? → Strong default to UIHTML app

Maintained app? → Weigh signals:

Strong UIFigure signals:
  ✓ Maintained + MATLAB-only team
  ✓ Standard UI components sufficient
  ✓ Tight real-time interaction
  ✓ Existing MATLAB UI code

Strong UIHTML signals:
  ✓ Ephemeral (regardless of team)
  ✓ Maintained + web-skilled team
  ✓ Custom visuals, branded look, animations
  ✓ Existing web assets
  ✓ Future portability outside MATLAB

UIFigure + uihtml accent:
  Mostly standard app but needs one custom visualization panel.

Stage B — Serialization format (Q5, UIFigure apps only):

Q5 = Standalone → programmatic code (no App Designer). Done.

Q5 = App Designer → adds a serialization layer ON TOP of Stage A.
  UIFigure references still apply in full. Serialization is IN ADDITION TO,
  not instead of, the normal UIFigure build.
  → Check release, present format choice (plain text vs .mlapp).
  → If Stage A indicated UIHTML for custom visuals, surface the trade-off:
    App Designer constrains custom visuals — confirm before committing.

優先順位： 1. アーキテクチャ（Q1～Q4）　2. シリアライズ（Q5、UIFigure の場合のみ適用）

各選択肢の概要

アーキテクチャ	主な強み
UIFigure アプリ	言語を 1 つに絞れ、あらゆる MATLAB 開発者が保守できます
UIHTML アプリ	視覚的に完全な制御ができ、豊かなインタラクティビティを実現できます
UIFigure + アクセント	カスタムビジュアルが 1 つ必要な場合に、両方の利点を活かせます

UIFigure アプリでは、シリアライズ形式を 3 つから選択できます。

形式	トレードオフ
プログラム形式の .m	スタンドアロンで、App Designer に依存しません
App Designer の .mlapp	バイナリ形式で、どのリリースでも動作し、App Designer で開けます
App Designer のプレーンテキスト .m + .xml	ソース管理が可能で、AI で編集でき、R2026b 以降が必要です

レイアウトのアーキタイプ

ユーザーの主なタスクに基づいて選択します。

アーキタイプ	ユーザーの主なタスク	構造
ダッシュボード	概要をひと目で確認し、比較する	KPI カード + グラフ + テーブル。読み取り専用
エクスプローラー	パラメーターを調整し、リアルタイムの結果を確認する	サイドバーのコントロール + ライブ表示
タブ形式	独立したセクション間を移動する	タブバー + コンテンツパネル
ウィザード	順序に沿ったワークフローを完了する	ステップインジケーター + 一度に 1 つのステップ
キャンバス	空間的な成果物を作成、確認、編集する	中央のワークスペース + ツール

不明な場合は、「ユーザーは主に結果を確認する（ダッシュボード）、コントロールを調整する（エクスプローラー）、セクションを切り替える（タブ形式）、ステップを順に進める（ウィザード）、それとも中央の図を操作する（キャンバス）でしょうか？」と尋ねます。

実装計画

パスとアーキタイプを確認したら、計画を作成し、作業ディレクトリ内の <app-name>-plan.md に書き込みます。承認を求める際に、簡潔な概要をインラインで提示します。

計画テンプレート

**Implementation Plan: [App Name]**

**Architecture:** [UIFigure app / UIHTML app / UIFigure + accent]
**Serialization:** [Programmatic .m / App Designer .mlapp / App Designer plain text]
**Layout:** [Archetype] — [one sentence describing spatial structure]

**Structure:**
- [Major panel/area — spatial description]
- [e.g., "Left sidebar (220px) with date range picker, category filter, refresh button"]
- [e.g., "Main area with line chart showing filtered results"]

**Key behaviors:**
- [User-visible interaction effects]

**Internal references that will be used:**

| Reference | Role in this app |
|-----------|-----------------|
| `references/path/file.md` | [what it provides] |
| ... | ... |

**External skills:**
- `matlab-build-chart` — [role, if applicable]
- `matlab-apply-theme` — [role, if applicable]

**File organization:**
[app directory tree]

**Implementation sequence:**
1. [First reference read] — [what it establishes]
2. [Next reference] — [what it adds]
3. [...]

各参照ポインターには出典情報が含まれます。[src: references/uifigure/grid-layout.md §Spanning]

計画の品質チェック

提示する前に、以下を確認します。

• 一覧にあるすべての参照に具体的な役割がある
• 構造に、ユーザーが視覚的にイメージできる空間的な用語が使われている
• 動作が、ユーザーから見える効果を説明している
• 実装の順序が論理的な構築手順になっている
• 「はい、これで希望どおりです」または「X を変更してください」と回答できるだけの具体性がある

参照ルーター

計画の承認後、関連する内部参照を読んで実装します。

UIFigure パス

構築内容	読むファイル
グリッドレイアウト、サイズ設定、コンポーネント	references/uifigure/guide.md
グリッドの詳細（スパン、折りたたみ）	references/uifigure/grid-layout.md
パネル、タブグループ、入れ子のグリッド	references/uifigure/containers.md
コンポーネントリファレンス（コントロール、表示）	references/uifigure/components.md
コールバックパターン、データ共有	references/uifigure/callbacks.md
レイアウトのレシピ（サイドバー、フォーム、分割表示）	references/uifigure/layout-patterns.md
MVVM アーキテクチャ（複雑なアプリ）	references/uifigure/mvvm-guide.md
ビューのバインディングパターン	references/uifigure/mvvm-view-binding.md
ViewModel のテスト	references/uifigure/mvvm-testing.md
バックグラウンド実行 — 概念とルーティング（最初に読む）	references/background-tasks.md
バックグラウンド実行 — 単独のプログラムによる（MVVM）接続	references/uifigure/mvvm-background-tasks.md
タイマー — 周期的なメインスレッド処理（重い処理のオフロードには使用しない）	references/timers.md

UIHTML のパス

構築するもの...	読むファイル
MATLAB-JS ブリッジ、setup()、イベント	references/uihtml/bridge-guide.md
通信パターン（4 パターン）	references/uihtml/communication-patterns.md
データ型の変換	references/uihtml/data-types.md
プラットフォームの制約	references/uihtml/platform-limitations.md
uihtml の作成、ハイブリッドレイアウト	references/uihtml/setup.md
エラー処理（両側）	references/uihtml/error-handling.md
JS MVVM アーキテクチャ	references/uihtml/mvvm-guide.md
Observable／Computed クラス	references/uihtml/mvvm-observable-classes.md
JS のビュー バインディング	references/uihtml/mvvm-view-binding.md
JS のコーディングパターン、モジュール	references/uihtml/js-coding-guide.md
JS のテストとデバッグ	references/uihtml/js-testing-debugging.md
Chart.js のセットアップとパターン	references/uihtml/charting-guide.md
チャートの種類の選択	references/uihtml/chart-type-selection.md
Chart.js の初期化	references/uihtml/chartjs-setup.md
折れ線グラフと棒グラフ	references/uihtml/line-bar-charts.md
ドーナツグラフと散布図	references/uihtml/doughnut-scatter-charts.md
チャートデータの更新	references/uihtml/chart-updates.md
チャートとブリッジの連携	references/uihtml/chart-bridge-integration.md
チャートのパフォーマンス	references/uihtml/chart-performance.md
CSS のスタイル設定とトークン	references/uihtml/styling-guide.md
コンポーネントの CSS（ボタン、入力欄）	references/uihtml/component-styles.md
CSS レイアウトパターン	references/uihtml/css-layout-patterns.md
ブランドデザイントークン	references/uihtml/brand-design-tokens.md
ダークモード	references/uihtml/dark-mode.md
外部カラー スキーム	references/uihtml/external-color-schemes.md

App Designer のシリアライズ（UIFigure アプリのみ）

重要： App Designer のシリアライズは、通常の UIFigure ビルドの後に行う追加の手順です。アプリの構造を設計するには、上記の UIFigure パスのリファレンス（コンポーネント、グリッドレイアウト、コールバック、コンテナー、レイアウトパターン）も必ず読んでください。以下のシリアライズ関連のリファレンスでは、その設計をディスクに保存する方法のみを説明します。

どちらの形式でも、同梱の scripts/ ツールを介して同じ AppDesignerAgentInterface API を使用します。異なるのは、create()／open() に渡すファイル拡張子だけです。

最初に読む（両方の形式）：

構築するもの...	読むファイル
動詞、ビルド手順、編集、save()／validate()／finalize()、inspect()	references/app-designer/agent-guide-shared.md
バックグラウンド実行 — 概念とルーティング（最初に読む）	references/background-tasks.md
バックグラウンド実行 — addBackgroundTask 動詞のリファレンス	references/app-designer/background-tasks.md

プレーンテキスト（.m + .xml）：

構築するもの...	読むファイル
所有モデル、.xml の作成、フロー、注意点	references/app-designer/agent-guide-plaintext.md
classdef の構造とブロックの順序規則	references/app-designer/plaintext/classdef-template.md
XML の構造と設定するプロパティ	references/app-designer/plaintext/xml-template.md
コンポーネントごとのプロパティ名、型、デフォルト値	references/app-designer/plaintext/property-reference.md
権威ある XML スキーマ	references/app-designer/plaintext/matlabAppSchema.xsd

バイナリ .mlapp：

構築するもの...	読むファイル
ビルドフロー、ネイティブプロパティ値、save()／finalize()	references/app-designer/agent-guide-mlapp.md

既存のアプリの編集

編集するもの...	読むファイル
既存のアプリ全般（形式を判定し、適切な方法に案内）	references/editing-guide.md

アーキタイプのリファレンス

アーキタイプ	ファイル
ダッシュボード	references/archetypes/dashboard.md
エクスプローラー	references/archetypes/explorer.md
タブ型	references/archetypes/tabbed.md
ウィザード	references/archetypes/wizard.md
キャンバス	references/archetypes/canvas.md

外部スキル（呼び出すものであり、読み込むものではありません）

• matlab-build-chart — アプリに MATLAB のプロットが含まれる場合（UIFigure パスまたは UIFigure+accent）
• matlab-apply-theme — アプリでダークモード、ブランドカラー、またはカスタムパレットが必要な場合（UIFigure パス）

プラン承認後

すべての UIFigure アプリ（シリアル化形式を問わず）

1. 空間構成の骨格として、アーキタイプのリファレンスを読みます
2. MVVM が適切な場合（エクスプローラー、ウィザード、キャンバス、または複雑なアプリ）：アーキテクチャのリファレンスを読みます
3. レイアウト（グリッド、コンポーネント、コンテナー）を決めるために、UIFigure ガイドを読みます
4. 実装手順に沿って、パス固有のリファレンスを重ねて読み込みます
5. ビジュアルを磨くには、matlab-apply-theme を呼び出す（UIFigure）か、スタイル設定のリファレンスを読みます（UIHTML accent）
6. グラフには、matlab-build-chart を呼び出す（UIFigure）か、グラフ作成のリファレンスを読みます（UIHTML accent）
7. App Designer でシリアル化する場合： アプリデザイナーのリファレンスドキュメント（共通ガイド＋形式別ガイド）を読み、AppDesignerAgentInterface API を使用してアプリを保存します。ドキュメントには、ビルドフロー全体、プロパティのルール、編集手順が記載されています。

UIHTML パス

1. 空間構成の骨格として、アーキタイプのリファレンスを読みます
2. MVVM が適切な場合：JS MVVM アーキテクチャのリファレンスを読みます
3. MATLAB と JS の接続を確立するために、ブリッジガイドを読みます
4. 実装手順に沿って、パス固有のリファレンスを重ねて読み込みます
5. ビジュアルを磨くには、スタイル設定／CSS のリファレンスを読みます
6. グラフには、グラフ作成のリファレンスを読みます

形式のフォールバック

プレーンテキストのパスで解決できないエラー（バージョンの不一致、サポートされていないコンポーネントなど）が発生した場合は、.mlapp パスに切り替えます。どちらの形式でも同じ動詞を使用します。ハンドルを .mlapp 拡張子で再作成してください。完全にプログラムで UIFigure コードを書く方法への切り替えは、最後の手段にしてください。

推奨テンプレート

推奨アーキテクチャ：[UIFigure アプリ／UIHTML アプリ／UIFigure + accent]

ご説明いただいた内容に基づくと：

• [主な判断材料 1]
• [主な判断材料 2]
• [主な判断材料 3（該当する場合）]

これが意味すること： [開発体験についての1～2文]

トレードオフ： [もう一方のパスと比べて失う主なもの]

シリアル化（App Designer の場合）： [理由]により、[.mlapp／プレーンテキスト]をおすすめします。アプリの構造は変わらず、保存方法だけが変わります。

この方法で進めますか？それとも、もう一方のパスをご希望ですか？

---

Copyright 2026 The MathWorks, Inc.

---