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 エディターの両方に影響を与えます。詳細については、エディター/デバッガータブ基本設定を参照してください。