ドキュメンテーション

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

GUIDE を使用した簡単なアプリの作成

メモ

このトピックでは、GUIDE を使用して作成するアプリについて説明しています。アプリを作成する別の方法については、アプリの作成方法を参照してください。

この例では、GUIDE を使用して、ここに示すような簡単なユーザー インターフェイス (UI) をもつアプリを作成する方法を説明します。

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

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

copyfile(fullfile(docroot, 'techdoc','creating_guis',...
   'examples','simple_gui*.*')),fileattrib('simple_gui*.*', '+w');
guide simple_gui.fig;
edit simple_gui.m
[実行] ボタンをクリックして、アプリを実行します。

GUIDE レイアウト エディター内に新しい UI を開く

  1. MATLAB プロンプトで guide と入力して、GUIDE を起動します。

  2. [GUIDE のクイック スタート] ダイアログ ボックスで、[空白の GUI (既定の設定)] テンプレートを選択して [OK] をクリックします。

  3. 以下の手順に従って、コンポーネント パレットにコンポーネントの名前を表示します。

    1. [ファイル][設定][GUIDE] を選択します。

    2. [コンポーネント パレットに名前を表示] を選択します。

    3. [OK] をクリックします。

GUIDE でのウィンドウ サイズの設定

ウィンドウのサイズを指定するには、レイアウト エディター内のグリッド領域のサイズを変更します。右下隅をクリックして、キャンバスが高さ約 3 インチ、幅約 4 インチになるまでドラッグします。必要に応じてキャンバスを大きくします。

UI のレイアウト

UI でのコンポーネントの追加、配置、ラベル付けを行います。

  1. 3 つのプッシュ ボタンを UI に追加します。レイアウト エディターの左のコンポーネント パレットから [プッシュ ボタン] ツールを選択し、レイアウト領域にドラッグします。3 つのボタンを作成し、次の図に示すような位置に配置します。

  2. 残りのコンポーネントを UI に追加します。

    • スタティック テキスト エリア

    • ポップアップ メニュー

    • 座標軸

    次の図に示すように、コンポーネントを配置します。座標軸コンポーネントを約 2 x 2 インチにサイズ変更してください。

コンポーネントの整列

複数のコンポーネントが同じ親をもつ場合、配置ツールを使用して、それらを互いに整列させることができます。3 つのプッシュ ボタンを整列させるには、

  1. Ctrl キーを押しながらプッシュ ボタンをクリックし、3 つすべてを選択します。

  2. [ツール][オブジェクト整列]を選択します。

  3. 配置ツールで次のように設定します。

    • 水平方向は、左揃えにします。

    • プッシュ ボタン間の垂直方向の間隔を 20 ピクセルにします。

  4. [OK] をクリックします。

プッシュ ボタンのラベリング

3 つのプッシュ ボタンはそれぞれ次のプロット タイプを指定します。surf、mesh および contour。この節では、これらのオプションに対応するように各ボタンのラベルを作成する方法を説明します。

  1. [表示][プロパティ インスペクター] を選択します。

  2. レイアウト エリアの一番上のプッシュ ボタンをクリックします。

  3. プロパティ インスペクターで String プロパティを選択して、現在の値を Surf という語で置き換えます。

  4. Enter キーを押す。プッシュ ボタンのラベルが Surf に変わります。

  5. 残りのプッシュ ボタンをそれぞれ順にクリックして、手順 3 と 4 を繰り返します。真ん中のプッシュ ボタンに [Mesh]、一番下のプッシュ ボタンに [Contour] というラベルを作成します。

ポップアップ メニュー項目リストの作成

ポップアップ メニューで、選択肢として次の 3 つのデータセット peaks、membrane および sinc を与えます。これらのデータセットは、同じ名前の MATLAB 関数に対応します。この節では、ポップメニューの選択肢として、これらのデータセットをリストする方法を示します。

  1. レイアウト エリアでポップアップ メニューをクリックします。

  2. プロパティ インスペクターで、String の隣のアイコンをクリックします。[String] ダイアログ ボックスが開きます。

  3. 既存のテキストを 3 つのデータセットの名前である、peaks、membrane、sinc に置き換えます。次の行には Enter キーを押して移動します。

  4. 項目の編集が終了したら、[OK] をクリックします。

    リストの最初の項目 peaks がレイアウト領域のポップアップ メニューに現れます。

スタティック テキストの変更

この UI では、ポップアップ メニューのラベルはスタティック テキストになります。この節では、スタティック テキストを変更して Select Data を読み取る方法を示します。

  1. レイアウト エリアでスタティック テキストをクリックします。

  2. プロパティ インスペクターで、String の隣のアイコンをクリックします。表示される [String] ダイアログ ボックスで、既存のテキストを「Select Data」という句で置き換えます。

  3. [OK] をクリックします。

    Select Data という語がポップアップ メニューの上のスタティック テキスト コンポーネントに現れます。

レイアウトの保存

レイアウトを保存すると、GUIDE により、FIG ファイルとコード ファイルの 2 つのファイルが作成されます。拡張子 .fig をもつ FIG ファイルは、レイアウトの記述を含むバイナリ ファイルです。拡張子 .m をもつコード ファイルには、アプリの動作をコントロールする MATLAB 関数が含まれます。

  1. プログラムを保存して実行するには、[ツール][実行] を選択します。

  2. GUIDE ではダイアログ ボックスで次のメッセージが表示されます。「アクティブにすると Figure ファイルと MATLAB コードの変更が保存されます。続けますか?」

    [はい] をクリックします。

  3. GUIDE は、現在のフォルダーで [名前を付けて保存] ダイアログ ボックスを開き、FIG ファイル名の入力が要求されます。

  4. 書き込み権限のある任意のフォルダーに移動して、FIG ファイルに対するファイル名 simple_gui を入力します。GUIDE は、FIG ファイルとコード ファイルの両方をこの名前で保存します。

  5. ファイルを保存するフォルダーが MATLAB パス上にない場合、そのフォルダーを変更するためのダイアログ ボックスが開きます。

  6. GUIDE により、ファイル simple_gui.figsimple_gui.m が保存され、プログラムが実行されます。また、コード ファイルが既定のエディターに表示されます。

    新しいウィンドウでアプリが開きます。このウィンドウには、MATLAB Figure ウィンドウに表示される標準のメニュー バーとツール バーがありません。GUIDE にユーザー独自のメニューとツール バー ボタンを追加できますが、既定では GUIDE アプリにはこれらのコンポーネントは何も含まれません。

    simple_gui を実行すると、ポップアップ メニューのデータセットの選択とプッシュ ボタンのクリックはできますが、何も起こりません。これは、ポップアップ メニューとボタンを使用可能にするステートメントがコード ファイルに含まれていないからです。

GUIDE を開かずに GUIDE で作成されたアプリを実行するには、コード ファイルの名前を入力してコード ファイルを実行します。

 simple_gui
また、次に示すように、コード ファイル名とともに run コマンドを使用することも可能です。
run simple_gui

メモ

GUIDE 以外で FIG ファイルを開いてアプリを実行しようとしないでください。そのようにすると、Figure が開き、使用できる準備ができているように見えますが、UI は初期化を行わず、コールバックは機能しません。

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

前の節レイアウトの保存でレイアウトを保存したときに、GUIDE によって、FIG ファイル simple_gui.fig とプログラム ファイル simple_gui.m の 2 つのファイルが作成されました。ただし、simple_gui.m にはアクションを実行するステートメントが含まれていないため、アプリは応答しません。この節では、アプリが機能するように、ファイルにコードを追加する方法を説明します。

プロットするデータの生成

この節では、ユーザーがボタンをクリックしたときにプロットされるデータを生成する方法を説明します。"オープニング関数" は、MATLAB 関数を呼び出してこのデータを生成します。オープニング関数は、開くときに UI を初期化する関数であり、GUIDE により生成されたすべてのコード ファイル内で先頭に配置されるコールバックです。

この例では、オープニング関数に 3 つのデータセットを作成するコードを追加します。このコードは、MATLAB 関数 peaksmembranesinc を使用します。

  1. オープニング関数を MATLAB エディターに表示します。

    ファイル simple_gui.m がまだエディターで開いていなければ、レイアウト エディターで [表示][エディター] を選択して開きます。

  2. [エディター] タブの [ナビゲート] セクションで、[移動] をクリックして [simple_gui_OpeningFcn] を選択します。

    以下のコードが含まれるオープニング関数にカーソルが移動します。

    % --- Executes just before simple_gis made visible.
    function simple_gui_OpeningFcn(hObject, eventdata, handles, varargin)
    % This function has no output args, see OutputFcn.
    % hObject    handle to figure
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
    % varargin   command line arguments to simple_g(see VARARGIN)
    
    % Choose default command line output for simple_gui
    handles.output = hObject;
     
    % Update handles structure
    guidata(hObject, handles);
     
    % UIWAIT makes simple_gwait for user response (see UIRESUME)
    % uiwait(handles.figure1);
  3. オープニング関数内の % varargin... で始まるコメントの直後に以下のコードを追加することで、プロットされるデータを作成します。

    % Create the data to plot.
    handles.peaks=peaks(35);
    handles.membrane=membrane;
    [x,y] = meshgrid(-8:.5:8);
    r = sqrt(x.^2+y.^2) + eps;
    sinc = sin(r)./r;
    handles.sinc = sinc;
    % Set the current data value.
    handles.current_data = handles.peaks;
    surf(handles.current_data)

    最初の実行可能な 6 行では、MATLAB 関数 peaksmembranesinc を使用してデータを作成します。これらが、データを、すべてのコールバックに対して与えられる引数である handles 構造体に保存します。プッシュ ボタンに対するコールバックは、handles 構造体からデータを取得できます。

    最後の 2 行は現在のデータ値を作成し、peaks に設定してから peaks に対する surf プロットを表示します。次の Figure は、最初に表示されたときにアプリがどのように見えるかを示しています。

ポップアップ メニューの動作のコーディング

ポップアップ メニューはデータをプロットするためのオプションを表示します。3 つのプロットのいずれかを選択すると、MATLAB ソフトウェアはポップアップ メニューの Value プロパティを選択されたメニュー項目のインデックスに設定します。ポップアップ メニュー コールバックは、ポップアップ メニューの Value プロパティを読み取り、メニューに現在表示されている項目を判別して、それに従い handles.current_data を設定します。

  1. MATLAB エディターで、ポップアップ メニュー コールバックを表示します。GUIDE レイアウト エディターで、ポップアップ メニュー コンポーネントを右クリックして、[コールバックの表示][Callback] を選択します。

    エディターにコード ファイルが表示され、次のコードを含むポップアップ メニュー コールバックにカーソルが移動します。

    % --- Executes on selection change in popupmenu1.
    function popupmenu1_Callback(hObject, eventdata, handles)
    % hObject    handle to popupmenu1 (see GCBO)
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
  2. % handles... ではじまるコメントの後に、popupmenu1_Callback に対する以下のコードを追加します。

    次のコードは、最初にポップアップ メニューの 2 つのプロパティを取得します。

    • String: メニューの内容を含むセル配列

    • Value: 選択したデータセットのメニューのコンテンツへのインデックス

    次に、switch ステートメントを使用して、選択したデータセットを現在のデータに設定します。最後のステートメントは、handles 構造体への変更を保存します。

    % Determine the selected data set.
    str = get(hObject, 'String');
    val = get(hObject,'Value');
    % Set current data to the selected data set.
    switch str{val};
    case 'peaks' % User selects peaks.
       handles.current_data = handles.peaks;
    case 'membrane' % User selects membrane.
       handles.current_data = handles.membrane;
    case 'sinc' % User selects sinc.
       handles.current_data = handles.sinc;
    end
    % Save the handles structure.
    guidata(hObject,handles)

プッシュ ボタンの動作のコーディング

それぞれのプッシュ ボタンは、ポップアップ メニューの現在の選択で指定されたデータを使用して、異なるタイプのプロットを作成します。プッシュ ボタン コールバックは、handles構造体からデータを取得し、プロットします。

  1. [Surf] プッシュ ボタンのコールバックを MATLAB エディターに表示します。レイアウト エディターで、[Surf] プッシュ ボタンを右クリックして、[コールバックの表示][Callback] を選択します。

    エディターで、カーソルがコード ファイルの [Surf] プッシュ ボタンのコールバックに移動します。このコールバックには以下のコードが含まれています。

    % --- Executes on button press in pushbutton1.
    function pushbutton1_Callback(hObject, eventdata, handles)
    % hObject    handle to pushbutton1 (see GCBO)
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
  2. % handles... ではじまるコメントの直後のコールバックに次のコードを追加します。

    % Display surf plot of the currently selected data.
    surf(handles.current_data);
  3. 手順 1 と 2 を繰り返して、MeshContour プッシュ ボタン コールバックに同様のコードを追加します。

    • 次のコードを Mesh プッシュ ボタン コールバック pushbutton2_Callback に追加します。

        % Display mesh plot of the currently selected data.
        mesh(handles.current_data);
    • 次のコードを Contour プッシュ ボタン コールバック pushbutton3_Callback に追加します。

        % Display contour plot of the currently selected data.
        contour(handles.current_data);
  4. [ファイル][保存] を選択してコードを保存します。

アプリの実行

アプリの動作のコーディングでは、ポップアップ メニューとプッシュ ボタンについてプログラムを作成しました。さらに、これらのためのデータを作成し、表示を初期化しました。ここで、プログラムを実行し、その動作を見ることができます。

  1. レイアウト エディターの [ツール][実行] を選択して、プログラムを実行します。

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

  3. ウィンドウを閉じる前に他のいくつかの組み合わせを試します。

関連するトピック

この情報は役に立ちましたか?