Main Content

このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。

App Designer コード ビューでのコードの管理

[コード ビュー] には、MATLAB® エディターとほぼ同じプログラミング機能が用意されています。また、コード内の移動に役立ち、手間のかかる作業を多数回避できる豊富な機能も含まれています。たとえば、検索バーに名前の一部を入力してコールバックを検索できます。検索結果をクリックすると、そのコールバックの定義までエディターがスクロールされます。また、コールバックの名前を変更した場合は、コード内にあるそのコールバックに対する参照がすべて App Designer によって自動的に更新されます。

コンポーネント、関数、およびプロパティの管理

[コード ビュー] には、コードのさまざまな側面の管理に役立つ 3 つのペインがあります。次の表でそれぞれを説明します。

ペイン名ペインの外観ペインの機能
コンポーネント ブラウザー

Component Browser showing the property inspector for a button component.

  • コンテキスト メニュー — リスト内のコンポーネントを右クリックすると、コンポーネントの削除または名前変更、コールバックの追加、ヘルプの表示のオプションを含むコンテキスト メニューが表示されます。[コンポーネント ブラウザーにコンポーネントのラベルを含める] オプションを選択すると、グループ化されたコンポーネント ラベルが表示されます。

  • 検索バー — 検索バーに名前の一部を入力することにより、コンポーネントを簡単に見つけることができます。

  • [コンポーネント] タブ — このタブを使用して、現在選択されているコンポーネントのプロパティ値を表示または変更します。このタブの上部にある検索バーに名前の一部を入力することにより、プロパティを検索することもできます。

  • [コールバック] タブ — このタブを使用して、選択されているコンポーネントのコールバックを管理します。

コード ブラウザー

Code Browser showing the Callbacks tab with three callbacks.

  • [コールバック] タブ、[関数] タブおよび [プロパティ] タブ — これらのタブを使用して、アプリ内のコールバック、補助関数またはカスタム プロパティを追加、削除または名前変更します。[コールバック] タブまたは [関数] タブ内の項目をクリックすると、コード内の対応するセクションまでエディターがスクロールされます。コールバックの順序を組みなおすには、移動させるコールバックを選択し、そのコールバックをリスト内の新たな位置にドラッグ アンド ドロップします。これによって、エディター内のコールバックも再配置されます。

  • 検索バー — 検索バーに名前の一部を入力することにより、コールバック、補助関数またはプロパティを簡単に見つけることができます。

アプリ レイアウト

App Layout showing a thumbnail of an app that contains a radio button group, a slider and a push button.

  • アプリのサムネイル — サムネイル イメージを使用して、多数のコンポーネントを含む大規模で複雑なアプリ内でコンポーネントを探します。サムネイルでコンポーネントを選択すると、[コンポーネント ブラウザー] 内でそのコンポーネントが選択されます。

コードの編集可能セクションの識別

[コード ビュー] エディターには、コードを編集できるセクションと編集できないセクションがあります。編集不可のセクションは、App Designer によって生成され、管理されています。一方、編集可能なセクションは以下に対応します。

  • 定義する関数の本体 (コールバックや補助関数など)

  • カスタム プロパティ定義

既定のカラー スキームでは、コードの編集不可のセクションは灰色、コードの編集可能なセクションは白色です。

App code. A properties block and body of a function have a white background, while a methods block and function declaration have a gray background.

アプリのプログラミング

App Designer では、アプリは MATLAB クラスとして定義されます。アプリを作成するためにクラスやオブジェクト指向プログラミングについて理解する必要はありません。コードのこれらの側面は App Designer が管理するためです。ただし、App Designer でのプログラミングには、関数を厳密に処理する場合とは異なるワークフローが必要です。このワークフローの概要は、ツールストリップの [リソース] タブで [ヒントの表示] ボタンをクリックすることにより、いつでも確認できます。

UI コンポーネントの管理

アプリに UI コンポーネントを追加すると、App Designer は、そのコンポーネントに既定の名前を割り当てます。その名前 (接頭辞 app を含む) を使用して、コード内でコンポーネントを参照します。コンポーネントの名前は、[コンポーネント ブラウザー] で名前をダブルクリックし、新しい名前を入力することによって変更できます。名前が変更されたコンポーネントに対する参照はすべて、App Designer によって自動的に更新されます。

Component Browser showing the name of a figure and a button component. The name of the button is app.Button, and the text "Button" is highlighted and editable.

コード内でコンポーネントの名前を使用するには、[コンポーネント ブラウザー] から名前をコピーすると時間を節約できます。コードの編集可能領域で、コンポーネント名を追加する場所にカーソルを合わせます。次に、[コンポーネント ブラウザー] でコンポーネント名を右クリックし、[カーソルの位置に挿入] を選択します。あるいは、コンポーネント名をリストからコードへドラッグすることもできます。

Context menu associated with the app.Button component. The context menu includes the Insert at Cursor option.

コンポーネントを削除するには、[コンポーネント ブラウザー] で名前を選択して Delete キーを押します。

コールバックの管理

ユーザーの操作にコンポーネントが応答するようにするには、コールバックを追加します。[コンポーネント ブラウザー] でコンポーネントを右クリックして [コールバック][(コールバック プロパティ) コールバックの追加] を選択します。

アプリからコンポーネントを削除すると、関連するコールバックは、未編集で他のコンポーネントと共有されていない場合に限り、App Designer によって削除されます。

コールバックを手動で削除するには、[コード ブラウザー][コールバック] タブでコールバック名を選択し、Delete キーを押します。

コールバックの詳細については、App Designer でコールバックを記述するを参照してください。

アプリ内でのデータの共有

データを保存し、異なるコールバック間で共有するには、カスタム プロパティを作成します。たとえば、アプリにデータ ファイルを読み取らせて、アプリ内の異なるコールバックからそのデータへのアクセスを許可する場合などです。

プロパティを作成するには、[エディター] タブで [プロパティ] ドロップダウンを展開して、[プライベート プロパティ] または [パブリック プロパティ] を選択します。App Designer によってテンプレート プロパティ定義が作成され、カーソルがその定義の横に置かれます。必要に応じてプロパティの名前を変更します。

properties (Access = public)
        X % Average cost
end

コード内でプロパティを参照するには、app.Propertyname 形式のドット表記を使用します。たとえば、app.X は、X という名前のプロパティを参照します。

カスタム プロパティの作成と使用の詳細については、App Designer アプリ内でのデータの共有を参照してください。

複数の場所で実行されるコードの単一ソース化

あるコード ブロックをアプリの複数箇所で実行する場合は、補助関数を作成します。たとえば、ユーザーが編集フィールドの数値を変更した後やドロップダウン リストで項目を選択した後に、プロットを更新する場合などです。補助関数を作成すると、共通のコマンドを単一ソースにすることができ、冗長なコード セットを維持する必要がなくなります。

補助関数を追加するには、[エディター] タブで [関数] ドロップダウンを展開して、[プライベート関数] または [パブリック関数] を選択します。App Designer によってテンプレート関数が作成され、カーソルがその関数の本体に置かれます。

補助関数を削除するには、[コード ブラウザー][関数] タブで関数名を選択し、Delete キーを押します。

補助関数の作成の詳細については、補助関数によるコードの再利用を参照してください。

入力引数の作成

アプリに入力引数を追加するには、[エディター] タブで [アプリの入力引数] をクリックします。入力引数は一般的に、複数のウィンドウをもつアプリの作成に使用されます。詳細については、App Designer の起動タスクおよび入力引数を参照してください。

アプリのヘルプ テキストの追加

アプリに関する情報をユーザーに提供するためにアプリの概要および説明を追加します。ヘルプ テキストを追加したり既存のヘルプ テキストを編集したりするには、[アプリのヘルプ テキスト] をクリックします。[アプリのヘルプ テキスト] ダイアログ ボックスを使用して、アプリの簡単な概要とアプリの動作や使用方法に関する詳細な説明を指定します。このヘルプ テキストは、App Designer によってアプリの定義ステートメントの下にコメントとして追加されます。

MATLAB コマンド ウィンドウにアプリのヘルプ テキストを表示するには、関数 help を呼び出してアプリ名を指定します。さらに、アプリのヘルプ テキストはアプリのドキュメンテーション ページの上部にも表示されます。アプリのドキュメンテーション ページは、関数 doc を呼び出してアプリ名を指定すると表示できます。

アプリの実行インスタンスを一度に 1 つのみに制限

App Designer でアプリを作成する場合、そのアプリについて 2 つの実行動作の選択オプションがあります。

  • アプリの実行インスタンスを一度に 1 つのみ許可。

  • 同時にアプリの複数のインスタンスが実行されるのを許可。これは既定の動作です。

アプリの実行動作を変更するには、[コンポーネント ブラウザー] からアプリ ノードを選択します。次に、[アプリ] タブの [コード オプション] セクションで、[単一の実行インスタンス] をオンまたはオフにします。

Component Browser Inspector for the app node. The Code Options section is expanded and shows the Single Running Instance check box.

[単一の実行インスタンス] がオンでアプリを複数回実行すると、MATLAB は新たなインスタンスを作らずに、既存のインスタンスを再利用して前面に表示します。このオプションがオフの場合、MATLAB はアプリが実行されるたびに新たなアプリ インスタンスを作成し、既存のインスタンスを引き続き実行します。こうした実行動作は、MATLAB ツールストリップの [アプリ] タブ、またはコマンド ウィンドウから実行されるアプリに適用されます。

App Designer からアプリを実行する場合は、このオプションがオンでもオフでもアプリの動作は変わりません。App Designer は、新規インスタンスを作成する前に必ず既存のアプリ インスタンスを閉じます。

コードの問題と実行時エラーの修正

MATLAB エディターと同様に、[コード ビュー] エディターには、コード内でエラー検出に役立つコード アナライザー メッセージが表示されます。

Code Analyzer message for an edit field callback. The code in the function body sets EditField.Value. The message says "Use app.EditField to reference a property of app" and includes a button labeled "Fix".

App Designer から直接 ([実行] をクリックすることによって) アプリを実行すると、実行時にエラーが発生した場合は、コード内のエラーの原因箇所が App Designer によって強調表示されます。エラー メッセージを非表示にするには、エラー インジケーター (赤色の円) をクリックします。エラー インジケーターを非表示にするには、コードを修正して変更を保存します。

Error message. The line of code with the error has an error indicator next to it.

コード内の問題を診断するために、App Designer で対話的にアプリ コードをデバッグすることもできます。詳細については、MATLAB コード ファイルのデバッグを参照してください。

コード ビューの外観のパーソナライズ

[コード ビュー] エディターでコードが表示される方法をカスタマイズできます。コード ビューの基本設定を変更するには、MATLAB デスクトップの [ホーム] タブに移動します。[環境] セクションで [基本設定] をクリックします。

色設定の変更

コードの編集可能セクションの色設定を変更し、構文の強調表示をカスタマイズするには、[MATLAB][色] を選択して、デスクトップ ツールの色と MATLAB 構文の強調色を調整します。これらの設定は、App Designer の [コード ビュー] エディターと MATLAB エディターの両方に影響を与えます。詳細については、デスクトップの色の変更を参照してください。

コードの編集不可のセクションの背景色を変更するには、[MATLAB][App Designer] を選択して、読み取り専用の背景色を調整します。この設定を変更できるのは、[MATLAB][色の基本設定][システムの色を利用] オプションがオフの場合のみです。

タブの基本設定の変更

[コード ビュー] エディターのタブとインデントのサイズを指定するには、[MATLAB][エディター/デバッガー][タブ] を選択します。ここから、タブとインデントのサイズや、タブの動作の詳細を指定できます。これらの基本設定は、App Designer の [コード ビュー] エディターと MATLAB エディターの両方に影響を与えます。詳細については、エディター/デバッガー タブ基本設定を参照してください。

関連するトピック