Main Content

このページの内容は最新ではありません。最新版の英語を参照するには、ここをクリックします。

簡単なプログラム アプリの作成と実行

この例では、MATLAB® 関数を使用してプログラム アプリを作成および実行する方法を示します。この例では、さまざまなタイプのプロットをユーザーが対話形式で調べることができる実行可能アプリを作成するプロセスについて説明します。次の手順を使用してアプリを作成します。

  1. メインの Figure ウィンドウを作成して UI コンポーネントを配置し、プロパティを設定してコンポーネントの外観を構成することで、アプリのレイアウトを設計します。

  2. ユーザーが操作したときのアプリの応答をプログラムします。

  3. アプリを実行して、アプリの外観と動作が想定どおりであることを確認します。

simple-app-display.png

メインのアプリ関数の定義

プログラム アプリを作成するには、アプリ コードを関数ファイルに記述します。これにより、ユーザーがコマンド ウィンドウから関数の名前を入力してアプリを実行できるようになります。

simpleApp という名前の新しい関数を作成し、MATLAB パス上のフォルダーに simpleApp.m というファイル名で保存します。関数にヘルプ テキストを追加して、アプリの使用に関するコンテキストと手順を提供します。このヘルプ テキストを参照するには、コマンド ウィンドウで「help simpleApp」と入力します。

function simpleApp
% SIMPLEAPP Interactively explore plotting functions
%   Choose the function used to plot the sample data to see the
%   differences between surface plots, mesh plots, and waterfall plots

end

すべてのアプリ コードを simpleApp.m ファイル内に記述します。完全なコード例を確認するには、アプリの実行を参照してください。

UI Figure ウィンドウの作成

いずれのプログラム アプリにも、プライマリ アプリ コンテナーとして機能する UI Figure ウィンドウが必要です。これは、ユーザーがアプリを実行するときに表示されるウィンドウで、アプリを構成する UI コンポーネントが格納されます。関数uifigureを呼び出して、アプリの作成用に特別に構成された UI Figure ウィンドウを作成します。後でコード内でオブジェクトにアクセスできるように、結果の Figure オブジェクトを変数として返します。ドット表記を使用して Figure のプロパティを設定することで、Figure ウィンドウのサイズ、外観、動作を変更できます。

この例では、次のコードを関数 simpleApp に追加して UI Figure ウィンドウを作成し、そのタイトルを指定します。

fig = uifigure;
fig.Name = "My App";

アプリのレイアウトの管理

グリッド レイアウト マネージャーを使用して、Figure ウィンドウ内の UI コンポーネントの位置とサイズを管理します。これにより、各コンポーネントの行と列を指定して UI コンポーネントをグリッドに配置できます。

関数uigridlayoutを使用して、アプリにグリッド レイアウト マネージャーを追加します。fig を最初の引数として渡し、グリッド サイズを指定して、Figure ウィンドウ内にグリッドを作成します。この例では、次のコードを関数 simpleApp に追加して 2 行 2 列のグリッドを作成します。

gl = uigridlayout(fig,[2 2]);

グリッド レイアウト マネージャーの RowHeight プロパティと ColumnWidth プロパティを設定して、グリッドのそれぞれの行と列のサイズを制御します。この例では、アプリの焦点が必ずプロット データになるようにします。アプリの最初の行の高さを 30 ピクセルにし、2 行目で Figure ウィンドウの残りを埋めるように指定します。最初の列の幅を格納される内容に合わせます。

gl.RowHeight = {30,'1x'};
gl.ColumnWidth = {'fit','1x'};

アプリのレイアウト方法の詳細については、プログラミングによるアプリのレイアウトを参照してください。

UI コンポーネントの作成と配置

ユーザーは、ボタン、ドロップダウン、編集フィールドなど、対話形式の各種 UI コンポーネントを通じてアプリを操作します。使用可能なすべての UI コンポーネントのリストについては、アプリ作成コンポーネントを参照してください。

この例では、3 種類の UI コンポーネントを使用します。

  • 手順を提供するラベル

  • ユーザーがプロット関数を選択するためのドロップダウン

  • データをプロットする座標軸のセット

対応するコンポーネント作成関数を呼び出し、グリッド レイアウト マネージャーを最初の入力引数として指定することで、UI コンポーネントを作成してグリッドに追加します。後でコード内でアクセスできるように、コンポーネントを変数として格納します。これらの 3 つのコンポーネントを作成して格納するには、次のコードを関数 simpleApp に追加します。

lbl  = uilabel(gl);
dd = uidropdown(gl);
ax = uiaxes(gl);

アプリのコンポーネントを作成したら、それらをグリッドの正しい行と列に配置します。これを行うには、各コンポーネントの Layout プロパティを設定します。ラベルはグリッドの左上隅、ドロップダウンは右上隅に配置します。Axes オブジェクトについては、Layout.Column を 2 要素ベクトルとして指定して、2 行目の両方の列にまたがるようにします。

% Position label
lbl.Layout.Row = 1;
lbl.Layout.Column = 1;
% Position drop-down
dd.Layout.Row = 1;
dd.Layout.Column = 2;
% Position axes
ax.Layout.Row = 2;
ax.Layout.Column = [1 2];

UI コンポーネントの外観の構成

各 UI コンポーネント オブジェクトには、その外観を決定する多数のプロパティがあります。プロパティを変更するには、ドット表記を使用して設定します。コンポーネントのプロパティのリストについては、対応するプロパティのページを参照してください。たとえば、DropDown のプロパティには、ドロップダウン コンポーネントのすべてのプロパティがリストされています。

Text プロパティを設定して、ドロップダウンのオプションについてのコンテキストを提供するラベルのテキストを変更します。

lbl.Text = "Choose Plot Type:";

Items プロパティを設定して、ドロップダウンでユーザーが選択できるプロット関数を指定します。ユーザーがアプリを最初に実行したときに表示されるドロップダウンの値を設定します。

dd.Items = ["Surf","Mesh","Waterfall"];
dd.Value = "Surf";

アプリの動作のプログラミング

コールバック関数を使用して、ユーザー操作に対するアプリの応答をプログラムします。コールバック関数は、アプリ ユーザーがドロップダウン項目の選択などの特定の操作を行ったときに実行される関数です。各 UI コンポーネントに、それぞれ異なるユーザー操作に対応する複数のコールバック プロパティがあります。アプリの動作を制御するために、コールバック関数を記述して適切なコールバック プロパティに割り当てます。

この例では、ユーザーが新しいドロップダウン項目を選択したときにプロットを更新するようにアプリをプログラムします。simpleApp.m ファイルで、関数 simpleApp の後に changePlotType という名前のコールバック関数を定義します。MATLAB では、コールバックがトリガーされると、各コールバック関数に 2 つの入力引数を自動的に渡します。これらの入力引数の名前は、多くの場合 srcevent です。1 番目の引数にはコールバックをトリガーしたコンポーネントが格納され、2 番目の引数にはユーザー操作に関する情報が格納されます。プロット対象の座標軸を指定する 3 番目の引数に加え、srcevent を受け入れるように changePlotType を定義します。コールバック関数で、引数 event を使用して新しいドロップダウンの値にアクセスし、この値を使用してプロット データの更新方法を決定します。適切なプロット関数を呼び出し、入力された座標軸をプロット対象の座標軸として指定します。

function changePlotType(src,event,ax)
type = event.Value;
switch type
    case "Surf"
        surf(ax,peaks);
    case "Mesh"
        mesh(ax,peaks);
    case "Waterfall"
        waterfall(ax,peaks);
end
end

関数 changePlotType をドロップダウン コンポーネントと関連付けるには、関数 simpleApp で、ドロップダウン コンポーネントの ValueChangedFcn プロパティを cell 配列として設定します。cell 配列の最初の要素は、コールバック関数 changePlotType のハンドルです。2 番目の要素は、データをプロットする Axes オブジェクトです。アプリ ユーザーがドロップダウンのオプションを選択すると、MATLAB でコールバック関数が呼び出され、ソース、イベント、座標軸の引数が渡されます。その後、コールバック関数によってアプリ内のプロットが更新されます。

dd.ValueChangedFcn = {@changePlotType,ax};

コールバック関数の記述の詳細については、プログラムで作成したアプリ用のコールバックの作成を参照してください。

最後に、プロット データが changePlotType の最初の実行時よりも前のドロップダウンの値と一致していることを確認するために、関数 surf を呼び出します。

surf(ax,peaks);

アプリの実行

アプリのすべての要素を追加すると、関数 simpleApp は次のようになります。

function simpleApp
% SIMPLEAPP Interactively explore plotting functions
%   Choose the function used to plot the sample data to see the
%   differences between surface plots, mesh plots, and waterfall plots

% Create figure window
fig = uifigure;
fig.Name = "My App";

% Manage app layout
gl = uigridlayout(fig,[2 2]);
gl.RowHeight = {30,'1x'};
gl.ColumnWidth = {'fit','1x'};

% Create UI components
lbl = uilabel(gl);
dd = uidropdown(gl);
ax = uiaxes(gl);

% Lay out UI components
% Position label
lbl.Layout.Row = 1;
lbl.Layout.Column = 1;
% Position drop-down
dd.Layout.Row = 1;
dd.Layout.Column = 2;
% Position axes
ax.Layout.Row = 2;
ax.Layout.Column = [1 2];

% Configure UI component appearance
lbl.Text = "Choose Plot Type:";
dd.Items = ["Surf" "Mesh" "Waterfall"];
dd.Value = "Surf";
surf(ax,peaks);

% Assign callback function to drop-down
dd.ValueChangedFcn = {@changePlotType,ax};
end

% Program app behavior
function changePlotType(src,event,ax)
type = event.Value;
switch type
    case "Surf"
        surf(ax,peaks);
    case "Mesh"
        mesh(ax,peaks);
    case "Waterfall"
        waterfall(ax,peaks);
end
end

アプリのヘルプ テキストを表示します。

help simpleApp
  SIMPLEAPP Interactively explore plotting functions
    Choose the function used to plot the sample data to see the
    differences between surface plots, mesh plots, and waterfall plots

コマンド ウィンドウでアプリの名前を入力してアプリを実行します。ドロップダウンから別のプロット オプションを選択してプロットを更新します。

simpleApp

Figure My App contains an axes object and another object of type uigridlayout. The axes object contains an object of type surface.

関連するトピック