ドキュメンテーション

最新のリリースでは、このページがまだ翻訳されていません。 このページの最新版は英語でご覧になれます。

プログラムによる簡単なアプリの作成

メモ

このトピックでは、関数 Figure を使用してプログラムによって作成するアプリについて説明しています。アプリを作成する別の方法については、アプリの作成方法を参照してください。

この例では、次に示すような簡単なアプリをプログラムによって作成する方法を説明します。

以下の節で、このアプリの作成プロセスを説明します。

アプリを作成せずに、このアプリを作成したコードを表示して実行する場合は、現在のフォルダーを書き込みアクセス権限をもつフォルダーに設定してください。以下の MATLAB® コマンドを実行して、コード例をコピーし、エディターで開きます。

copyfile(fullfile(docroot, 'techdoc','creating_guis',...
  'examples','simple_gui2*.*')), fileattrib('simple_gui2*.*', '+w');
edit simple_gui2.m

メモ

このコードでは、グラフィックス オブジェクトのプロパティを設定するのにドット表記を使用しています。ドット表記は R2014b 以降で使用できます。それより前のリリースを使用している場合は、代わりに関数 set を使用してください。たとえば、f.Visible = 'on'set(f,'Visible','on') に変更します。

コードを実行するには、[エディター] タブで [実行] セクションに移動します。次に、[実行] をクリックします。

コード ファイルの作成

関数ファイルを作成します (一連の MATLAB コマンドが含まれる "スクリプト ファイル" には、関数の定義が含まれません)。

  1. MATLAB プロンプトに、「edit」と入力します。

  2. エディターの第 1 行に次のステートメントを入力します。

    function simple_gui2
  3. この関数ステートメントの後に次のコメントを入力し、最後に空行を 1 行追加します (このコメントは help コマンドの出力としてコマンド ラインに表示されます)。

    % SIMPLE_GUI2 Select a data set from the pop-up menu, then
    % click one of the plot-type push buttons. Clicking the button
    % plots the selected data in the axes.
    (Leave a blank line here)
  4. ファイルの最後にある空行の後に end ステートメントを追加します。例では入れ子関数が使用されているため、この end ステートメントが必要となります。詳細は、入れ子関数を参照してください。

  5. そのファイルをユーザーの現在のフォルダーあるいは MATLAB パス上に保存します。

Figure ウィンドウの作成

アプリのユーザー インターフェイス (UI) のコンテナーを作成するには、ファイル内の end ステートメントの前に以下のコードを追加します。

%  Create and then hide the UI as it is being constructed.
f = figure('Visible','off','Position',[360,500,450,285]);

関数 figure の呼び出しによって、従来の Figure が作成され、以下のプロパティが設定されます。

  • Visible プロパティが 'off' に設定され、コンポーネントを追加または初期化するときにウィンドウが非表示になります。すべてのコンポーネントが UI に追加され、初期化された後、ウィンドウが表示されます。

  • Position プロパティは、スクリーン上の UI の位置とサイズを指定する 4 要素ベクトル [左端からの距離、下端からの距離、幅、高さ] に設定されます。既定の単位はピクセルです。

UI へのコンポーネントの追加

プッシュ ボタン、スタティック テキスト、ポップアップ メニューおよび座標軸のコンポーネントを UI に作成します。

  1. コード ファイル内の figure の呼び出しの後に次のステートメントを追加して、プッシュ ボタン コンポーネントを 3 つ作成します。

    % Construct the components.
    hsurf    = uicontrol('Style','pushbutton',...
                 'String','Surf','Position',[315,220,70,25]);
    hmesh    = uicontrol('Style','pushbutton',...
                 'String','Mesh','Position',[315,180,70,25]);
    hcontour = uicontrol('Style','pushbutton',...
                 'String','Contour','Position',[315,135,70,25]);

    各ステートメントは、一連の uicontrol のプロパティ/値のペアを使用してプッシュ ボタンを次のように定義しています。

    • Style プロパティで、uicontrol がプッシュ ボタンであることを指定しています。

    • String プロパティで、プッシュ ボタン SurfMesh および Contour にそれぞれラベルを指定します。

    • Position プロパティでは、各プッシュ ボタンの位置とそのサイズを指定します。使用するのは [左端からの距離、下端からの距離、幅、高さ] です。プッシュ ボタンの既定の単位は、ピクセルです。

    uicontrol の呼び出しは、作成したプッシュ ボタンのハンドルを返します。

  2. プッシュ ボタンの定義に続いて、次のステートメントをコード ファイルに追加して、ポップアップ メニューとテキスト ラベルを追加します。最初のステートメントはラベルを作成します。2 番目のステートメントはポップアップ メニューを作成します。

    htext  = uicontrol('Style','text','String','Select Data',...
               'Position',[325,90,60,15]);
    hpopup = uicontrol('Style','popupmenu',...
               'String',{'Peaks','Membrane','Sinc'},...
               'Position',[300,50,100,25]);
    

    ポップアップ メニュー コンポーネントの String プロパティでは cell 配列を使用して、ポップアップ メニューの PeaksMembrane および Sinc の 3 つの項目を指定しています。

    テキスト コンポーネントの String プロパティでは、ユーザーへの指示を指定しています。

    両方のコンポーネントの Position プロパティで、各コンポーネントのサイズと位置を指定しています。使用するのは [左端からの距離、下端からの距離、幅、高さ] です。これらのコンポーネントに対する既定の単位は、ピクセルです。

  3. 次のステートメントをコード ファイルに追加して、座標軸を追加します。

    ha = axes('Units','pixels','Position',[50,60,200,185]);

    Units プロパティにはピクセルを指定し、座標軸の単位を他のコンポーネントの単位と同じにします。

  4. すべてのコンポーネントの定義に続けて、次の行をコード ファイルに追加することで、座標軸を除くすべてのコンポーネントの中心を揃えます。

    align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');
  5. align コマンドに続けて、次のコマンドを追加します。

    メモ

    このコードでは、オブジェクトのプロパティの設定にドット表記を使用しています。ドット表記は R2014b 以降で使用できます。それより前のリリースを使用している場合は、代わりに関数 set を使用してください。たとえば、f.Visible = 'on'set(f,'Visible','on') に変更します。

    f.Visible = 'on';

    コード ファイルは次のようになります。

    function simple_gui2
    % SIMPLE_GUI2 Select a data set from the pop-up menu, then
    % click one of the plot-type push buttons. Clicking the button
    % plots the selected data in the axes.
    
       %  Create and then hide the UI as it is being constructed.
       f = figure('Visible','off','Position',[360,500,450,285]);
       
       %  Construct the components.
       hsurf = uicontrol('Style','pushbutton','String','Surf',...
               'Position',[315,220,70,25]);
       hmesh = uicontrol('Style','pushbutton','String','Mesh',...
               'Position',[315,180,70,25]);
       hcontour = uicontrol('Style','pushbutton',...
               'String','Contour',...
               'Position',[315,135,70,25]); 
       htext = uicontrol('Style','text','String','Select Data',...
               'Position',[325,90,60,15]);
       hpopup = uicontrol('Style','popupmenu',...
               'String',{'Peaks','Membrane','Sinc'},...
               'Position',[300,50,100,25]);
       ha = axes('Units','Pixels','Position',[50,60,200,185]); 
       align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');
       
       % Make the UI visible.
       f.Visible = 'on';
    
    end
  6. コマンド ラインで「simple_gui2」と入力してコードを実行します。ポップアップ メニューからのデータセットの選択とプッシュ ボタンのクリックはできますが、何も起こりません。これは、ポップアップ メニューまたはボタンに機能を提供するコールバック コードがファイルに存在しないためです。

アプリの動作のコーディング

ポップアップ メニューのプログラミング

ポップアップ メニューにより、プロットするデータを選択することができます。ユーザーがポップアップ メニューにある 3 つのデータセットから 1 つを選択すると、MATLAB ソフトウェアでは、選択されたメニュー項目のインデックスがポップアップ メニューの Value プロパティに設定されます。ポップアップ メニューの コールバックは、ポップアップ メニューの Value プロパティ を読み、現在どの項目が表示されているかを判別し、それに従って current_data を設定します。

ファイルに、以下のコールバックを初期化コードの後に続け、最後の end ステートメントとの間に追加します。

メモ

このコードでは、オブジェクトのプロパティの取得にドット表記を使用しています。ドット表記は R2014b 以降で使用できます。それより前のリリースを使用している場合は、代わりに関数 get を使用してください。たとえば、str = source.Stringstr = get(source,'String') に変更します。

%  Pop-up menu callback. Read the pop-up menu Value property to
%  determine which item is currently displayed and make it the
%  current data. This callback automatically has access to 
%  current_data because this function is nested at a lower level.
   function popup_menu_Callback(source,eventdata) 
      % Determine the selected data set.
      str = source.String;
      val = source.Value;
      % Set current data to the selected data set.
      switch str{val};
      case 'Peaks' % User selects Peaks.
         current_data = peaks_data;
      case 'Membrane' % User selects Membrane.
         current_data = membrane_data;
      case 'Sinc' % User selects Sinc.
         current_data = sinc_data;
      end
   end

プッシュ ボタンのプログラミング

それぞれのプッシュ ボタンは、ポップアップ メニューで現在選択されたデータを使用して、異なるタイプのプロットを作成します。プッシュ ボタンのコールバックは、current_data のデータをプロットします。それらは、下位レベルで入れ子になっているため current_data へのアクセスを自動的に行います。

ファイルに、以下のコールバックをポップアップ メニュー コールバックの後に続け、最後の end ステートメントとの間に追加します。

% Push button callbacks. Each callback plots current_data in the
% specified plot type.

function surfbutton_Callback(source,eventdata) 
% Display surf plot of the currently selected data.
     surf(current_data);
end

function meshbutton_Callback(source,eventdata) 
% Display mesh plot of the currently selected data.
     mesh(current_data);
end

function contourbutton_Callback(source,eventdata) 
% Display contour plot of the currently selected data.
     contour(current_data);
end

コールバックのプログラミング

ユーザーがポップアップ メニューからデータセットを選択したり、あるいはプッシュ ボタンの 1 つをクリックすると、MATLAB ソフトウェアは特定のイベントに関連するコールバックを実行します。各コンポーネントのCallback プロパティを使用して、各イベントに関連付けるコールバックの名前を指定します。

  1. [Surf] プッシュ ボタンを定義する uicontrol ステートメントに対して、プロパティ/値のペアを追加します。

    'Callback',{@surfbutton_Callback}

    したがって、ステートメントは次のようになります。

    hsurf = uicontrol('Style','pushbutton','String','Surf',...
            'Position',[315,220,70,25],...
            'Callback',{@surfbutton_Callback});

    Callback は、プロパティの名前です。surfbutton_Callback は、[Surf] プッシュ ボタンに情報を提供するコールバックの名前です。

  2. [Mesh] プッシュ ボタンを定義する uicontrol ステートメントに対して、プロパティ/値のペアを追加します。

    'Callback',@meshbutton_Callback
  3. [Contour] プッシュ ボタンを定義する uicontrol ステートメントに対して、プロパティ/値のペアを追加します。

    'Callback',@contourbutton_Callback
  4. ポップアップ メニューを定義する uicontrol ステートメントに対して、プロパティ/値のペアを追加します。

    'Callback',@popup_menu_Callback

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

UI の初期化

UI を初期化して、ウィンドウが表示されたときに使えるようにします。コンポーネントと Figure の単位を normalized に変更することによって、UI がサイズ変更されたときに適切に動作するようにします。これにより、UI がサイズ変更されると、コンポーネントもサイズ変更されます。規格化した単位は、Figure ウィンドウの左下隅を (0,0) に上右隅を(1.0, 1.0) にマップします。

メモ

このコードでは、オブジェクトのプロパティの設定にドット表記を使用しています。ドット表記は R2014b 以降で使用できます。それより前のリリースを使用している場合は、代わりに関数 set を使用してください。たとえば、f.Units = 'normalized'set(f,'Units','normalized') に変更します。

エディターで、次のコードを

% Make the UI visible.
f.Visible = 'on';

以下のコードで置き換えます。

% Initialize the UI.
% Change units to normalized so components resize automatically.
f.Units = 'normalized';
ha.Units = 'normalized';
hsurf.Units = 'normalized';
hmesh.Units = 'normalized';
hcontour.Units = 'normalized';
htext.Units = 'normalized';
hpopup.Units = 'normalized';

% Generate the data to plot.
peaks_data = peaks(35);
membrane_data = membrane;
[x,y] = meshgrid(-8:.5:8);
r = sqrt(x.^2+y.^2) + eps;
sinc_data = sin(r)./r;

% Create a plot in the axes.
current_data = peaks_data;
surf(current_data);

% Assign a name to appear in the window title.
f.Name = 'Simple GUI';

% Move the window to the center of the screen.
movegui(f,'center')

% Make the UI visible.
f.Visible = 'on';

コードの検証とアプリの実行

コードが正しく作成されていることを確認し、実行します。

メモ

このコードでは、オブジェクトのプロパティの取得および設定にドット表記を使用しています。ドット表記は R2014b 以降で使用できます。それより前のリリースを使用している場合は、代わりに関数 get および set を使用してください。たとえば、f.Units = 'normalized'set(f,'Units','normalized') に変更します。

  1. コード ファイルが次のようになっていることを確認します。

    function simple_gui2
    % SIMPLE_GUI2 Select a data set from the pop-up menu, then
    % click one of the plot-type push buttons. Clicking the button
    % plots the selected data in the axes.
    
    %  Create and then hide the UI as it is being constructed.
    f = figure('Visible','off','Position',[360,500,450,285]);
    
    % Construct the components.
    hsurf    = uicontrol('Style','pushbutton',...
                 'String','Surf','Position',[315,220,70,25],...
                 'Callback',@surfbutton_Callback);
    hmesh    = uicontrol('Style','pushbutton',...
                 'String','Mesh','Position',[315,180,70,25],...
                 'Callback',@meshbutton_Callback);
    hcontour = uicontrol('Style','pushbutton',...
                 'String','Contour','Position',[315,135,70,25],...
                 'Callback',@contourbutton_Callback);
    htext  = uicontrol('Style','text','String','Select Data',...
               'Position',[325,90,60,15]);
    hpopup = uicontrol('Style','popupmenu',...
               'String',{'Peaks','Membrane','Sinc'},...
               'Position',[300,50,100,25],...
               'Callback',@popup_menu_Callback);
    ha = axes('Units','pixels','Position',[50,60,200,185]);
    align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');
    
    % Initialize the UI.
    % Change units to normalized so components resize automatically.
    f.Units = 'normalized';
    ha.Units = 'normalized';
    hsurf.Units = 'normalized';
    hmesh.Units = 'normalized';
    hcontour.Units = 'normalized';
    htext.Units = 'normalized';
    hpopup.Units = 'normalized';
    
    % Generate the data to plot.
    peaks_data = peaks(35);
    membrane_data = membrane;
    [x,y] = meshgrid(-8:.5:8);
    r = sqrt(x.^2+y.^2) + eps;
    sinc_data = sin(r)./r;
    
    % Create a plot in the axes.
    current_data = peaks_data;
    surf(current_data);
    
    % Assign the a name to appear in the window title.
    f.Name = 'Simple GUI';
    
    % Move the window to the center of the screen.
    movegui(f,'center')
    
    % Make the window visible.
    f.Visible = 'on';
    
    %  Pop-up menu callback. Read the pop-up menu Value property to
    %  determine which item is currently displayed and make it the
    %  current data. This callback automatically has access to 
    %  current_data because this function is nested at a lower level.
       function popup_menu_Callback(source,eventdata) 
          % Determine the selected data set.
          str = get(source, 'String');
          val = get(source,'Value');
          % Set current data to the selected data set.
          switch str{val};
          case 'Peaks' % User selects Peaks.
             current_data = peaks_data;
          case 'Membrane' % User selects Membrane.
             current_data = membrane_data;
          case 'Sinc' % User selects Sinc.
             current_data = sinc_data;
          end
       end
    
      % Push button callbacks. Each callback plots current_data in the
      % specified plot type.
    
      function surfbutton_Callback(source,eventdata) 
      % Display surf plot of the currently selected data.
           surf(current_data);
      end
    
      function meshbutton_Callback(source,eventdata) 
      % Display mesh plot of the currently selected data.
           mesh(current_data);
      end
    
      function contourbutton_Callback(source,eventdata) 
      % Display contour plot of the currently selected data.
           contour(current_data);
      end
    end
  2. コマンド ラインで「simple_gui2」と入力してアプリを実行します。初期化コードにより、既定の peaks データを関数 surf で処理した結果が表示されます。UI は次のような外観になります。

  3. ポップアップ メニューで、[Membrane] を選択してから、[Mesh] ボタンをクリックします。UI は MathWorks® L 型膜ロゴのメッシュ プロットを表示します

  4. UI を閉じる前に他のいくつかの組み合わせを試します。

  5. コマンド ラインに「help simple_gui2」と入力します。MATLAB ソフトウェアがヘルプ テキストを表示します。

    help simple_gui2
      SIMPLE_GUI2 Select a data set from the pop-up menu, then
      click one of the plot-type push buttons. Clicking the button
      plots the selected data in the axes.

関連するトピック