このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。
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)'HTMLSource','timepicker.html' は、HTML ソースを指定の HTML ファイルに設定します。
例
書式設定されたテキストの表示
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 ファイルと同じディレクトリにあります。
すべてのコンテキストが同じファイル タイプをサポートしているわけではないため、各要素に複数のファイル ソースを指定することをお勧めします。たとえばビデオ要素には、アプリが再生を試みる最初のビデオとして 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 の応答のコーディング
ボタンがクリックされたときに乱数を生成する htmlComponent JavaScript® オブジェクトを作成し、その乱数を MATLAB® で表示します。
まず、空の HTML UI コンポーネントを作成し、Figure 内に配置します。
fig = uifigure; fig.Position = [500 500 490 180]; h = uihtml(fig); h.Position = [20 20 450 130];
次に、generateJSRandomNumber.html という HTML ファイルを作成します。ファイルで次を行います。
styleタグを使用して、ボタン要素の内部 CSS スタイルを定義します。<script>タグ内に関数setupを記述して、JavaScript オブジェクト (htmlComponentと呼ばれる) を、MATLAB で作成した HTML UI コンポーネントに接続します。関数
setup内にイベント リスナーを追加します。イベント リスナーは、ボタン上で"click"イベントをリッスンし、リスナー コールバック関数を作成します。クリック イベントが発生すると、リスナー コールバック関数は、htmlComponentJavaScript オブジェクトのDataプロパティを、1から100までのランダムに生成された整数に設定します。
<!DOCTYPE html>
<html>
<head>
<style>
button {
width: 100%;
font-family: sans-serif;
background-color: #4CAF50;
color: white;
font-size: 1rem;
text-shadow: 1px 1px 1px #000;
padding: 5px 20px;
margin: 8px 0;
border: none;
border-radius: 10px;
line-height: 2.5;
cursor: pointer;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: #45a049;
}
button:focus {
outline: 0;
}
button:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
</style>
<script type="text/javascript">
function setup(htmlComponent) {
document.getElementById("generateRandomNumber").addEventListener("click", function(event) {
htmlComponent.Data = Math.floor(Math.random() * 100) + 1;
});
}
</script>
</head>
<body>
<button id="generateRandomNumber">Generate Random Number</button><br/>
</body>
</html>
次に、MATLAB で、HTMLSource プロパティの値を HTML ファイルのパスに設定します。JavaScript コードで生成された乱数を表示するコールバック関数 DataChangedFcn を作成します。[Generate Random Number] ボタンをクリックして、MATLAB コマンド ウィンドウに表示される Data プロパティの値を確認します。
h.HTMLSource = fullfile(pwd,'generateJSRandomNumber.html');
h.DataChangedFcn = @(src,event)disp(h.Data);
入力引数
制限
関数
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 プラグインなど特定の HTML 機能と、Web カメラまたはマイクへのアクセスはサポートされません。
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;関数
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)