このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。
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
内にイベント リスナーを追加します。イベント リスナーは、htmlComponent
JavaScript オブジェクト上で"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);
入力引数
parent
— 親コンテナー
Figure
オブジェクト (既定値) | Tab
オブジェクト | Panel
オブジェクト | ButtonGroup
オブジェクト | GridLayout
オブジェクト
親コンテナー。関数 uifigure
を使用して作成された Figure
オブジェクト、またはその子コンテナー (Tab
、Panel
、ButtonGroup
または GridLayout
) のいずれかとして指定します。親コンテナーを指定しない場合、MATLAB は関数 uifigure
を呼び出し、親コンテナーとして機能する新しい Figure
オブジェクトを作成します。
名前と値の引数
引数のオプションのペアを Name1=Value1,...,NameN=ValueN
として指定します。ここで Name
は引数名で、Value
は対応する値です。名前と値の引数は他の引数の後になければなりませんが、ペアの順序は重要ではありません。
例: h = uihtml(uifigure,HTMLSource="C:\Work\expenses.html");
R2021a より前では、コンマを使用してそれぞれの名前と値を区切り、Name
を引用符で囲みます。
例: h = uihtml(uifigure,"HTMLSource","C:\Work\expenses.html");
メモ
ここでは、プロパティの一部だけを紹介しています。完全な一覧については、HTML のプロパティ を参照してください。
HTMLSource
— HTML マークアップまたは HTML ファイル
''
(既定値) | 文字ベクトル | string スカラー
HTML マークアップまたは HTML ファイル。HTML マークアップまたは HTML ファイルへのパスのいずれかを含む文字ベクトルまたは string スカラーとして指定します。HTML マークアップおよび HTML ファイルはすべて、適切な形式でなければなりません。指定された文字ベクトルまたは string スカラーが .html
で終わる場合、HTML ファイルへのパスと見なされます。
HTML マークアップを組み込む場合、<html>
タグまたは <body>
タグを指定する必要はありません。指定したマークアップが、関数 uifigure
で作成された MATLAB Figure により使用される Chromium ブラウザーでサポートされている場合、そのマークアップがレンダリングされます。コードに多くの構造が必要な場合は、代わりに HTML ファイルを使用することを検討してください。
HTMLSource
プロパティを HTML ファイルへのパスに設定する場合、HTML ファイルはローカル ファイル システムがアクセスできる場所に配置しなければなりません。JavaScript、CSS、ライブラリ、イメージなどのサポート ファイルを使用している場合は、ローカル ファイル システムがアクセスできる場所にファイルを配置し、HTML ファイル内でそれらを参照して、HTMLSource
プロパティを HTML ファイルへのパスに設定します。コンポーネント コードが使用するサポート ファイルは、HTMLSource
プロパティに指定した HTML ファイルを含むフォルダー、またはそのフォルダーのサブフォルダーになければなりません。詳細については、制限を参照してください。
例: h = uihtml('HTMLSource','CustomCharts.html')
は、HTML ファイルを指定します。
例: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>')
は、マークアップを指定します。
Data
— MATLAB データ
任意の MATLAB データ型
MATLAB データ。任意の MATLAB データ型として指定します。この引数は、HTMLSource
の値が JavaScript オブジェクトを定義する HTML ファイルへのパスである場合に使用します。次に、このデータを MATLAB HTML UI コンポーネントと JavaScript オブジェクトの間で同期できます。
MATLAB と、アプリに組み込んでいるサードパーティ製コンテンツの間で Data
プロパティ値を同期するには、htmlComponent
という JavaScript オブジェクトを MATLAB の HTML UI コンポーネントに接続する関数 setup
を HTML ファイル内に作成します。次に、HTMLSource
プロパティ値をファイルへのパスに設定します。
Data
プロパティ値を変更すると、一方向にのみコールバック イベントがトリガーされます。特に、
Data
プロパティが MATLAB で設定されると、htmlComponent
JavaScript オブジェクトのData
プロパティも更新され、'DataChanged'
イベントの JavaScript のイベント リスナーをトリガーします。htmlComponent.Data
が JavaScript で設定されると、MATLAB の HTML UI コンポーネントのData
プロパティも更新され、DataChangedFcn
コールバックをトリガーします。
入れ子の cell 配列、構造体の配列、MATLAB table 配列データなどのデータがある場合、MATLAB と JavaScript の間でデータがどのように変換されるかに関する情報が必要になることがあります。HTML UI コンポーネントの Data
プロパティが MATLAB で設定されると、データは関数 jsonencode
を使用して変換され、JavaScript と同期され、JSON.parse() を使用して解析されてから、最後に htmlComponent
JavaScript オブジェクトの Data
プロパティに設定されます。変換は、JSON.stringify() および関数 jsondecode
により、逆方向にも起こります。Data
プロパティは、JavaScript と同期される唯一のプロパティです。
サポートするデータ型の詳細については、関数 jsonencode
を参照してください。使用しているデータ型を関数 jsonencode
がサポートしていない場合は、num2str
などのデータ型変換関数を使用して、サポートされている型にデータを変換します。次に、それを Data
プロパティ値として設定します。
データ同期を可能にする HTML ファイルの作成方法と、htmlComponent
JavaScript オブジェクトのプロパティの詳細については、アプリ内の HTML コンテンツの作成を参照してください。
DataChangedFcn
— データが変化したときのコールバック
''
(既定値) | 関数ハンドル | cell 配列 | 文字ベクトル
データが変化したときのコールバック。次の値のいずれかとして指定します。
関数ハンドル。
最初の要素が関数ハンドルである cell 配列。cell 配列内のその後の要素はコールバック関数に渡される引数です。
有効な MATLAB 式を含む文字ベクトル (非推奨)。MATLAB は、この式をベース ワークスペースで評価します。
htmlComponent
JavaScript オブジェクトの Data
プロパティ値が変化すると、MATLAB の HTML UI コンポーネントの Data
プロパティが更新され、このコールバックが実行されます。
このコールバック関数は JavaScript オブジェクト内のデータの変化に関する特定の情報にアクセスできます。MATLAB は、コールバック関数の 2 番目の引数として DataChangedData
オブジェクト内にこの情報を渡します。App Designer では、引数は event
と呼ばれます。ドット表記を使用して、DataChangedData
オブジェクトのプロパティをクエリできます。たとえば、event.PreviousData
は、Data
の最終更新または最終変更が行われる前の値を返します。DataChangedData
オブジェクトは、文字ベクトルとして指定されているコールバック関数では使用できません。
次の表に、DataChangedData
オブジェクトのプロパティを示します。
プロパティ | 説明 |
---|---|
Data | 直前の DataChanged イベントの結果として得られた最新のデータ |
PreviousData | 直前の DataChanged イベントの前のデータ |
Source | コールバックを実行する MATLAB の HTML UI コンポーネント |
EventName | 'DataChanged' |
コールバックの記述の詳細については、App Designer のコールバックを参照してください。
HTMLEventReceivedFcn
— HTML ソースからイベントを受信したときのコールバック
''
(既定値) | 関数ハンドル | cell 配列 | string スカラー | 文字ベクトル
R2023a 以降
HTML ソースからイベントを受信したときのコールバック。次の値のいずれかとして指定します。
関数ハンドル。
最初の要素が関数ハンドルである cell 配列。cell 配列内のその後の要素はコールバック関数に渡される引数です。
有効な MATLAB 式を含む string スカラーまたは文字ベクトル (非推奨)。MATLAB は、この式をベース ワークスペースで評価します。
このコールバックは、JavaScript の htmlComponent
オブジェクトで関数 sendEventToMATLAB
を呼び出して JavaScript から MATLAB にイベントが送信されると実行されます。このコールバックを使用して、ボタン HTML 要素のクリックなど、ユーザー操作や HTML コンポーネントの変化に応答する MATLAB コードを記述します。詳細については、アプリ内の HTML コンテンツの作成を参照してください。
このコールバック関数は、JavaScript オブジェクトから送信されたイベントに関する特定の情報にアクセスできます。MATLAB は、その情報を HTMLEventReceivedData
オブジェクトに格納して、2 番目の引数としてコールバック関数に渡します。App Designer では、引数は event
と呼ばれます。ドット表記を使用して、HTMLEventReceivedData
オブジェクトのプロパティをクエリします。たとえば、event.HTMLEventName
は、JavaScript オブジェクトで指定されたイベントの名前を返します。HTMLEventReceivedData
オブジェクトは、string スカラーまたは文字ベクトルとして指定されているコールバック関数では使用できません。
次の表に、HTMLEventReceivedData
オブジェクトのプロパティを示します。
プロパティ | 説明 |
---|---|
HTMLEventName | JavaScript コードで呼び出される関数 sendEventToMATLAB によって指定されたイベントの名前 |
HTMLEventData | JavaScript コードで呼び出される関数 sendEventToMATLAB によって指定されたイベント データ |
Source | コールバックを実行する MATLAB の HTML UI コンポーネント |
EventName | 'HTMLEventReceived' |
コールバックの記述の詳細については、プログラムで作成したアプリ用のコールバックの作成を参照してください。
Position
— HTML UI コンポーネントの位置とサイズ
[100 100 100 100]
(既定値) | [left bottom width height]
親コンテナーを基準とした HTML UI コンポーネントの位置とサイズ。[left bottom width height]
の形式の 4 要素ベクトルとして指定します。次の表で、ベクトルの各要素について説明します。
要素 | 説明 |
---|---|
left | 親コンテナーの内側左端から HTML UI コンポーネントの外側左端までの距離 |
bottom | 親コンテナーの内側下端から HTML UI コンポーネントの外側下端までの距離 |
width | HTML UI コンポーネントの外側の左端から右端までの距離 |
height | HTML UI コンポーネントの外側の上端から下端までの距離 |
Position
の値の基準は、親コンテナーの "描画可能領域" です。描画可能領域は、コンテナーの境界線の内側にある領域で、メニュー バーやタイトルなどの装飾が占める領域は含まれません。
すべての測定単位はピクセルです。
制限
関数
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 コンポーネントにフォーカスがある場合には実行されません。
詳細
潜在的なセキュリティ リスク
メモ
このリストは、すべてを網羅することを目的としていません。サードパーティ ライブラリと連動するときのさらなるリスクやセキュリティ上の検討事項については、外部リソースを参照してください。
サードパーティの JavaScript ライブラリと連動するアプリケーションは、"データ インジェクション" 攻撃または "コード インジェクション" 攻撃を受けるおそれがあります。
関数
eval
などの MATLAB 機能は、インジェクション攻撃のリスクを増加させる可能性があります。対応策として、信頼されていない入力は、検証してから MATLAB で使用してください。コード的な入力 (XML、JSON、SQL など) を処理するあらゆる MATLAB 関数は、コード インジェクションに対して潜在的に脆弱です。
MATLAB 関数
system
、dos
またはunix
を使用してオペレーティング システムにアクセスするアプリケーションは、コード インジェクションに対して脆弱な可能性があります。
展開する Web アプリへの潜在的なリスクを低減する方法の詳細については、安全な Web アプリの作成 (MATLAB Compiler)を参照してください。
ヒント
アプリに組み込む 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 で導入R2023a: MATLAB と JavaScript の間でのイベントの送信
特定のアクションが発生したときに MATLAB と JavaScript の間で通信するには、HTML UI コンポーネントに関連付けられたイベントを送信します。
MATLAB では、関数 sendEventToHTMLSource
を使用して JavaScript にイベントを送信します。JavaScript からのイベントには、HTMLEventReceivedFcn
プロパティを使用して応答します。
HTML ソース ファイルでは、関数 setup
で JavaScript の関数 sendEventToMATLAB
を使用して MATLAB にイベントを送信します。MATLAB からのイベントには、JavaScript の関数 addEventListener
を使用して応答します。
HTML UI コンポーネントのイベントの詳細については、アプリ内の HTML コンテンツの作成を参照してください。
参考
関数
プロパティ
MATLAB コマンド
次の MATLAB コマンドに対応するリンクがクリックされました。
コマンドを MATLAB コマンド ウィンドウに入力して実行してください。Web ブラウザーは MATLAB コマンドをサポートしていません。
Select a Web Site
Choose a web site to get translated content where available and see local events and offers. Based on your location, we recommend that you select: .
You can also select a web site from the following list:
How to Get Best Site Performance
Select the China site (in Chinese or English) for best site performance. Other MathWorks country sites are not optimized for visits from your location.
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)