Main Content

最新のリリースでは、このページがまだ翻訳されていません。 このページの最新版は英語でご覧になれます。

uihtml

HTML UI コンポーネントの作成

説明

h = uihtml は、HTML UI コンポーネントを新しい Figure 内に作成し、HTML UI コンポーネント オブジェクトを返します。MATLAB® は関数 uifigure を呼び出して新しい Figure を作成します。

関数 uihtml を使用すると、HTML、JavaScript®、または CSS のコンテンツをアプリに組み込み、サードパーティ ライブラリと連動して、ウィジェット、データ可視化などのコンテンツを表示できます。すべてのサポート ファイル (HTML、JavaScript、CSS、イメージなど) は、ローカル ファイル システムがアクセスできる場所に保存しなければなりません。

h = uihtml(parent) は、指定された親コンテナー内に HTML UI コンポーネントを作成します。親には、関数 uifigure を使用して作成された Figure オブジェクト、またはそのいずれかの子コンテナーを指定できます。

h = uihtml(___,Name,Value) は、1 つ以上の名前と値のペアの引数を使用して、HTML UI コンポーネントのプロパティを指定します。たとえば、'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 ファイルを作成します。

まず、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 ファイルと同じディレクトリにあります。

<!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.mp4" type="video/mp4">
			<source src="./xylophone_video.oga" type="video/ogg">
			Your browser does not support the video tag.
		</video>
		
	</body>
</html>

次に、HTMLSource プロパティを HTML ファイルへの絶対パスに設定して、HTML ファイルをアプリに組み込みます。

h.HTMLSource = fullfile(pwd,'audio_videoplayers.html');

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!";

ボタンがクリックされたときに乱数を生成する 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" イベントをリッスンし、リスナー コールバック関数を作成します。クリック イベントが発生すると、リスナー コールバック関数は、htmlComponent JavaScript オブジェクトの 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);

入力引数

すべて折りたたむ

親コンテナー。関数 uifigure を使用して作成された Figure オブジェクト、またはその子コンテナー (TabPanelButtonGroup または GridLayout) のいずれかとして指定します。親コンテナーを指定しない場合、MATLAB は関数 uifigure を呼び出し、親コンテナーとして機能する新しい Figure オブジェクトを作成します。

名前と値のペアの引数

オプションの Name,Value の引数ペアをコンマ区切りで指定します。Name は引数名で、Value は対応する値です。Name は引用符で囲まなければなりません。Name1,Value1,...,NameN,ValueN のように、複数の名前と値のペアの引数を任意の順序で指定できます。

例: h = uihtml(uifigure,'HTMLSource','C:\Work\expenses.html');

メモ

ここでは、プロパティの一部だけを紹介しています。完全な一覧については、HTML のプロパティ を参照してください。

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 ファイルへのパスに設定します。サポート ファイルは、HTML ファイルと同じ階層または上の階層にある相対ディレクトリに配置できません。

例: h = uihtml('HTMLSource','CustomCharts.html') は、HTML ファイルを指定します。

例: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>') は、マークアップを指定します。

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 ファイルの作成を参照してください。

データが変化したときのコールバック。次の値のいずれかとして指定します。

  • 関数ハンドル。

  • 最初の要素が関数ハンドルである 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 でコールバックを記述するを参照してください。

親コンテナーを基準とした HTML UI コンポーネントの位置とサイズ。[left bottom width height] の形式の 4 要素ベクトルとして指定します。次の表で、ベクトルの各要素について説明します。

要素説明
left親コンテナーの内側左端から HTML UI コンポーネントの外側左端までの距離
bottom親コンテナーの内側下端から HTML UI コンポーネントの外側下端までの距離
widthHTML UI コンポーネントの外側の左端から右端までの距離
heightHTML UI コンポーネントの外側の上端から下端までの距離

Position の値の基準は、親コンテナーの "描画可能領域" です。描画可能領域は、コンテナーの境界線の内側にある領域で、メニュー バーやタイトルなどの装飾が占める領域は含まれません。

すべての測定単位はピクセルです。

制限

  • 関数 uihtml を使用して、URL の Web のリソースにリンクしたり、外部 Web ページからのアプリケーションを組み込んだりすることはできません。

  • HTMLSource プロパティに指定する HTML ファイルは、Content Delivery Network (CDN) を使用してサードパーティの JavaScript ライブラリにアクセスすることができません。ライブラリは、ローカル ファイル システムがアクセスできる場所に保存してください。

  • JavaScript 、CSS などの一般的な Web ファイル タイプは、HTMLSource プロパティに指定した HTML ファイルから参照できますが、他の Web ファイル タイプはサポートされていない可能性があります。

  • コンテンツは HTML UI コンポーネントの範囲をオーバーフローすることができません。ポップアップ ウィジェットなどの動的なコンテンツを作成している場合は、HTML UI コンポーネントのサイズを、ポップアップが開いた状態でウィジェットを表示できる十分な大きさにします。

  • MATLAB デスクトップでは、Web プラグインなど特定の HTML 機能と、Web カメラまたはマイクへのアクセスはサポートされません。

  • HTMLSource プロパティを、ファイル名の末尾にクエリ パラメーターが付加された HTML ファイルに設定することはできません。回避方法としては、これらのパラメーターを htmlComponent.Data で設定してください。

  • matlab: 演算をもつハイパーリンクはサポートされません。

詳細

すべて折りたたむ

潜在的なセキュリティ リスク

メモ

このリストは、すべてを網羅することを目的としていません。サードパーティ ライブラリと連動するときのさらなるリスクやセキュリティ上の検討事項については、外部リソースを参照してください。

サードパーティの JavaScript ライブラリと連動するアプリケーションは、"データ インジェクション" 攻撃または "コード インジェクション" 攻撃を受けるおそれがあります。

  • 関数 eval などの MATLAB 機能は、インジェクション攻撃のリスクを増加させる可能性があります。対応策として、信頼されていない入力は、検証してから MATLAB で使用してください。

  • コード的な入力 (XML、JSON、SQL など) を処理するあらゆる MATLAB 関数は、コード インジェクションに対して潜在的に脆弱です。

  • MATLAB 関数 systemdos または unix を使用してオペレーティング システムにアクセスするアプリケーションは、コード インジェクションに対して脆弱な可能性があります。

配布する Web アプリへの潜在的なリスクを低減する方法の詳細については、Authoring Secure Web Apps (MATLAB Compiler)を参照してください。

ヒント

  • アプリに組み込む 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 で導入