メインコンテンツ

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

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

コントロールの挿入

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

ライブ スクリプトにコントロールが既に含まれていると、場合によっては、同様の機能をもつ別のコントロールに置き換えることができます。コントロールを別のコントロールに置き換えるには、そのコントロールを右クリックして [Control Name に置き換え] を選択します。ライブ スクリプトでコントロールを選択して [ライブ エディター] タブに移動し、[コントロール] をクリックして使用可能なオプションから選択することもできます。コントロールを別のコントロールに置き換えるとき、範囲や既定値などの関連する構成の値は維持されます。

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

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

ボタン

Sample of a button

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

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

ボタンのクリック時にどのコードを実行するかを指定するには、[実行] セクションで [実行] オプションを指定します。詳細については、コントロールの実行の変更を参照してください。

チェック ボックス

Sample of a check box

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

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

該当なし

カラー ピッカー (R2023b 以降)

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 番目の要素 (SV) は [0,100] の範囲内でなければなりません (たとえば、[345 65 76])。

日付ピッカー (R2024a 以降)

Sample of a date picker

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

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

[形式] セクションで、利用可能なオプションから選択して、日付ピッカーの日付の形式を指定します。

ドロップダウン リスト

Sample of a drop-down list

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

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

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

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

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

編集フィールド

Sample of an edit field

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

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

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

ファイル ブラウザー (R2023a 以降)

Sample of a file browser

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

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

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

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

範囲スライダー (R2024b 以降)

Sample of a range slider

範囲スライダーを使用して、左右の範囲スライダーのつまみを目的の最小範囲値と最大範囲値に移動することで、範囲を対話的に選択します。

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

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

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

スライダー

Sample of a slider

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

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

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

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

スピナー

Sample of a spinner

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

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

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

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

状態ボタン (R2023b 以降)

Sample of a state button

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

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

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

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

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

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

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

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

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

R2026a より前: double 型の数値をもつ変数のみがサポートされます。

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

R2024b より前: 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] に設定します。

Label configuration menu with the Min value set to the minAge variable, Max value set to the maxAge variable, and the Run execution option set to 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 = true;

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] ボタンは表示されません。

Live script exported to HTML with the interactive controls replaced by their values at export time

参考

トピック