データの変更をトリガーできる、またはデータの変更に応答できる HTML ファイルの作成

HTML、JavaScript^®、または CSS のコンテンツを HTML ファイルから表示する HTML UI コンポーネントを内部に作成することで、サードパーティの可視化やウィジェットをアプリに含めることができます。HTML UI コンポーネントをアプリに追加するとき、コンポーネントがデータを設定できるようにする、あるいは MATLAB^® と JavaScript 間のデータ変更に対して応答できるようにするには、HTML ファイルに setup 関数を含めます。setup 関数内で、HTML コンテンツを MATLAB の HTML UI コンポーネントに接続することができます。

setup 関数を HTML ファイルに含める

アプリ内の MATLAB HTML UI コンポーネントを HTML ファイルのコンテンツに接続するために、ローカルの htmlComponent JavaScript オブジェクトを定義し初期化する setup 関数を作成します。MATLAB の HTML UI コンポーネントと htmlComponent JavaScript オブジェクトには、互いに同期する Data プロパティがあります。MATLAB または JavaScript からデータを設定し、どちらか一方で発生するデータの変更にもう一方で応答するには、setup 関数が必要です。

setup 関数は、以下のいずれかのイベントが発生したときに呼び出されます。

HTML UI コンポーネントが Figure 内で作成され、コンテンツが完全に読み込まれたとき。
HTMLSource プロパティが新しい値に変わったとき。

setup 関数が呼び出されるのは、それが定義されている場合のみです。htmlComponent JavaScript オブジェクトは setup 関数内からのみアクセスできます。

htmlComponent JavaScript オブジェクトには、addEventListener プロパティと removeEventListener プロパティもあります。これらのプロパティを使用して、MATLAB から DataChanged イベントのリスニングを行います。DataChanged イベントからのイベントデータは、ソースの htmlComponent JavaScript オブジェクトに新旧のデータを提供します。addEventListener メソッドと removeEventListener メソッドの詳細については、Mozilla^® MDN Web ドキュメントの EventTarget.addEventListener() および EventTarget.removeEventListener() を参照してください。

サンプル HTML ファイル

ライブスクリプトを開く

この例では、MATLAB と JavaScript が互いのデータ変更に対する応答を可能にするために必要な setup 関数をもつ、HTML ファイルを説明します。

setup 関数内で、htmlComponent JavaScript オブジェクトがいったん初期化されたら、コンポーネントの動作を定義します。以下に例を示します。

Data プロパティの初期値を MATLAB の HTML UI コンポーネントから取得する。
DOM 要素または JavaScript ウィジェットを更新することで、HTML または JavaScript を初期化する。
MATLAB で "DataChanged" イベントのリスニングを行い、JavaScript の応答をコード化する。たとえば、イベントをトリガーした新データを使って、HTML または JavaScript を更新できます。
htmlComponent JavaScript オブジェクトの Data プロパティを設定し、MATLAB で DataChangedFcn コールバックをトリガーする関数を作成する。

setup 関数の後は、サードパーティ JavaScript ライブラリを、ライブラリドキュメンテーションの推奨に従って使用できます。

以下はサンプルの HTML ファイル sampleHTMLFile.html です。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
		
        function setup(htmlComponent) {
            console.log("Setup called:", htmlComponent);

            // Get the initial 'Data' value from MATLAB

	    var initialData = htmlComponent.Data;
            console.log("Initial MATLAB Data", initialData);
			
	    // Initialize your HTML or JavaScript here
	    // Update things like DOM elements or JavaScript widgets
          
            var dom = document.getElementById("Content");
            dom.textContent = initialData;
			
	    // Code response to data changes in MATLAB
          
            htmlComponent.addEventListener("DataChanged", function (event) {
                var changedData = htmlComponent.Data;
                console.log("New Data from MATLAB", changedData);
				
            // Update your HTML or JavaScript with the new data
                var dom = document.getElementById("Content");
                dom.textContent = changedData;

        });

			
            // Update 'Data' in MATLAB and trigger
	    // the 'DataChangedFcn' callback function
            
        function updateData(newData) {
            htmlComponent.Data = newData;
            console.log("Changing Data in HTML", newData)
        }
        }
    </script>
</head>

<body>
    <div style="font-family:sans-serif;">
        <span style="font-weight:bold;"> The data from MATLAB will display here:</span><br />
        <div id ="Content"></div>
    </div>

	
    <!Reference supporting files here>
   
    <script src=""></script>
    <link rel="stylesheet" type="text/css" href="">
    <link rel="icon" type="image/png" href="">

</body>

</html>

HTML ファイルのデバッグ

作成した HTML コンポーネントが想定どおりに機能しない場合、または MATLAB と JavaScript 間の変換が完了した後にデータがどのように表示されるかを確かめる場合は、HTML ファイルをシステムブラウザーで開きます。ブラウザーの開発者ツール (DevTools) を使用して、setup 関数のテスト部分にブレークポイントを設定することができます。システムブラウザーを使って HTML ファイルをデバッグする際には、setup 関数の提供する MATLAB と JavaScript 間の接続をシミュレートしなければなりません。

MATLAB から JavaScript へのデータ送信のシミュレーション

この例では、MATLAB が JavaScript にデータを送信する方式をシミュレートする方法を説明し、HTML ファイルをデバッグできるようにします。

この例を MATLAB で開きます。現在のフォルダー ブラウザーで、sampleHTMLFile.html というファイルを右クリックして [MATLAB の外部で開く] を選択します。HTML ファイルがシステムブラウザーに開きます。

MATLAB で、次のコードを実行して文字ベクトルの MATLAB cell 配列を JSON 文字列に変換します。返された文字列の値をクリップボードにコピーします。
```
value = {'one';'two';'three'};
jsontxt = jsonencode(value)
```
```
jsontxt = 
'["one","two","three"]'
```
システムブラウザーの DevTools で、ファイルを開いてコードを表示します。16 行目の dom.textContent = initialData; にブレークポイントを作成します。
DevTools コンソールを開き、htmlComponent JavaScript オブジェクトを作成します。JSON.parse メソッドを使用して MATLAB で生成したばかりの JSON 文字列を JavaScript オブジェクトに変換し、htmlComponent オブジェクトの Data プロパティに保存します。
```
var htmlComponent = {
    Data: JSON.parse('["one","two","three"]'), // JSON formatted text from MATLAB data
    addEventListener: function() {console.log("addEventListener called with: ", arguments)}
};
```
引き続き DevTools コンソール内で、setup 関数を呼び出します。setup 関数の実行を再開すると、DevTools 内の HTML ページにデータが表示されます。
```
setup(htmlComponent)
```

JSON によって MATLAB から JavaScript コードへのデータのエンコードと解析を行うことで、"DataChanged" リスナーコールバックをシミュレートすることもできます。

JavaScript から MATLAB へのデータ送信のシミュレーション

JavaScript から MATLAB にデータが送信される方法をデバッグする場合は、JSON.stringify メソッドを使用して JavaScript オブジェクトを JSON 形式の文字列に変換します。次に、MATLAB で、関数 jsondecode を使用してその文字列を MATLAB データに変換します。