Button
ボタン UI コンポーネント
説明
ボタン UI コンポーネントは、アプリ ユーザーがボタンを押したときに反応します。Button オブジェクトを使用して、ボタンの作成後にボタンの外観と動作を変更します。
作成
uibutton 関数を使用してアプリでボタンを作成します。
プロパティ
ボタン
ボタン ラベル。文字ベクトル、文字ベクトルの cell 配列、string スカラー、string 配列、または 1 次元の categorical 配列として指定します。ボタンに 1 行のテキストのラベルを付ける場合は文字ベクトルまたは string スカラーを指定します。ボタンに複数行のテキストのラベルを付ける場合は cell 配列または string 配列を使用します。配列の各要素は、テキストの各行を表します。このプロパティを categorical 配列として指定した場合、MATLAB® はカテゴリの完全なセットではなく、配列内の値を使用します。
ボタン テキスト インタープリター。次のいずれかとして指定します。
'none'— リテラル文字を表示します。'tex'— TeX マークアップのサブセットを使用してテキストを解釈します。'latex'— LaTeX マークアップのサブセットを使用してテキストを解釈します。'html'— HTML マークアップのサブセットを使用してテキストを解釈します。
TeX マークアップ
TeX マークアップを使用して、上付き文字や下付き文字の追加、テキストへの特殊文字の挿入を行うことができます。
修飾子の効果はテキストの末尾まで適用されます。上付き文字と下付き文字は例外であり、次の 1 文字または中かっこで囲まれた文字にのみ適用されます。インタープリターを "tex" に設定した場合にサポートされる修飾子は次のとおりです。
| 修飾子 | 説明 | 例 |
|---|---|---|
^{ } | 上付き文字 | "text^{superscript}" |
_{ } | 下付き文字 | "text_{subscript}" |
\bf | 太字フォント | "\bf text" |
\it | イタリック フォント | "\it text" |
\sl | 斜体フォント (通常はイタリック フォントと同じ) | "\sl text" |
\rm | 標準フォント | "\rm text" |
\fontname{ | フォント名 — | "\fontname{Courier} text" |
\fontsize{ | フォント サイズ — | "\fontsize{15} text" |
\color{ | フォントの色 — red、green、yellow、magenta、blue、black、white、gray、darkGreen、orange、lightBlue の色のいずれかに置き換えます。 | "\color{magenta} text" |
\color[rgb]{specifier} | フォントのカスタムの色 — | "\color[rgb]{0,0.5,0.5} text" |
次の表に、"tex" インタープリターでサポートされる特殊文字を示します。
| 文字列 | 記号 | 文字列 | 記号 | 文字列 | 記号 |
|---|---|---|---|---|---|
| α |
| υ |
| ~ |
| ∠ |
| ϕ |
| ≤ |
|
|
| χ |
| ∞ |
| β |
| ψ |
| ♣ |
| γ |
| ω |
| ♦ |
| δ |
| Γ |
| ♥ |
| ϵ |
| Δ |
| ♠ |
| ζ |
| Θ |
| ↔ |
| η |
| Λ |
| ← |
| θ |
| Ξ |
| ⇐ |
| ϑ |
| Π |
| ↑ |
| ι |
| Σ |
| → |
| κ |
| ϒ |
| ⇒ |
| λ |
| Φ |
| ↓ |
| µ |
| Ψ |
| º |
| ν |
| Ω |
| ± |
| ξ |
| ∀ |
| ≥ |
| π |
| ∃ |
| ∝ |
| ρ |
| ∍ |
| ∂ |
| σ |
| ≅ |
| • |
| ς |
| ≈ |
| ÷ |
| τ |
| ℜ |
| ≠ |
| ≡ |
| ⊕ |
| ℵ |
| ℑ |
| ∪ |
| ℘ |
| ⊗ |
| ⊆ |
| ∅ |
| ∩ |
| ∈ |
| ⊇ |
| ⊃ |
| ⌈ |
| ⊂ |
| ∫ |
| · |
| ο |
| ⌋ |
| ¬ |
| ∇ |
| ⌊ |
| x |
| ... |
| ⊥ |
| √ |
| ´ |
| ∧ |
| ϖ |
| ∅ |
| ⌉ |
| 〉 |
| | |
| ∨ |
| 〈 |
| © |
LaTeX マークアップ
LaTeX マークアップを使用するには、インタープリターを 'latex' に設定します。LaTeX マークアップを使用して、数式、方程式、特殊文字を書式設定して表示します。ドル記号を使用してマークアップ テキストを囲みます。たとえば、インライン モードでは '$\int_1^{20} x^2 dx$'、表示モードでは '$$\int_1^{20} x^2 dx$$' を使用します。
テキストは LaTeX の既定のフォント スタイルで表示され、FontName、FontWeight、FontAngle のプロパティは無視されます。フォント スタイルを変更するには、LaTeX マークアップを使用します。
MATLAB では、大半の標準の LaTeX 数式モード コマンドがサポートされています。詳細については、サポートされる LaTeX コマンドを参照してください。
HTML マークアップ
HTML マークアップを使用するには、インタープリターを 'html' に設定します。HTML を使用したフォント スタイルの設定は、等価なフォント プロパティをオーバーライドします。たとえば、次のコードは赤のテキストをもつボタンを作成します。
fig = uifigure; b = uibutton(fig,"Interpreter","html"); b.Text = '<p style="color: red;">Text</p>'; b.FontColor = "blue";
インタープリターは HTML マークアップのサブセットをサポートします。一般的なガイドラインとして、インタープリターはテキスト関連のタグとスタイルをサポートします。サポートされないタグとスタイルは無視されます。
次の表に、サポートされる要素と要素の属性を一覧します。
| HTML 要素 | 属性 | 説明 |
|---|---|---|
a | style, target, href, title | ハイパーリンク |
abbr | style, title | 略語または頭字語 |
address | style | 連絡先情報 |
article | style | 自己完結した単独のコンテンツ |
aside | style | 主な内容に間接的に関連するコンテンツ |
b | style | 太字フォント |
bdi | style, dir | 周囲のテキストとは異なる方向で書式設定されるコンテンツ |
bdo | style, dir | 周囲のテキストとは異なる方向で書式設定されるコンテンツ |
big | style | 周囲のテキストよりフォント サイズが 1 レベル大きいテキスト (HTML5 では旧式) |
blockquote | style, cite | 拡張された引用 |
br | N/A | 改行 |
caption | style | テーブルのキャプションまたはタイトル |
center | style | 水平方向に中央揃えされたコンテンツ |
cite | style | 参照先のタイトル |
code | style | コードのフラグメント |
col | style, align, valign, span, width | テーブル内の列 |
colgroup | style, align, valign, span, width | テーブル内の列のグループ |
dd | style | 説明リストの用語または値 |
del | style, datetime | ドキュメントから削除されたテキスト |
details | style, open | '開いた' 状態に切り替えた場合にのみテキストが表示される対話型ウィジェット |
dl | style | 説明リスト |
dt | style | 説明リストの用語または値 |
em | style | 強調表示されるテキスト (通常、イタリックで表示) |
font | style, color, size, face | 指定したフォント プロパティのテキスト (HTML5 では旧式) |
footer | style | フッター |
h1. h2, h3, h4, h5, h6 | style | セクション見出し — <h1> が見出しの最上位、<h6> が最下位 |
header | style | 導入コンテンツ |
hr | style | 主題の区切り |
i | style | 周囲のコンテンツからのテキスト オフセット — 既定の設定ではイタリックとしてレンダリングされる |
ins | style, datetime | ドキュメントに挿入されたテキスト |
li | style | リスト内の項目 |
mark | style | マークアップ テキストまたは強調表示されたテキスト |
ol | style | 順序付きリスト |
p | style | 段落 |
pre | style | 書式設定済みテキスト |
s | style | 取り消し線付きのテキスト |
strike | style | 取り消し線付きのテキスト (HTML5 では旧式) |
section | style | 独立したセクション |
small | style | 周囲のテキストよりフォント サイズが 1 レベル小さいテキスト (HTML5 では旧式) |
sub | style | 下付き文字 |
sup | style | 上付き文字 |
strong | style | 重要度が高いテキスト |
table | style, width, border, align, valign | テーブル |
tbody | style, align, valign | テーブル本体 |
td | style, width, rowspan, colspan, align, valign | テーブル データ セル |
tfoot | style, align, valign | テーブル列をまとめる一連のテーブル行 |
th | style, width, rowspan, colspan, align, valign | セルのグループのヘッダーとして指定されたテーブル データ セル |
thead | style, align, valign | 列見出しを指定する一連のテーブル行 |
tr | style, rowspan, align, valign | テーブル セルの行 |
tt | style | 固定幅テキスト (HTML5 では旧式) |
u | style | 非言語的注釈を使用するテキスト — 既定の設定では下線としてレンダリングされる |
ul | style | 順序なしリスト |
これらの要素の詳細については、https://developer.mozilla.org/en-US/docs/Web/HTML/Elementを参照してください。
MATLAB コードを実行するハイパーリンクを作成するために HTML マークアップを使用するには、関数を実行するハイパーリンクの作成を参照してください。
HTML スタイル属性を使用して HTML コンテンツを書式設定できます。スタイル属性は CSS 属性とその値の文字列です。
以下の CSS 属性がサポートされています。
background-colorborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthcolordirectionfont-familyfont-sizefont-stylefont-weightheighthiddenline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toptext-aligntext-anchortext-decorationtext-indenttext-overflowtext-shadowtext-transformtitletranslatewhite-spacewidth
これらの属性の詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/Referenceを参照してください。
コンポーネントの幅に合わせるための右端での折り返し。'off' または 'on'、もしくは数値または logical 0 (false) または 1 (true) として指定します。'off' の値は false と等価であり、'on' の値は true と等価です。したがって、このプロパティの値を logical 値として使用できます。値は matlab.lang.OnOffSwitchState 型の on/off logical 値として格納されます。
このプロパティを使用して、表示するテキストよりコンポーネントの幅が小さい場合に水平方向に切り捨てられないようにします。
'off'— テキストは右端で折り返しされません。'on'— テキストを新しい行に折り返して、各行がコンポーネントの幅に収まるようにし、単語が区切られないようにします (可能な場合)。
WordWrap プロパティを 'on' に設定しても、コンポーネントの高さがテキストのすべての行を表示するには小さすぎる場合には、テキストが垂直方向に切り捨てられるのを回避できません。
事前定義されているアイコンまたはカスタム アイコン。文字ベクトル、string スカラー、または m×n×3 のトゥルーカラー イメージ配列として指定します。
事前定義されているアイコン
次の表に、事前定義されているアイコンを指定するための値を一覧します。
| 値 | アイコン |
|---|---|
'' (既定) | アイコンは表示されません。 |
'question' |
|
'info' |
|
'success' |
|
'warning' |
|
'error' |
|
カスタム アイコン
カスタム アイコンを次の値のいずれかとして指定します。
MATLAB パス上にある SVG、JPEG、GIF または PNG イメージのファイル名を指定する文字ベクトルまたは string スカラー。あるいは、イメージ ファイルの絶対パスを指定することもできます。
m×n×3 のトゥルーカラー イメージ配列。詳細については、MATLAB でのイメージ タイプの処理を参照してください。
他のユーザーとアプリを共有する予定の場合は、アプリのパッケージ化を容易にするためにイメージ ファイルを MATLAB パス上に配置します。
Position プロパティ値で指定されたすべての領域をボタンのテキストが占有する場合、MATLAB はアイコンを表示しません。アイコンに利用可能な領域がいくらかある場合、MATLAB は必要に応じて、その領域に収まるようにイメージを縮小します。
フォントと色
フォントの色。RGB 3 成分、16 進数カラー コードまたは表にリストされたオプションのいずれかとして指定します。
RGB 3 成分および 16 進数カラー コードは、カスタム色を指定するのに役立ちます。
RGB 3 成分は、色の赤、緑、青成分の強度を指定する 3 成分の行ベクトルです。強度値は
[0,1]の範囲でなければなりません。たとえば[0.4 0.6 0.7]のようになります。16 進数カラー コードは、ハッシュ記号 (
#) で始まり、3 桁または 6 桁の0からFまでの範囲の 16 進数が続く文字ベクトルまたは string スカラーです。この値は大文字と小文字を区別しません。したがって、カラー コード"#FF8800"、"#ff8800"、"#F80"、および"#f80"は等価です。
あるいは、名前を使用して一部の一般的な色を指定できます。次の表に、名前の付いた色オプション、等価の RGB 3 成分、および 16 進数カラー コードを示します。
| 色名 | 省略名 | RGB 3 成分 | 16 進数カラー コード | 外観 |
|---|---|---|---|---|
"red" | "r" | [1 0 0] | "#FF0000" |
|
"green" | "g" | [0 1 0] | "#00FF00" |
|
"blue" | "b" | [0 0 1] | "#0000FF" |
|
"cyan" | "c" | [0 1 1] | "#00FFFF" |
|
"magenta" | "m" | [1 0 1] | "#FF00FF" |
|
"yellow" | "y" | [1 1 0] | "#FFFF00" |
|
"black" | "k" | [0 0 0] | "#000000" |
|
"white" | "w" | [1 1 1] | "#FFFFFF" |
|
次の表に、ライト テーマとダーク テーマでのプロットの既定のカラー パレットを示します。
| パレット | パレットの色 |
|---|---|
R2025a より前: ほとんどのプロットで、これらの色が既定で使用されます。 |
|
|
|
orderedcolors 関数と rgb2hex 関数を使用すると、これらのパレットの RGB 3 成分および 16 進数カラー コードを取得できます。たとえば、"gem" パレットの RGB 3 成分を取得し、16 進数カラー コードに変換します。
RGB = orderedcolors("gem");
H = rgb2hex(RGB);R2023b より前: RGB = get(groot,"FactoryAxesColorOrder") を使用して、RGB 3 成分を取得します。
R2024a より前: H = compose("#%02X%02X%02X",round(RGB*255)) を使用して、16 進数カラー コードを取得します。
背景色。RGB 3 成分、16 進数カラー コード、または表にリストされた色オプションのいずれかとして指定します。
RGB 3 成分および 16 進数カラー コードは、カスタム色を指定するのに役立ちます。
RGB 3 成分は、色の赤、緑、青成分の強度を指定する 3 成分の行ベクトルです。強度値は
[0,1]の範囲でなければなりません。たとえば[0.4 0.6 0.7]のようになります。16 進数カラー コードは、ハッシュ記号 (
#) で始まり、3 桁または 6 桁の0からFまでの範囲の 16 進数が続く文字ベクトルまたは string スカラーです。この値は大文字と小文字を区別しません。したがって、カラー コード"#FF8800"、"#ff8800"、"#F80"、および"#f80"は等価です。
あるいは、名前を使用して一部の一般的な色を指定できます。次の表に、名前の付いた色オプション、等価の RGB 3 成分、および 16 進数カラー コードを示します。
| 色名 | 省略名 | RGB 3 成分 | 16 進数カラー コード | 外観 |
|---|---|---|---|---|
"red" | "r" | [1 0 0] | "#FF0000" |
|
"green" | "g" | [0 1 0] | "#00FF00" |
|
"blue" | "b" | [0 0 1] | "#0000FF" |
|
"cyan" | "c" | [0 1 1] | "#00FFFF" |
|
"magenta" | "m" | [1 0 1] | "#FF00FF" |
|
"yellow" | "y" | [1 1 0] | "#FFFF00" |
|
"black" | "k" | [0 0 0] | "#000000" |
|
"white" | "w" | [1 1 1] | "#FFFFFF" |
|
次の表に、ライト テーマとダーク テーマでのプロットの既定のカラー パレットを示します。
| パレット | パレットの色 |
|---|---|
R2025a より前: ほとんどのプロットで、これらの色が既定で使用されます。 |
|
|
|
orderedcolors 関数と rgb2hex 関数を使用すると、これらのパレットの RGB 3 成分および 16 進数カラー コードを取得できます。たとえば、"gem" パレットの RGB 3 成分を取得し、16 進数カラー コードに変換します。
RGB = orderedcolors("gem");
H = rgb2hex(RGB);R2023b より前: RGB = get(groot,"FactoryAxesColorOrder") を使用して、RGB 3 成分を取得します。
R2024a より前: H = compose("#%02X%02X%02X",round(RGB*255)) を使用して、16 進数カラー コードを取得します。
対話機能
ツールヒント。文字ベクトル、文字ベクトルの cell 配列、string 配列、または 1 次元の categorical 配列として指定します。このプロパティを使用して、実行時にユーザーがポインターをコンポーネントに合わせるとメッセージが表示されるようにします。コンポーネントが無効になっている場合でも、ツールヒントは表示されます。複数行のテキストを表示するには、文字ベクトルの cell 配列または string 配列を指定します。配列の各要素は、テキストの各行になります。このプロパティを categorical 配列として指定した場合、MATLAB はカテゴリの完全なセットではなく、配列内の値を使用します。
コンテキスト メニュー。関数 uicontextmenu を使用して作成された ContextMenu オブジェクトとして指定します。このプロパティは、コンポーネントを右クリックしたときにコンテキスト メニューを表示するために使用します。
位置
アイコンとテキストの水平方向の配置。'center'、'left'、または 'right' として指定します。水平方向の配置は、ボタンの境界線の内側にある領域を基準とします。テキストがボタンの幅全体にわたる場合にこのプロパティを設定しても、UI 上の見た目に変化はありません。
アイコンとテキストの垂直方向の配置。'center'、'top'、または 'bottom' として指定します。垂直方向の配置は、ボタンの境界線の内側にある領域を基準とします。テキストの高さがボタンの高さ全体にわたる場合にこのプロパティを設定しても、UI ではあまり効果はありません。
ボタン アイコンの場所。次の表内の値のいずれかとして指定します。この表の例は、HorizontalAlignment 値を 'center' に指定したボタンの各 IconAlignment 値を指定した結果を示しています。
| 値 | 説明 | 例 |
|---|---|---|
'left' | アイコンは、ボタン テキストのすぐ左に表示されます。 |
|
'right' | アイコンは、ボタン テキストのすぐ右に表示されます。 |
|
'center' | アイコンは、ボタンの中央、テキストの背後に表示されます。 |
|
'leftmargin' | アイコンは、テキストの位置に関係なく、ボタンの左端に表示されます。 この値は、 |
|
'rightmargin' | アイコンは、テキストの位置に関係なく、ボタンの右端に表示されます。 この値は、 |
|
'top' | アイコンは、ボタン テキストのすぐ上に表示されます。 |
|
'bottom' | アイコンは、ボタン テキストのすぐ下に表示されます。 |
|
ボタンの Text プロパティが空の場合、アイコンの場所は、IconAlignment プロパティではなく、HorizontalAlignment プロパティと VerticalAlignment プロパティによって決まります。
レイアウト オプション。GridLayoutOptions オブジェクトとして指定します。このプロパティは、グリッド レイアウト コンテナーの子であるコンポーネントのオプションを指定します。コンポーネントがグリッド レイアウト コンテナーの子ではない場合 (たとえば、Figure またはパネルの子である場合) は、このプロパティは空で、効果はありません。しかし、コンポーネントがグリッド レイアウト コンテナーの子である場合は、GridLayoutOptions オブジェクトの Row プロパティおよび Column プロパティを設定して、グリッドの目的の行と列にコンポーネントを配置することができます。
たとえば、次のコードはボタンを親グリッドの 3 行目の 2 列目に配置します。
g = uigridlayout([4 3]); b = uibutton(g); b.Layout.Row = 3; b.Layout.Column = 2;
ボタンが複数の行または列にまたがるようにするには、Row または Column プロパティを 2 要素のベクトルとして指定します。たとえば、次のボタンは 2 列目から 3 列目にまたがります。
b.Layout.Column = [2 3];
コールバック
コールバック実行制御
親/子
親コンテナー。Figure オブジェクトまたはその子コンテナー (Tab、Panel、ButtonGroup、GridLayout) のいずれかとして指定します。コンテナーが指定されていない場合、MATLAB は関数 uifigure を呼び出し、親コンテナーとして使用される新しい Figure オブジェクトを作成します。
識別子
この プロパティ は読み取り専用です。
グラフィックス オブジェクトのタイプ。'uibutton' として返されます。
オブジェクト関数
focus | UI コンポーネントにフォーカスを移動 |
例
アプリ ユーザーがボタンを押したときにデータをプロットするアプリを作成します。
plotApp.m という名前のファイルで、アプリを実装する関数を作成します。
UI Figure およびグリッド レイアウト マネージャーを作成してアプリをレイアウトします。
グリッド レイアウト マネージャーで UI 座標軸とボタンを作成します。
UI 座標軸にデータをプロットする
plotButtonPushedという名前のコールバック関数を作成し、その関数をButtonPushedFcnコールバック プロパティに割り当てます。コールバックの詳細については、プログラムで作成したアプリ用のコールバックの作成を参照してください。
function plotApp fig = uifigure; g = uigridlayout(fig,[2 3]); g.RowHeight = {'1x','fit'}; g.ColumnWidth = {'1x','fit','1x'}; ax = uiaxes(g); ax.Layout.Row = 1; ax.Layout.Column = [1 3]; b = uibutton(g, ... "Text","Plot Data", ... "ButtonPushedFcn", @(src,event) plotButtonPushed(ax)); b.Layout.Row = 2; b.Layout.Column = 2; end function plotButtonPushed(ax) x = linspace(0,2*pi,100); y = sin(x); plot(ax,x,y) end
関数 plotApp を実行します。ボタンをクリックしてデータをプロットします。
