ドキュメンテーション センター

  • 評価版
  • 製品アップデート

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

対話型ツールを使用した GUI の作成とコーディング

プログラム GUI のレイアウトには時間がかかることがあり、また、多数の小さな手順が含まれます。たとえば、コンポーネントを希望どおりの場所に正確に配置するには、多くの場合複数回、コンポーネントを手動で配置しなければなりません。他のプロパティの最終設定を行い、それらのステートメントをコーディングするのにも時間がかかります。こうした労力を削減するには、組み込みの MATLAB® ツールおよび GUI を利用してコンポーネント プロパティの値を設定します。次の節では、いくつかのツールについて説明します。

モードまたはツール使用目的コマンド
プロット編集モード対話的なプロットの編集や注釈の追加plotedit
プロパティ エディターオブジェクトのグラフィカルなプロパティの編集propedit, propertyeditor
プロパティ インスペクター大部分のオブジェクト プロパティの対話的な表示および編集inspect
オブジェクト整列ツールコンポーネントを互いに整列して配置align
カラー セレクターカラー パレットからの色の選択とその値の取得uisetcolor
フォント セレクター文字のフォント、スタイルおよびサイズのプレビューとそれらの値の選択uisetfont

これらのツールの中には、プロパティ値を返すものもあれば、プロパティ値を返さずにプロパティを対話的に編集できるようにするものもあります。特に、プロパティ インスペクターでは、ほとんどすべてのオブジェクト プロパティを対話的に設定できます。その後、プロパティ値をコピーし、コマンド ウィンドウまたはコード ファイルに貼り付けることができます。ただし、Color または Position など、ベクトル値のプロパティを取得する場合、プロパティ インスペクターでは、一度に 1 つしか値をコピーできません。

    メモ:   以下の節では、GUI の外観を対話形式で調整するための手法をいくつか説明します。保存された FIG ファイルを開く GUI をビルドしている場合は、このファイルを再保存することにより、対話形式で変更するほとんどのプロパティが保持されます。プログラム ファイルを開くたびに、GUI を含む新たな Figure が作成される場合 (プログラム GUI のほとんどはこのように動作します)、GUI を最新の状態に保つため、プログラム ファイルの中で変更されたプロパティを指定するようにします。

コンポーネントの位置を対話的に設定する方法

GUI コンポーネントの初期位置や他のプロパティが気に入らない場合は、それらを手動で調整できます。GUI の Figure をプロット編集モードにすることにより、マウスを使用して移動、サイズ変更、整列および様々なコンポーネントのプロパティの変更を行えます。その後、変更したプロパティの値を読み取り、GUI コード ファイルにコピーしてコンポーネントを初期化できます。

プロット編集モードで位置を設定するには、次のようにします。

  1. プロット編集モードに入ります。矢印ツール をクリックするか、[ツール] メニューから [プロット編集] を選択します。Figure にメニューまたはツール バーがない場合は、コマンド ウィンドウで plotedit on と入力します。

  2. コンポーネントを選択します。編集するコンポーネントの上で左マウス ボタンをクリックします。

  3. コンポーネントを移動し、サイズ変更します。コンポーネント内でクリックし、ドラッグして新しい位置に移動します。黒い四角のハンドルをクリックし、ドラッグしてその形を変更します。矢印キーを使用して微調整します。

  4. 操作したコンポーネントのハンドルを確認してください。次のコードでは、ハンドルは、object_handle という名前の変数です。

  5. プロパティ インスペクターからコンポーネント位置ベクトルを取得します。次のように入力します。

    inspect

    あるいは、次のような get ステートメントを入力します。

    get(object_handle, 'Position')
    ans =
       15.2500  333.0000  106.0000   20.0000
  6. 結果 (ans) をコピーし、コード ファイル内の set ステートメントに大かっこで囲んで挿入します。

    set(object_handle, 'Position', [15.2500 333.0000 106.0000 20.0000])
    

    ヒント:   set コマンドを独立で使用する代わりに、オブジェクトの位置を決めた後、オブジェクトを作成するコード ファイルのステートメントを、Position パラメーターと値を含むように変更することができます。

コンポーネントを体系的に配置するには、そのプロセスを管理する関数を作成できます。editpos という関数の簡単な例を次に示します。

function rect = editpos(handle)
% Enters plot edit mode, pauses to let user manipulate objects,
% then turns the mode off. It does not track what user does.
% User later needs to output a Position property, if changed.

if ~ishghandle(handle)
    disp(['=E= gbt_moveobj: Invalid handle: ' inputname(1)])
    return
end
plotedit(handle,'on')
disp('=== Select, move and resize object. Use mouse and arrow keys.')
disp('=== When you are finished, press Return to continue.')
pause
rect = get(handle,'Position');
inspect(handle)

この関数を試してみるには、コマンド ウィンドウで次のコードを入力します。

hfig = figure; 
hsl = uicontrol('Style','slider') 
editpos(hsl) 

editpos を呼び出すと、次のプロンプトが表示されます。

=== Select, move and resize the object. Use mouse and arrow keys. 
=== When you are finished, press Return to continue. 

初めてプロット編集モードに入る場合は、Figure 自体が選択されます。スライダーをクリックして選択し、これを再配置します。たとえば、次の図に示すように、Figure の右側にこれを移動し、垂直に方向付けます。

プロット編集モードを使用してプロパティを変更

プロット編集モードでオブジェクトの選択後、プロパティ インスペクターを開いてそのプロパティの表示および変更を行えます。オブジェクトが選択されているときに、コマンド ウィンドウで次のように入力します。

inspect

たとえば、関数形式を使用して、調べたいオブジェクトのハンドルを渡すこともできます。

inspect(hsl)

プロパティ インスペクターが開き、オブジェクト プロパティを表示します。プロパティ値を読み込むだけでなく、編集できます。また、コンポーネントは直ちに更新されます。任意のプロパティの定義を確認するには、プロパティ インスペクターで名前または値を右クリックし、表示された [これはなに ?] メニュー項目をクリックします。次の図に示すように、状況依存のヘルプのウィンドウが開き、そのプロパティの定義を表示します。

ヘルプ ウィンドウ内をスクロールして、他のプロパティの説明を表示します。[X] クローズ ボックスをクリックしてウィンドウを閉じます。

次のインスペクターの図は、インスペクターを使用して、スライダー Uicontrol の Max プロパティを既定値 (1.0) から 10.0 に変更する方法を示しています。

プロパティ エディターでの編集

プロパティ エディターはプロパティ インスペクターよりグラフィカルなインターフェイスをもちます。このインターフェイスは、コンポーネントの外観に影響するプロパティを設定するのに便利です。コンポーネントについてこれを開くには、コマンド ウィンドウで次のように入力します。

propedit(object_handle)

あるいは、引数を省略し、次のように入力します。

plotedit on

Figure がプロット編集モードに入ります。編集したいオブジェクトを選択し、プロパティ エディターが表示するプロパティを変更します。次の図は、プロパティ エディターを使用して変更されたリスト ボックスの BackgroundColor プロパティと String プロパティを示しています。

プロパティ エディターで設定できるプロパティの大部分は、外観のプロパティです。その他のプロパティの値を変更するには、[詳細なプロパティ] をクリックします。プロパティ インスペクターが開いて (または、既に開いている場合は、フォーカスされ)、選択されたオブジェクトのプロパティを表示します。これを使用して、プロパティ エディターで表示されないプロパティを変更します。

プロパティの設定が終了したら、値を保存しなければなりません。

  • GUI プログラムを起動するたびに保存された FIG ファイルが開かれる場合は、Figure 自体を保存 (または再保存) します。

  • GUI プログラム ファイルが起動するたびに Figure が作成される場合は、プログラム ファイルにプロパティ値を保存します。

新しいプロパティ値は、関数 get を実行して取得できます。

value = get(object_handle, 'PropertyName')

値を、GUI プログラム ファイルへと移します。オブジェクトを作成するステートメントにおけるパラメーターと値のペアとして、あるいは値に対する [set] コマンドとして、ファイルの後のほうに含めます。

位置ベクトルのスケッチ

rbbox は、位置の設定に役立つ関数です。この関数を呼び出したら、Figure 内の任意の場所にボックス型をドラッグ アウトします。マウス ボタンを離すと、このボックスの位置ベクトルが表示されます。rbbox の実行時には、次のことに注意してください。

  • Figure ウィンドウがフォーカスされていなければなりません。

  • マウス カーソルが Figure ウィンドウ内になければなりません。

  • 左マウス ボタンが押されなければなりません。

この動作のため、マウス ボタンが押されるまで待機する関数またはスクリプトから rbbox を呼び出さなければなりません。返される位置ベクトルは、Figure 単位で描画される四角形を指定します。以下に示す setpos と呼ばれる関数は、rbbox を呼び出してコンポーネントの位置を指定します。これにより、ドラッグ アウトした位置ベクトルが返され、システムのクリップボードにコピーされます。

function rect = setpos(object_handle)
% Use RBBOX to establish a position for a GUI component.
% object_handle is a handle to a uicomponent that uses
% any Units. Internally, figure Units are used.

disp(['=== Drag out a Position for object ' inputname(1)])
waitforbuttonpress  % So that rbbox does not return immediately
rect = rbbox;     % User drags out a rectangle, releases button
% Pressing a key aborts rbbox, so check for null width & height
if rect(3) ~= 0 && rect(4) ~= 0
    % Save and restore original units for object
    myunits = get(object_handle,'Units');
    set(object_handle,'Units',get(gcf,'Units'))
    set(object_handle,'Position',rect)
    set(object_handle,'Units',myunits)
else
    rect = [];
end
clipboard('copy', rect)         % Place set string on system
                                % clipboard as well as returning it

関数 setpos は Figure 単位を使用してコンポーネントの Position プロパティを設定します。まず、setpos はコンポーネントの Units プロパティを取得および保存し、そのプロパティを Figure 単位に設定します。オブジェクト位置を設定した後、この関数はオブジェクトの元の単位に戻します。

以下の手順では、setpos を使用して既定の位置から離れた場所にボタンを再配置する方法を示します。

  1. 次のステートメントを GUI コード ファイルに追加して実行します。

    btn1 = uicontrol('Style','pushbutton',...
    'String','Push Me');
    

  2. 次のステートメントを GUI コード ファイルに追加して実行し、btn1 オブジェクトの Position をドラッグ アウトします。

    rect = setpos(btn1)
    

  3. マウス ボタンを離します。コントロールが移動します。

  4. ボタンの Position が設定され、値が返され、システムのクリップボードにコピーされます。

    rect =
         37  362  127   27

    Position パラメーターと空の値を、次のように、GUI コード ファイルに手順 1 の [uicontrol] コマンドに加えます。

    btn1 = uicontrol('Style','pushbutton',...
    'String','Push Me','Position',[])

    カーソルを角かっこ [] の内側に置き、Ctrl+V キーを押して、setpos の出力を Position パラメーターの値として貼り付けます。

    btn1 = uicontrol('Style','pushbutton',...
    'String','Push Me','Position',[37  362  127   27])

コンポーネントの作成時に setpos を呼び出すことはできません。これは、setpos では引数としてそのコンポーネントのハンドルが必要となるためです。ただし、コンポーネントの作成時にコンポーネントを対話的に配置できる小さな関数を作成できます。この関数は、マウス ボタンが押されるまで待機してから rbbox を呼び出し、マウス ボタンが離されると、四角形の位置を返します。

function rect = getrect
disp('=== Click and drag out a Position rectangle.')
waitforbuttonpress  % So that rbbox does not return immediately
rect = rbbox;     % User drags out a rectangle, releases button
clipboard('copy', rect)            % Place set string on system
%                             clipboard as well as returning it

getrect を使用するには、次のようにします。

  1. エディターで、次のステートメントを GUI ファイルに挿入し、プッシュ ボタンを作成します。ファイル内で、Position プロパティの値として getrect を指定します。

    btn1 = uicontrol('Style','pushbutton','String','Push Me',...
                     'Position',getrect);
  2. エディターでステートメント全体を選択し、F9 キーを押すか、右クリックし [選択を実行] を選択して実行します。

  3. Figure ウィンドウで、コントロールを配置する四角形をドラッグ アウトします。ドラッグが終了すると、新しいコンポーネントが四角形の中に表示されます (ドラッグ中に文字を入力した場合、rbbox が中止し、エラーが表示され、Uicontrol は作成されません)。

  4. エディターで、uicontrol ステートメントの getrect を選択し、「[]」と入力して置き換えます。ステートメントは次のようになります。

    btn1 = uicontrol('Style','pushbutton','String','Push Me',...
                     'Position',[]);
  5. 空の角かっこの内側にカーソルを置き、Ctrl+V キーを押すか、右クリックして [貼り付け] を選択します。座標値の違いを考慮に入れると、ステートメントは次のようになります。

    btn1 = uicontrol('Style','pushbutton','String','Push Me',...
                     'Position',[55  253  65  25]);

rbbox は Figure 単位で座標を返すという点に注意してください (この例では、'pixels' です)。コンポーネントの既定の Units 値が Figure と異なる場合は、コンポーネントの作成時に同じになるように指定します。たとえば、Uipanel の既定の Units'normalized' です。Uipanel の位置をスケッチするには、次の例のように、Figure Units を使用するコードを使用します。

pnl1 = uipanel('Title','Inputs',...
               'Units',get(gcf,'Units'),...
               'Position',getrect)

GUI を作成するための 2 つの MATLAB ユーティリティが位置を指定するときに役立ちます。getpixelposition を使用して、コンポーネントの Units 設定に関係なく、コンポーネントの位置ベクトルをピクセル単位で取得します。位置の原点は、コンポーネントまたは囲んでいる Figure の親に関連しています。setpixelposition を使用して、新しいコンポーネント位置をピクセル単位で指定します。これらの関数のいずれかを呼び出した後も、コンポーネントの Units プロパティは変更されません。

コンポーネントを整列

コンポーネントを配置した後も、コンポーネントがまだ完全に整列していない場合があります。最終調整を行うには、コマンド ウィンドウから関数 align を使用します。別の対話的な方法として、Figure メニューから利用できる GUI であるオブジェクト整列ツールを使用します。次の節では、両方のアプローチについて説明します。

関数 align の使用方法

ユーザー インターフェイス コントロールと座標軸を整列させるには、関数 align を使用します。この関数によって、コンポーネントを水平方向と垂直方向に整列できます。コンポーネントを全長にわたって等間隔に配置したり、それらを固定した間隔に指定することもできます。

関数 align に対する構文は、次のとおりです。

align(HandleList,'HorizontalAlignment','VerticalAlignment')

次の表は、これらのパラメーターの可能な値をまとめています。

HorizontalAlignmentVerticalAlignment
NoneLeftCenterRightDistributeFixedNoneTopMiddleBottomDistributeFixed

HandleList のすべてのハンドルは、同じ親をもたなければなりません。他の構文の詳細は、align のリファレンス ページを参照してください。

以下の図にある青い点線が示すように、関数 align はコンポーネントを境界ボックスに合わせて配置します。デモンストレーションのため、次のコードを使用して、任意に配置された 3 つのプッシュ ボタンを作成します。

fh = figure('Position',[400 300 300 150])
b1 = uicontrol(fh,'Posit',[30 10 60 30],'String','Button 1');
b2 = uicontrol(fh,'Posit',[50 50 60 30],'String','Button 2');
b3 = uicontrol(fh,'Posit',[10 80 60 30],'String','Button 3');

    メモ:   以下 3 つの align の例は、それぞれこの整列していないプッシュ ボタンから始めて、異なった方法で再配置します。実際には、uicontrol を使用してボタンを作成し、Position を指定しないと、ボタンの位置は常に [20 20 60 20] (ピクセル単位) となります。つまり、既定の位置を使用してボタンの作成を続けると、同じ位置に重なることになります。

コンポーネントを水平に整列-   次のステートメントは、プッシュ ボタンを境界の右に水平に移動させます。これは、その垂直位置を変更しません。この Figure は、オリジナルの境界を示します。

align([b1 b2 b3],'Right','None');

コンポーネントを垂直に配置して水平方向に整列-   次のステートメントは、プッシュ ボタンを境界ボックスの中央まで水平方向に移動させ、垂直方向の位置を調整します。'Fixed' オプションは、ボックス間の距離を一様にします。距離をポイント単位 (1 ポイント = 1/72 インチ) で指定します。この例では、距離は 7 ポイントです。オリジナルの境界の中央に、プッシュ ボタンが現われます。下方のプッシュ ボタンは、オリジナルの境界のボックスの下部に留まります。

align([b1 b2 b3],'Center','Fixed',7);

コンポーネントを水平に配置して垂直方向に整列-  次のステートメントでは、プッシュ ボタンを境界ボックスの下まで移動させます。また、水平方向の位置を調整して、ボックス間の距離を固定した 5 ポイントにします。元の境界の下部に、プッシュ ボタンが現れます。

align([b1 b2 b3],'Fixed',5,'Bottom');

オブジェクト整列ツールの使用方法

Figure に標準のメニュー バーがある場合、プロット編集モードで直接選択したコンポーネントに対して整列/配置操作を実行できます。[ツール] メニューのいくつかのオプションを使用すると、align 関数コマンドを入力せずに済みます。次の図で、整列および配置メニュー項目は強調表示されています。

次の手順では、「オブジェクト整列ツール」を使用して GUI のコンポーネントを配置する方法を説明しています。関数 align の使用方法で説明されているように、このツールは関数 align と同じオプションを提供します。

  1. [ツール][プロットの編集] を選択します。

  2. 整列させたいコンポーネントを選択します。

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

  4. [垂直] パネルで、3 番目の [配置] オプション (関数 alignMiddle VerticalAlignment オプションと同じ) を選択します。[水平] パネルで、最初の [整列] オプション (関数 alignLeft HorizontalAlignment オプションと同じ) を選択します。

  5. [適用] をクリックします。

    次に示すように、ボタンが整列します。

    メモ:   コンポーネントを整列させるときに 1 つ覚えておくべきことは、関数 align がポイント単位を使用するのに対して、オブジェクト整列 GUI はピクセル単位を使用するということです。ただし、どちらの方法も、整列させるコンポーネントの Units プロパティを変更しません。

Figure の [ツール] メニューから [整列] または [配置] オプションを選択して、いずれかの操作を直ちに実行することもできます。たとえば、[整列] メニュー項目から利用できる 6 つのオプションは次のとおりです。

詳細は、「[配置/整列] メニュー オプション」を参照してください。

対話的に色を設定

色の例を確認せずに、ColorForegroundColorBackgroundColorFontColor、 およびプロット オブジェクトのカラー プロパティに対して色を指定することは、難しいことがあります。関数 uisetcolor は、set を使用してコンポーネントの作成時または作成後にコンポーネントにプラグインできるカラー値を返す GUI を開きます。たとえば、次のステートメントは、色を選択できるカラー セレクター GUI を開きます。

set(object_handle,'BackgroundColor',uisetcolor)

[OK] をクリックすると、set が直ちに割り当てる RGB カラー ベクトルが返されます。オブジェクトが、指定された名前をもつプロパティをもたない場合や、指定されたプロパティが RGB カラー値を受け入れない場合は、エラーが発生します。

位置と色の設定を 1 行のコードまたは 1 つの関数にまとめることができます。以下に例を示します。

btn1 = uicontrol('String', 'Button 1',...
                  'Position',getrect,...
                  'BackgroundColor',uisetcolor)

このステートメントを実行すると、最初に getrect が実行されて、rbbox を使用して位置を設定できます。マウス ボタンを離すと、uisetcolor GUI が開いて、背景色を指定できます。

対話的にフォントの特性を設定

uisetfont GUI では、システム上のすべてのフォントの特性にアクセスできます。これを使用して、テキストを表示する任意のコンポーネントについてフォントの特性を設定します。選択したプロパティ値を記述するデータを含む構造体が返されます。

FontData = uisetfont(object_handle)

   FontData =
       FontName: 'Arial'
     FontWeight: 'bold'
      FontAngle: 'normal'
       FontSize: 10
      FontUnits: 'points' 

uisetfont は、一度にすべてのフォント特性を返します。構造体からフィールドを削除しない限り、それらのいずれかを省略できません。String プロパティをもつコンポーネントの作成時に、uisetfont を使用できます。テキスト文字列入力用の定義済み GUI である inputdlg を呼び出すことによって、同時に文字列自体を指定することもできます。スタティック テキストの作成、フォント プロパティの設定、フォントの配置を対話的に行う例を次に示します。

 txt1 = uicontrol(...
            'Style','text',...
            'String',inputdlg('String','Static Text'),...
             uisetfont,'Position',getrect)

次に示すように、inputdlg ダイアログ ボックスが最初に表示されます。

文字列を入力し、[OK] をクリックすると、uisetfont ダイアログ ボックスが開いて、文字列を表示するためのフォントの特性を設定できます。

フォント、スタイルおよびサイズを指定し、[OK] をクリックすると、関数 getrect が実行されます (位置ベクトルのスケッチを参照)。テキスト コンポーネントの四角形をドラッグ アウトし、マウス ボタンを離します。結果は、次の図のようになります。

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