ライブスクリプトへの対話型コントロールの追加

スライダー、スピナー、ドロップダウンリスト、チェックボックス、編集フィールド、ボタン、ファイルブラウザー、およびカラーピッカーをライブスクリプトに追加して、変数の値を対話的に制御できます。スクリプトに対話型コントロールを追加すると、スクリプトを他のユーザーと共有する場合に便利です。対話型コントロールを使用することで、使い慣れたユーザーインターフェイスコンポーネントを使って、ライブスクリプトにある変数の値の設定や変更を行います。

コントロールの挿入

ライブスクリプトにコントロールを挿入するには、[ライブエディター] タブの [コード] セクションで [コントロール] をクリックします。次に、利用可能なオプションから選択します。既存の値をコントロールで置き換えるには、ライブスクリプトで値を選択してから、コントロールを挿入します。[コントロール] メニューには、選択した値に対して利用可能なオプションのみが表示されます。コントロールを構成するには、ライブスクリプトでそのコントロールを右クリックして [コントロールの構成] を選択します。

次の表に、コントロールの完全なリストを示します。

コントロール説明構成の詳細

コントロール	説明	構成の詳細
ボタン	ボタンコントロールを使用して、ボタンのクリックで対話的にコードを実行します。	ボタンに表示されているテキストを変更するには、[ラベル] セクションでラベルテキストを入力します。
チェックボックス	チェックボックスを使用して、変数の値を logical 値 `1` (`true`) または logical 値 `0` (`false`) のいずれかに対話的に設定します。表示されているチェックボックスの状態 (オンまたはオフ) によって、現在の値が決まります。	該当なし
カラーピッカー	カラーピッカーを使用して対話的に色を選択します。カラーピッカーに表示される色は、現在選択されている色です。	[形式] セクションで、利用可能なオプションから選択して、カラーピッカーの色の形式を指定します。有効な形式には次のものがあります。 RGB [0-1] — 範囲 `[0,1]` の値をもつ 3 要素の配列として指定した RGB 3 成分 (たとえば、`[0.4 0.6 0.7]`)。 RGB [0-255] — 範囲 `[0,255]` の値をもつ 3 要素の配列として指定した RGB 3 成分 (たとえば、`[34 89 90]`)。 16 進数 — ハッシュ記号 (`#`) で始まり、3 桁または 6 桁の `0` から `F` までの範囲の 16 進数が続く string スカラーまたは文字ベクトルとして指定された 16 進数カラーコード (たとえば、`"#c24463"`)。この値は大文字と小文字を区別しません。 HSV — 3 要素の配列として指定された HSV 3 成分。最初の要素 (`H`) は `[0,360]` の範囲内で、2 番目と 3 番目の要素 (`S` と `V`) は `[0,100]` の範囲内でなければなりません (たとえば、`[345 65 76]`)。
ドロップダウンリスト	ドロップダウンリストを使用して項目のリストから選択することで、変数の値を対話的に変更します。ドロップダウンリストに表示されている項目にカーソルを合わせると、その値が表示されます。	[項目] 、 [項目のラベル] フィールドで、ドロップダウンリストの各項目に表示するテキストを指定します。 [項目] 、 [項目の値] フィールドで、ドロップダウンリストの各項目の値を指定します。ライブエディターではリスト内の各項目がコードとして解釈されるため、テキストの値は必ず一重引用符または二重引用符で囲んでください。また、変数に格納された値を使用してドロップダウンリストに項目を設定できます。詳細については、コントロールへの変数のリンクを参照してください。
編集フィールド	編集フィールドを使用して、変数の値を任意の入力値に対話的に設定します。編集フィールドに表示されるテキストと設定したデータ型によって、現在の値が決まります。	[タイプ] セクションの [データ型] フィールドで、利用可能なオプションから選択して、編集フィールドのテキストのデータ型を指定します。
ファイルブラウザー	ファイルブラウザーを使用して、ファイル選択ダイアログボックスを開いてファイルを対話的に選択するか、フォルダー選択ダイアログボックスを開いてフォルダーを対話的に選択します。編集フィールドに表示されるテキストによって、現在の値が決まります。	[タイプ] セクションで、ファイルブラウザーを使用してファイルを選択する場合は [ファイル] を選択し、ファイルブラウザーを使用してフォルダーを選択する場合は [フォルダー] を選択します。 [ファイルの選択] ボタンの横にテキストを表示するには、[ラベル] セクションでラベルテキストを入力します。
数値スライダー	数値スライダーを使用して、スライダーのつまみを目的の数値に動かすことで、変数の値を対話的に変更します。スライダーの左側にある値は現在の値です。	[値] セクションで、[最小値]、[最大値]、および [ステップ] の値を指定するか、ドロップダウンリストからワークスペース変数を選択します。変数を使用したスライダー値の指定の詳細については、コントロールへの変数のリンクを参照してください。
数値スピナー	数値スピナーを使用して、値の右側にある上下の矢印ボタンをクリックすることで変数の値を対話的にインクリメントまたはデクリメントします。また、数値編集フィールドにスピナーの数値を入力することもできます。数値編集フィールドの値はスピナーの現在の値です。	[値] セクションで、[最小値]、[最大値]、および [ステップ] の値を指定するか、ドロップダウンリストからワークスペース変数を選択します。変数を使用したスピナー値の指定の詳細については、コントロールへの変数のリンクを参照してください。
状態ボタン	状態ボタンを使用して、ボタンをクリックしてオンまたはオフにすることで、logical 変数の値を対話的に設定します。表示されている状態ボタンの状態 (押された状態または押されていない状態) によって、現在の値が決まります。	状態ボタンに表示されるテキストを変更するには、[ラベル] セクションでラベルテキストを入力します。

ボタン

Sample of a button

ボタンコントロールを使用して、ボタンのクリックで対話的にコードを実行します。

ボタンに表示されているテキストを変更するには、[ラベル] セクションでラベルテキストを入力します。

チェックボックス

Sample of a check box

チェックボックスを使用して、変数の値を logical 値 1 (true) または logical 値 0 (false) のいずれかに対話的に設定します。

表示されているチェックボックスの状態 (オンまたはオフ) によって、現在の値が決まります。

該当なし

カラーピッカー

Sample of a color picker

カラーピッカーを使用して対話的に色を選択します。

カラーピッカーに表示される色は、現在選択されている色です。

[形式] セクションで、利用可能なオプションから選択して、カラーピッカーの色の形式を指定します。有効な形式には次のものがあります。

RGB [0-1] — 範囲 [0,1] の値をもつ 3 要素の配列として指定した RGB 3 成分 (たとえば、[0.4 0.6 0.7])。
RGB [0-255] — 範囲 [0,255] の値をもつ 3 要素の配列として指定した RGB 3 成分 (たとえば、[34 89 90])。
16 進数 — ハッシュ記号 (#) で始まり、3 桁または 6 桁の 0 から F までの範囲の 16 進数が続く string スカラーまたは文字ベクトルとして指定された 16 進数カラーコード (たとえば、"#c24463")。この値は大文字と小文字を区別しません。
HSV — 3 要素の配列として指定された HSV 3 成分。最初の要素 (H) は [0,360] の範囲内で、2 番目と 3 番目の要素 (S と V) は [0,100] の範囲内でなければなりません (たとえば、[345 65 76])。

ドロップダウンリスト

Sample of a drop-down list

ドロップダウンリストを使用して項目のリストから選択することで、変数の値を対話的に変更します。

ドロップダウンリストに表示されている項目にカーソルを合わせると、その値が表示されます。

[項目] 、 [項目のラベル] フィールドで、ドロップダウンリストの各項目に表示するテキストを指定します。

[項目] 、 [項目の値] フィールドで、ドロップダウンリストの各項目の値を指定します。ライブエディターではリスト内の各項目がコードとして解釈されるため、テキストの値は必ず一重引用符または二重引用符で囲んでください。

また、変数に格納された値を使用してドロップダウンリストに項目を設定できます。詳細については、コントロールへの変数のリンクを参照してください。

編集フィールド

Sample of an edit field

編集フィールドを使用して、変数の値を任意の入力値に対話的に設定します。

編集フィールドに表示されるテキストと設定したデータ型によって、現在の値が決まります。

[タイプ] セクションの [データ型] フィールドで、利用可能なオプションから選択して、編集フィールドのテキストのデータ型を指定します。

ファイルブラウザー

Sample of a file browser

ファイルブラウザーを使用して、ファイル選択ダイアログボックスを開いてファイルを対話的に選択するか、フォルダー選択ダイアログボックスを開いてフォルダーを対話的に選択します。

編集フィールドに表示されるテキストによって、現在の値が決まります。

[タイプ] セクションで、ファイルブラウザーを使用してファイルを選択する場合は [ファイル] を選択し、ファイルブラウザーを使用してフォルダーを選択する場合は [フォルダー] を選択します。

[ファイルの選択] ボタンの横にテキストを表示するには、[ラベル] セクションでラベルテキストを入力します。

数値スライダー

Sample of a numeric slider

数値スライダーを使用して、スライダーのつまみを目的の数値に動かすことで、変数の値を対話的に変更します。

スライダーの左側にある値は現在の値です。

[値] セクションで、[最小値]、[最大値]、および [ステップ] の値を指定するか、ドロップダウンリストからワークスペース変数を選択します。

変数を使用したスライダー値の指定の詳細については、コントロールへの変数のリンクを参照してください。

数値スピナー

Sample of a numeric spinner

数値スピナーを使用して、値の右側にある上下の矢印ボタンをクリックすることで変数の値を対話的にインクリメントまたはデクリメントします。また、数値編集フィールドにスピナーの数値を入力することもできます。

数値編集フィールドの値はスピナーの現在の値です。

変数を使用したスピナー値の指定の詳細については、コントロールへの変数のリンクを参照してください。

状態ボタン

Sample of a state button

状態ボタンを使用して、ボタンをクリックしてオンまたはオフにすることで、logical 変数の値を対話的に設定します。

表示されている状態ボタンの状態 (押された状態または押されていない状態) によって、現在の値が決まります。

状態ボタンに表示されるテキストを変更するには、[ラベル] セクションでラベルテキストを入力します。

コントロールのラベルの変更

ライブスクリプトでコードを非表示にし、書式設定済みテキスト、ラベル付きのコントロール、タスク、および出力のみを表示できます。ライブスクリプトの共有やエクスポートに際しては、コードを非表示にすると便利です。コードを非表示にするには、ライブスクリプトの右にある [コードを非表示] ボタンをクリックします。[ビュー] タブの [ビュー] セクションでも [コードを非表示] をクリックできます。コードを再度表示するには、[インラインで出力] ボタンまたは [右側に出力] ボタンをクリックします。

コードを非表示にすると、コントロールの横にラベルが表示されます。コントロールのラベルを変更するには、コントロールを右クリックして [コントロールの構成] を選択します。次に、[ラベル] セクションで、ラベルテキストを入力します。ラベルテキストは、すべてのビューのボタンコントロールに表示されるテキストでもあります。Tab キーまたは Enter キーを押すか、コントロールの構成メニューの外側をクリックしてライブスクリプトに戻ります。

コントロールへの変数のリンク

変数をスライダーの値、スピナーの値、およびドロップダウン項目にリンクして動的なコントロールを作成できます。

変数を使用してスライダーまたはスピナーの最小値、最大値、およびステップ値を指定するには、コントロールを右クリックして [コントロールの構成] を選択します。次に、[値] セクションで、[最小値]、[最大値]、および [ステップ] のワークスペース変数を選択します。double 型の数値をもつ変数のみがドロップダウンリストに表示されます。選択したい変数がリストされていない場合、まずはライブスクリプトの実行を試してワークスペースで変数を作成します。変数に対する変更は数値スライダーまたは数値スピナーに自動的に反映されます。

変数に格納された値を使用してドロップダウンリストに項目を設定するには、コントロールを右クリックして [コントロールの構成] を選択します。次に、[項目] セクションで、[変数] リストからワークスペース変数を選択します。変数はリストに表示される string 配列または string スカラーでなければなりません。選択したい変数がリストされていない場合、まずはライブスクリプトの実行を試してワークスペースで変数を作成します。変数に対する変更はドロップダウンリストに自動的に反映されます。

たとえば、ライブスクリプトを作成して、姓のリストを含む変数 lastnames を定義します。

lastnames = ["Houston","Vega","Obrien","Potter","Rivera","Hanson","Fowler","Tran","Briggs"];

ライブスクリプトを実行して、ワークスペースで lastnames を作成します。次に、[ライブエディター] タブの [コード] セクションで [コントロール] 、 [ドロップダウン] を選択します。コントロールの構成メニューの [項目] セクションで、[変数] に lastnames を選択します。

Drop-down list configuration menu with the lastnames variable selected and the lists of item labels and item values populated with the variable values

構成メニューを閉じててライブスクリプトに戻ります。ドロップダウンリストには、lastnames で定義された姓が含まれます。

Drop-down list containing nine last names

lastnames の値を追加、削除、編集すると、それに合わせてドロップダウンリストの項目が MATLAB^® によって更新されます。

メモ

ドロップダウンリストの項目が変数にリンクされており、その変数の 1 つ以上の値がライブスクリプトの実行中に削除されると、削除された値のいずれかが選択したリスト項目であった場合にエラーが発生する可能性があります。このエラーが発生する可能性を最小限に抑えるには、ライブスクリプトの実行中に、リンクされている変数から値を削除しないようにしてください。

既定値の指定

ライブスクリプトでスライダー、スピナー、ドロップダウンリスト、チェックボックス、編集フィールド、状態ボタン、およびカラーピッカーの既定値を設定できます。

コントロールの既定値を設定するには、コントロールを右クリックして [コントロールの構成] を選択します。次に、[既定] セクションで、値を入力するかリストからワークスペース変数を選択して既定値を指定します。リストには、コントロールに有効な変数のみが表示されます。ドロップダウンリストの場合は、項目のリストから既定値を選択します。

コントロールの既定値に戻すには、コントロールを右クリックして [既定値に戻す] を選択します。

ヒント

コントロールの値をワークスペース変数にリンクするには、コントロールの既定値をその変数に設定します。コントロールの値は既定値に設定され、変数値が変化するとその値も変化します。コントロールの値は、数値スライダーのつまみを動かすなどして手動で変更するまで、変数値にリンクされたままになります。

コントロールの実行の変更

コントロールの値が変化したときに、いつ、どのコードを実行するかを変更できます。既定では、コントロールの値が変化すると、ライブエディターは現在のセクションでコードを実行します。この動作を構成するには、コントロールを右クリックして [コントロールの構成] を選択します。次に、[実行] セクションで、次の表で説明されているフィールドの値を変更します。Tab キーまたは Enter キーを押すか、コントロールの構成メニューの外側をクリックしてライブスクリプトに戻ります。

フィールドオプション

フィールド	オプション
実行タイミング (数値スライダーと数値スピナーのみ)	次のいずれかのオプションを選択して、コードを実行するタイミングを指定します。 `値の変化中` (既定値) — スライダーまたはスピナーの値の変化中にコードを実行します。 `値の変化後` — スライダーまたはスピナーの値が変化した後 (ユーザーがスライダーのつまみまたはスピナーの上下矢印ボタンを放したとき) にコードを実行します。
実行	次のいずれかのオプションを選択して、コントロールの値が変化したときにどのコードを実行するかを指定します。 `現在のセクション` (既定) — コントロールが含まれるセクションを実行します。 `現在のセクションと、上のセクションのうち変更済みまたは未実行のセクション` — 現在のセクションと、コントロールの上にある変更済みまたは未実行のコードを実行します。ライブスクリプトがまだ実行されていない場合は、コントロールの値を変更すると、現在のセクションと、それより前のすべてのセクションが実行されます。 `現在のセクションから最後まで` — コントロールが含まれるセクションとそれに続くセクションを実行します。 `すべてのセクション` — ライブスクリプト内のすべてのセクションを実行します。 `なし` — コードを実行しません。ヒントライブスクリプトのボタンコントロールを使用する場合は、ライブスクリプトの他のすべてのコントロールの [実行] フィールドを `[なし]` に設定することを検討してください。そうすれば、ボタンコントロールをクリックした場合にのみコードが実行されます。これは、コードを実行する前にライブスクリプトで複数のコントロール値を設定する必要がある場合に便利です。

実行タイミング (数値スライダーと数値スピナーのみ)

次のいずれかのオプションを選択して、コードを実行するタイミングを指定します。

値の変化中 (既定値) — スライダーまたはスピナーの値の変化中にコードを実行します。
値の変化後 — スライダーまたはスピナーの値が変化した後 (ユーザーがスライダーのつまみまたはスピナーの上下矢印ボタンを放したとき) にコードを実行します。

実行

次のいずれかのオプションを選択して、コントロールの値が変化したときにどのコードを実行するかを指定します。

現在のセクション (既定) — コントロールが含まれるセクションを実行します。
現在のセクションと、上のセクションのうち変更済みまたは未実行のセクション — 現在のセクションと、コントロールの上にある変更済みまたは未実行のコードを実行します。ライブスクリプトがまだ実行されていない場合は、コントロールの値を変更すると、現在のセクションと、それより前のすべてのセクションが実行されます。
現在のセクションから最後まで — コントロールが含まれるセクションとそれに続くセクションを実行します。
すべてのセクション — ライブスクリプト内のすべてのセクションを実行します。
なし — コードを実行しません。

ヒント

ライブスクリプトのボタンコントロールを使用する場合は、ライブスクリプトの他のすべてのコントロールの [実行] フィールドを [なし] に設定することを検討してください。そうすれば、ボタンコントロールをクリックした場合にのみコードが実行されます。これは、コードを実行する前にライブスクリプトで複数のコントロール値を設定する必要がある場合に便利です。

複数の対話型コントロールをもつライブスクリプトの作成

ライブスクリプトを開く

この例では、対話型コントロールを使用して、MATLAB で患者データを可視化および調査する方法を示します。さまざまな対話型コントロールを使用して、患者のリストをフィルター処理し、そのフィルター処理したリストの年齢と収縮期血圧をプロットして、特定の血圧を超えている患者を強調表示します。

この例では、変数を使用して、スライダーとスピナーの値、およびドロップダウンリストの項目を制御します。たとえば、患者のリストを場所でフィルター処理するには、ドロップダウンリストを挿入し、変数 locationStrings を選択して項目をリストに設定します。患者のリストを年齢でフィルター処理するには、数値スライダーを挿入し、[最小値] および [最大値] の値として変数 minAge と変数 maxAge を選択します。収縮期血圧のしきい値を指定するには、数値スピナーを挿入し、[最小値] および [最大値] の値として変数 minPressure と変数 maxPressure を選択します。

[Filter Data] ボタンが押された場合のみデータをフィルターするには、ドロップダウンリスト、チェックボックス、数値スライダー、および編集フィールドの実行オプションの [実行] を [Nothing] に設定します。

コントロールの表示とそれによる対話を行うため、この例をブラウザーまたは MATLAB で開きます。

サンプルの患者データの取得とフィルター処理

ファイルブラウザーを使用して、患者データが含まれているファイルを選択し、患者データから table を作成します。ドロップダウンリスト、チェックボックス、数値スライダー、および編集フィールドを使用して、場所、喫煙状態、年齢、患者の姓に示される文字など、患者のフィルター処理情報を指定します。[Filter Data] ボタンを使用して、データをフィルター処理します。

filename = "patients.xls";
T = readtable(filename);

locationStrings = ["VA Hospital","County General Hospital","St. Mary's Medical Center"];
selectedLocation = locationStrings(1);

isSmoker = false;

maxAge = max(T.Age);
minAge = min(T.Age);
minimumAge = 31;

nameContains = "e";

 

idx = T.Location==selectedLocation & T.Smoker==isSmoker & T.Age>=minimumAge;
if ~strcmp(nameContains,"")
    idx = idx & contains(T.LastName,nameContains);
end
TFiltered = T(idx,:);

フィルター処理した患者データのプロット

フィルター処理した患者データの年齢と収縮期血圧をプロットすることで、特定の血圧を超えている患者を強調表示します。数値スピナーを使用して、血圧のしきい値を指定します。

minPressure = min(TFiltered.Systolic);
maxPressure = max(TFiltered.Systolic);
thresholdPressure = 123;

TOverThreshold = TFiltered(TFiltered.Systolic>=thresholdPressure,:);

sp1 = scatter(TFiltered.Age,TFiltered.Systolic);
hold on
sp2 = scatter(TOverThreshold.Age,TOverThreshold.Systolic,"red");
hold off

title("Age vs. Systolic Blood Pressure of Patients")
xlabel("Age")
ylabel("Systolic Blood Pressure")

legendText = sprintf("Patients with systolic blood pressure over %d mmHg",thresholdPressure);
legend(sp2,legendText,Location="southoutside")

Figure contains an axes object. The axes object with title Age vs. Systolic Blood Pressure of Patients, xlabel Age, ylabel Systolic Blood Pressure contains 2 objects of type scatter. This object represents Patients with systolic blood pressure over 123 mmHg.

ライブスクリプトの共有

ライブスクリプトが完了したら、他のユーザーと共有します。ユーザーはライブスクリプトを MATLAB で開いて、コントロールを対話的に使用してライブスクリプトを体験できます。

ライブスクリプト自体を対話型ドキュメントとして共有している場合は、ライブスクリプトを共有する前にライブスクリプト内のコードを非表示にすることを検討してください。コードが非表示の場合、ライブエディターには書式設定済みテキスト、ラベルの付いたコントロール、タスク、および出力のみが表示されます。ライブスクリプトのタスクがコードのみを表示してコントロールは表示しない構成になっている場合、コードを非表示にするとタスクは表示されません。コードを非表示にするには、ライブスクリプトの右にある [コードを非表示] ボタンをクリックします。[ビュー] タブの [ビュー] セクションでも [コードを非表示] をクリックできます。

ライブスクリプトを PDF ファイル、Microsoft^® Word ドキュメント、HTML ファイル、LaTeX ファイル、マークダウンファイル、または Jupyter^® Notebook として共有すると、ライブエディターはコントロールをコードとして保存します。たとえば、複数の対話型コントロールをもつライブスクリプトの作成の例のライブスクリプトが ([ライブエディター] タブの [エクスポート] オプションを使用して) HTML にエクスポートされると、ファイルブラウザーコントロールがその現在の値 ("patients.xls") に置き換えられ、ドロップダウンリストコントロールがその現在の値 (locationStrings(1)) に置き換えられ、チェックボックスコントロールがその現在の値 (false) に置き換えられ、数値スライダーコントロールがその現在の値 (31) に置き換えられ、テキストボックスコントロールがその現在の値 ("e") に置き換えられます。[Filter Data] ボタンは表示されません。