uihtml
説明
h = uihtml は、HTML UI コンポーネントを新しい Figure 内に作成し、HTML UI コンポーネント オブジェクトを返します。MATLAB® は関数 uifigure を呼び出して新しい Figure を作成します。
関数 uihtml を使用すると、HTML、JavaScript®、または CSS のコンテンツをアプリに組み込み、サードパーティ ライブラリと連動して、ウィジェット、データ可視化などのコンテンツを表示できます。すべてのサポート ファイル (HTML、JavaScript、CSS、イメージなど) は、ローカル ファイル システムがアクセスできる場所に保存しなければなりません。
h = uihtml( は、指定された親コンテナー内に HTML UI コンポーネントを作成します。親には、関数 parent)uifigure を使用して作成された Figure オブジェクト、またはそのいずれかの子コンテナーを指定できます。
h = uihtml(___, は、1 つ以上の名前と値の引数を使用して、HTML UI コンポーネントのプロパティを指定します。たとえば、Name,Value)uihtml("Position",[230 60 40 150]) は、指定された位置とサイズの HTML UI コンポーネントを作成します。このオプションは、前述の構文のすべての入力引数の組み合わせで使用できます。
例
書式設定されたテキストの表示
HTML コンポーネントを作成し、その中の書式設定されたテキストを HTML マークアップを使用して表示します。
fig = uifigure('Position',[561 497 333 239]); h = uihtml(fig); h.HTMLSource = '<p style="font-family:arial;"><b><span style="color:red;">Hello</span> <u>World</u>!</b></p>';
HTML ファイルを使用したオーディオおよびビデオの組み込み
アプリにオーディオ要素およびビデオ要素を組み込み、メディア ソース ファイルを参照する HTML ファイルを作成します。
まず、Figure に空の HTML UI コンポーネントを作成します。
fig = uifigure; fig.Position = [500 500 380 445]; h = uihtml(fig); h.Position = [10 10 360 420];
次に、audio_videoplayers.html という HTML ファイルを作成します。ファイルにオーディオ要素およびビデオ要素を追加し、そのファイル ソースを、HTML ファイルのパスとの相対パスで指定します。この例のメディア ファイルは HTML ファイルと同じディレクトリにあります。
すべてのコンテキストが同じファイル タイプをサポートしているわけではないため、各要素に複数のファイル ソースを指定することをお勧めします。たとえば、MP4 ビデオは MATLAB デスクトップでは HTML コンポーネントでサポートされませんが、MATLAB Online™ ではサポートされます。ビデオ要素には、アプリが再生を試みる最初のビデオとして OGA ファイルを指定します。次に、最初のファイルがサポートされていない場合の予備として、MP4 ファイルを指定します。
<!DOCTYPE html>
<html>
<body style="background-color:white;font-family:arial;">
<p style="padding-left:20px">
Play audio file:
</p>
<audio controls style="padding-left:20px">
<source src="./handel_audio.wav" type="audio/wav">
<source src="./handel_audio.oga" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
<p style="padding-left:20px">
Play video file:
</p>
<video width="320" height="240" controls style="padding-left:20px">
<source src="./xylophone_video.oga" type="video/ogg">
<source src="./xylophone_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
次に、HTMLSource プロパティを HTML ファイルへの絶対パスに設定して、HTML ファイルをアプリに組み込みます。
h.HTMLSource = fullfile(pwd,'audio_videoplayers.html');
MATLAB でのデータ変化に対する JavaScript の応答のコーディング
MATLAB® の HTML UI コンポーネントに設定されたデータを表示する htmlComponent JavaScript® オブジェクトを作成します。
まず、空の HTML UI コンポーネントを作成し、Figure 内に配置します。
fig = uifigure; fig.Position = [500 500 490 180]; h = uihtml(fig); h.Position = [20 20 450 130];
次に、displayDataFromMATLAB.html という HTML ファイルを作成します。ファイルで次を行います。
styleタグを使用して、テキストを表示する<div>要素の内部 CSS スタイルを定義します。<script>タグ内に関数setupを記述して、JavaScript オブジェクト (htmlComponentと呼ばれる) を、MATLAB で作成した HTML UI コンポーネントに接続します。関数
setup内にイベント リスナーを追加します。イベント リスナーは、htmlComponentJavaScript オブジェクト上で"DataChanged"イベントをリッスンし、リスナー コールバック関数を作成します。"DataChanged"イベントが発生すると、リスナー コールバック関数は、MATLAB のDataプロパティに設定された値を使用して、"dataDisplay"<div> elementを更新します。
<!DOCTYPE html>
<html>
<head>
<style>
#prompt {
font-family: sans-serif;
text-align:center;
border-radius: 5px;
background-color: lightblue;
padding: 20px;
}
#dataDisplay {
border-radius: 5px;
height: 10vh;
padding: 12px 20px;
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
htmlComponent.addEventListener("DataChanged", function(event) {
document.getElementById("dataDisplay").innerHTML = htmlComponent.Data;
});
}
</script>
</head>
<body>
<div id="prompt">
<span><label for="prompt"><strong>Data from MATLAB will display here:</strong></label></span>
<br/><br/>
<div id ="dataDisplay">
Please set data in MATLAB...
</div>
</div>
</body>
</html>
次に、MATLAB で、HTMLSource プロパティの値を HTML ファイルのパスに設定します。
h.HTMLSource = fullfile(pwd,'displayDataFromMATLAB.html');
HTML UI コンポーネントの Data プロパティの値を設定します。htmlComponent JavaScript オブジェクトが HTML UI コンポーネント内でどのように更新されるかがわかります。
h.Data = "Hello World!";
JavaScript でのデータ変化に対する MATLAB の応答のコーディング
ボタンと進行状況バーを表示する JavaScript htmlComponent オブジェクトを作成し、進行状況が変わるたびに現在の進行状況を MATLAB コマンド ウィンドウに表示します。
まず、空の HTML UI コンポーネントを作成し、Figure 内に配置します。
fig = uifigure("Position",[500 500 350 150]); h = uihtml(fig,"Position",[50 40 250 70]);
次に、progressBar.html という名前の HTML ファイルを作成します。ファイルで次を行います。
<style>タグを使用して、ボタンと進行状況バーの要素の内部 CSS スタイルを定義します。<script>タグ内に関数setupを記述して、MATLAB で作成した HTML UI コンポーネントにhtmlComponentという名前の JavaScript オブジェクトを接続します。関数
setup内にイベント リスナーを追加します。イベント リスナーは、ボタン上で"click"イベントをリッスンし、リスナー コールバック関数を作成します。ユーザーが [次へ] ボタンをクリックすると、リスナー コールバック関数は進行状況バーを更新し、htmlComponentのDataプロパティを新しい進行状況の値に設定します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
button {
width: 43px;
height: 20px;
}
progress {
width: 90%;
height: 20px;
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
let btn = document.getElementById("nextButton");
htmlComponent.Data = 0;
btn.addEventListener("click", function(event) {
let progress = htmlComponent.Data;
progress = Math.min(progress+25,100);
document.getElementById("progressBar").value = progress;
htmlComponent.Data = progress;
});
}
</script>
</head>
<body>
<button id="nextButton">Next</button>
<br>
<progress id="progressBar" value="0" max="100"></progress>
</body>
</html>MATLAB で、HTMLSource プロパティの値を HTML ファイルのパスに設定します。Data プロパティが変わるたびに更新された進行状況を表示するコールバック関数 DataChangedFcn を作成します。
h.HTMLSource = "progressBar.html";
h.DataChangedFcn = @(src,event)disp(event.Data);
[次へ] ボタンをクリックすると、進行状況バーが更新され、Data プロパティが変わります。MATLAB コマンド ウィンドウに進行状況が表示されます。
JavaScript から MATLAB へのイベントの送信
R2023a 以降
ユーザーがボタンをクリックしたときに乱数を生成する JavaScript htmlComponent オブジェクトを作成し、その乱数を MATLAB で表示します。
まず、myRandomNum.m という名前の新しいスクリプトを作成します。スクリプトで、空の HTML UI コンポーネントを作成し、Figure 内に配置します。
fig = uifigure("Position",[100 100 300 160]); h = uihtml(fig,"Position",[50 50 200 60]);
次に、generateJSRandomNumber.html という名前の HTML ファイルを作成します。ファイルで次を行います。
<style>タグを使用して、ボタン要素の内部 CSS スタイルを定義します。<script>タグ内に関数setupを記述して、MATLAB で作成した HTML UI コンポーネントにhtmlComponentという名前の JavaScript オブジェクトを接続します。関数
setup内にボタンの"click"イベントをリッスンするイベント リスナーを追加します。ユーザーがボタンをクリックしたら、まず乱数を生成し、さらに MATLAB にクリックを通知するイベントを送信します。その乱数に MATLAB でアクセスできるように、乱数をイベント データとして渡します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
text-align: center
}
button {
width: 100%;
height: 100%;
background-color: white;
color: black;
border: 3px solid blue;
font-size: 12px;
cursor: pointer;
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
let button = document.getElementById("Button");
button.addEventListener("click", function(event) {
let num = Math.floor(Math.random() * 100) + 1;
htmlComponent.sendEventToMATLAB("ButtonClicked",num);
});
}
</script>
</head>
<body>
<button id="Button">Generate Random Number</button>
</body>
</html>MATLAB の myRandomNum.m スクリプトで、HTMLSource プロパティの値を HTML ファイルのパスに設定します。生成された乱数をコマンド ウィンドウに表示するコールバック関数 HTMLEventReceivedFcn を作成します。
h.HTMLSource = "generateJSRandomNumber.html"; h.HTMLEventReceivedFcn = @displayNumber; function displayNumber(src,event) name = event.HTMLEventName; if strcmp(name,'ButtonClicked') number = event.HTMLEventData; disp(number); end end
スクリプトを実行してボタンをクリックすると、乱数が生成されて MATLAB コマンド ウィンドウに表示されます。
MATLAB から JavaScript へのイベントの送信
R2023a 以降
ユーザーが MATLAB ノブ コンポーネントを操作したときに HTML 要素のスタイルを更新する JavaScript htmlComponent オブジェクトを作成します。
まず、myTemperature.m という名前の新しいスクリプトを作成します。スクリプトで、ノブ UI コンポーネントと空の HTML UI コンポーネントを UI Figure 内に作成します。
fig = uifigure; k = uiknob(fig,"discrete", ... "Items",["Freezing","Cold","Warm","Hot"], ... "ItemsData",[0 1 2 3], ... "Value",0); h = uihtml(fig,"Position",[230 60 40 150]);
次に、thermometer.html という名前の HTML ファイルを作成します。ファイルで次を行います。
<style>タグを使用して、温度計の各部分の内部 CSS スタイルを定義します。<script>タグ内に関数setupを記述して、MATLAB で作成した HTML UI コンポーネントにhtmlComponentという名前の JavaScript オブジェクトを接続します。関数
setup内に MATLAB からの"TemperatureChanged"という名前のイベントをリッスンするイベント リスナーを追加します。温度の変更がhtmlComponentオブジェクトに通知されたら、イベント データをクエリして新しい温度を取得します。その後、新しい温度を反映するように温度計のスタイルを調整します。
<!DOCTYPE html>
<html>
<head>
<style>
.bulb {
width: 30px;
height: 30px;
border: 2px solid;
border-radius: 50%;
background-color: red;
}
.stem {
width: 10px;
height: 30px;
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
position: relative;
left: 10px;
top: 4px;
background-color: white;
}
.stem.hot {
background-color: red;
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
htmlComponent.addEventListener("TemperatureChanged", function(event) {
let stem1 = document.getElementById("Stem1");
let stem2 = document.getElementById("Stem2");
let stem3 = document.getElementById("Stem3");
(event.Data > 0) ? stem1.classList.add("hot") : stem1.classList.remove("hot");
(event.Data > 1) ? stem2.classList.add("hot") : stem2.classList.remove("hot");
(event.Data > 2) ? stem3.classList.add("hot") : stem3.classList.remove("hot");
});
}
</script>
</head>
<body>
<div id="Stem3" class="stem"></div>
<div id="Stem2" class="stem"></div>
<div id="Stem1" class="stem"></div>
<div id="Bulb" class="bulb"></div>
</body>
</html>MATLAB のスクリプトで、HTML ソースと通信するためのコードを記述します。
HTML UI コンポーネントの
HTMLSourceプロパティの値を HTML ファイルのパスに設定します。温度が変わったときに
"TemperatureChanged"という名前のイベントを HTML ソースに送信するノブのコールバック関数ValueChangedFcnを記述します。新しい温度の値をイベント データとして渡します。
h.HTMLSource = "thermometer.html"; k.ValueChangedFcn = @(src,event) handleKnobValueChanged(src,event,h); function handleKnobValueChanged(src,event,h) val = src.Value; sendEventToHTMLSource(h,"TemperatureChanged",val); end
スクリプトを実行してノブを操作すると、温度計が更新されます。
MATLAB と JavaScript での複数フィールドのデータの共有
複数のフィールドをもつデータを表示する HTML UI コンポーネントを作成します。
品目の名前、価格、および数量をリストする品目カード コンポーネントを作成します。MATLAB で品目のデータを struct として取り込む HTML UI コンポーネントを設計します。最初に、関数 jsonencode を使用して、MATLAB から JavaScript に struct データを送信したときにデータがどのようにエンコードされるかを確認します。
matlabData = struct("ItemName","Apple","Price",2,"Quantity",10); jsonencode(matlabData)
ans =
'{"ItemName":"Apple","Price":2,"Quantity":10}'
MATLAB と JavaScript の間での HTML コンポーネントによるデータの転送方法の詳細については、アプリ内の HTML コンテンツの作成を参照してください。
次に、品目カード HTML コンポーネントを作成してそのスタイルを設定する itemCard.html という名前の HTML ソース ファイルを作成します。ファイルで次を行います。
<style>タグを使用して、品目カードの内部 CSS スタイルを定義します。<script>タグ内に関数setupを記述して、MATLAB HTML UI コンポーネント オブジェクトのDataプロパティが変わったときにそれを検出し、JavaScripthtmlComponentオブジェクトのDataプロパティにアクセスします。データは複数のプロパティをもつ JavaScript オブジェクトとしてエンコードされます。それらのプロパティにアクセスして、HTML コンポーネントのコンテンツを更新します。<body>タグを使用して、メイン HTML ドキュメントのコンテンツを作成します。
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 2px solid;
border-spacing: 0;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
th {
background-color: #097A7A;
color: black;
font-size: 24px;
height: 40%;
}
tr {
background-color: #98D6D6;
color: gray;
height: 30%;
}
td {
padding: 5px;
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
htmlComponent.addEventListener("DataChanged", function(event) {
let table = document.getElementById("itemCard");
table.rows[0].cells[0].innerHTML = htmlComponent.Data.ItemName;
table.rows[1].cells[1].innerHTML = htmlComponent.Data.Price;
table.rows[2].cells[1].innerHTML = htmlComponent.Data.Quantity;
});
}
</script>
</head>
<body>
<div>
<table id="itemCard">
<tr>
<th colspan="2">Item</th>
</tr>
<tr>
<td>Price:</td>
<td></td>
</tr>
<tr>
<td>Quantity:</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
UI Figure 内に HTML コンポーネントを作成します。HTML ソースとして itemCard.html、コンポーネント データとして品目データの struct を指定します。
itemData = struct("ItemName","Apple","Price",2,"Quantity",10); fig = uifigure; c = uihtml(fig,"HTMLSource","itemCard.html","Data",itemData);
入力引数
制限
関数
uihtmlを使用して、URL の Web のリソースにリンクしたり、外部 Web ページからのアプリケーションを組み込んだりすることはできません。HTMLSourceプロパティに指定する HTML ファイルは、Content Delivery Network (CDN) を使用してサードパーティの JavaScript ライブラリにアクセスすることができません。ライブラリは、ローカル ファイル システムがアクセスできる場所に保存してください。JavaScript 、CSS などの一般的な Web ファイル タイプは、
HTMLSourceプロパティに指定した HTML ファイルから参照できますが、他の Web ファイル タイプはサポートされていない可能性があります。コンポーネント コードが使用するサポート ファイルは、
HTMLSourceプロパティに指定した HTML ファイルを含むフォルダー、またはそのフォルダーのサブフォルダーになければなりません。コンテンツは HTML UI コンポーネントの範囲をオーバーフローすることができません。ポップアップ ウィジェットなどの動的なコンテンツを作成している場合は、HTML UI コンポーネントのサイズを、ポップアップが開いた状態でウィジェットを表示できる十分な大きさにします。
MATLAB デスクトップでは、Web プラグインや Web カメラまたはマイクへのアクセスなど、特定の HTML 機能はサポートされません。
HTMLSourceプロパティを、ファイル名の末尾にクエリ パラメーターが付加された HTML ファイルに設定することはできません。回避方法としては、これらのパラメーターをhtmlComponent.Dataで設定してください。matlab:演算をもつハイパーリンクはサポートされません。WindowButtonDownFcnやWindowKeyPressFcnなどの UI Figure コールバックは、Figure 内の HTML UI コンポーネントにフォーカスがある場合には実行されません。
詳細
ヒント
アプリに組み込む HTML ファイルを作成する場合、まずブラウザーで静的な HTML が適切にレンダリングされることを確認します。詳細については、アプリ内の HTML コンテンツの作成を参照してください。
HTMLSourceプロパティ値を更新する場合、次の回避方法を使用して、HTMLSourceの元の値を変数に保存し、HTMLSourceを空の値にリセットし、Figure を更新して内容をクリアし、最後にHTMLSourceを元の値に再び設定します。oldValue = h.HTMLSource; h.HTMLSource = ''; drawnow h.HTMLSource = oldValue;イメージやビデオなどのサポート ファイルのコンテンツを
uihtmlを使用して表示するには、ローカル ファイル システムがアクセスできる場所にファイルを配置し、それをローカル コンテンツを含む HTML ファイル内で参照して、HTMLSourceプロパティを HTML ファイルに設定します。関数
uifigureを使用して作成された MATLAB Figure は、Chromium ブラウザーを使用し、HTML5 を実行します。Chromium の新しいバージョンは頻繁にリリースされ、またオペレーティング システム間で異なる場合があります。サポートされている機能については、Chromium に関する外部リソースを参照してください。アプリを共有したり、さまざまな環境で使用したりする計画がある場合は、この要因を検討してください。さまざまなデスクトップ ブラウザーおよび Web ブラウザーでサポートされている機能のタイプについては、https://caniuse.com/などの外部リソースを参照してください。
MathWorks® では、いかなるサードパーティ ライブラリも奨励していません。
バージョン履歴
R2019b で導入参考
関数
プロパティ
You can also select a web site from the following list:
Americas
- América Latina (Español)
- Canada (English)
- United States (English)
Europe
- Belgium (English)
- Denmark (English)
- Deutschland (Deutsch)
- España (Español)
- Finland (English)
- France (Français)
- Ireland (English)
- Italia (Italiano)
- Luxembourg (English)
- Netherlands (English)
- Norway (English)
- Österreich (Deutsch)
- Portugal (English)
- Sweden (English)
- Switzerland
- United Kingdom (English)