カスタム Web ページと埋め込み MATLAB Web アプリ間のデータ交換

このページは機械翻訳を使用して翻訳されました。最新版の英語を参照するには、ここをクリックします。

カスタム Web ページと埋め込み MATLAB Web アプリ間のデータ交換

次のワークフローを使用すると、カスタム Web ページと MATLAB^® Web アプリ間のデータ交換を容易にすることができます。まず、クロスオリジンインタラクション用にサーバーを構成します。次に、iframe タグを使用して MATLAB Web アプリを Web ページに埋め込みます。次に、Web ページは JavaScript^® を使用して MATLAB アプリにデータを送信します。MATLAB アプリ内では、特定の uihtml 要素とコールバック関数がこれらのデータメッセージを処理します。最後のステップでは、MATLAB Web アプリを Web ページにデプロイして埋め込み、両者の間で動的なやり取りを可能にします。この機能を使用するには、ブラウザで Cookie が有効になっている必要があります。

注意

Web ページ上の HTML iframe 要素内に MATLAB Web アプリを埋め込むと、さまざまなセキュリティリスクが発生する可能性があります。これらのリスクには、クリックジャッキング、クロスサイトスクリプティング (XSS)、クロスサイト要求フォージェリ (CSRF) などが含まれますが、これらに限定されません。考慮すべきもう 1 つの要素は、このプロセスではブラウザで Cookie を有効にする必要があり、追加の脆弱性が生じることです。これらのリスクにより、システムはより広範な攻撃対象領域にさらされることになります。したがって、埋め込み用の MATLAB Web アプリがセキュアかつ信頼できるものであることを確認することが重要です。さらに、埋め込みは、セキュアで信頼できることが証明されている Web サイトにのみ許可される必要があります。これは、サーバー上で allowed_frame_ancestors オプションを適切に設定することで実現でき、追加の保護層が提供されます。

データ交換を許可するように MATLAB Web App Server を構成する

allowed_frame_ancestors および allowed_event_origins オプションを使用して、カスタム Web ページのドメインを許可するように MATLAB Web App Server™ を構成します。

webapps-config set allowed_frame_ancestors "https://www.example.com"
webapps-config set allowed_event_origins "https://www.example.com:8001"

カスタムWebページを作成して通信を設定する

HTML を使用してカスタム Web ページを開発し、iframe タグを使用してページ内に MATLAB Web アプリを埋め込みます。埋め込む準備ができていない MATLAB Web アプリがある場合は、Web アプリをパッケージ化して MATLAB Web App Server にデプロイしたら、この手順に戻ることができます。以下に例を示します。
```
<iframe id="mainFrame" name="mainFrame" class="mainContainer"
        src="https://<hostname>:<port>/webapps/home/session.html?app={webAppName}"
        style="height:600px;width:600px" title="webpage"></iframe>
```

カスタム Web ページに JavaScript 関数を実装して、iframe HTML 要素内の MATLAB Web アプリにメッセージを投稿します。以下に例を示します。

// In this example, we are assuming that data is being sent on clicking a button.
// And data that is returned from a MATLAB app is displayed as a text element.

// Define a function to send data to the iframe
var buttonOne = document.getElementById("buttonOne");
function dataExchangeWithIframe(event) {
    // Access the iframe using its ID
    const frame = document.getElementById('mainFrame');
    
    // Define the data you want to send
    const data = [10];
    
    // Define the origin of the target iframe where the message will be posted (MATLAB Web App Server URL)
    const targetOrigin = "https://<hostname>:<port>";
    
    // Use postMessage method to send the data to the target iframe
    frame.contentWindow.postMessage(data, targetOrigin);
}
buttonOne.addEventListener('click', dataExchangeWithIframe, false);

// Add an event listener to listen for the event from the MATLAB web app
window.addEventListener("message", function (event) {                       
   // CRITICAL: Check origin to verify you are receiving data from a trusted origin. 
   // Validate that the event came from your MATLAB Web App Server and ignore any other requests.
   if (event.origin.startsWith('https://<hostname>:<port>')) {            
        var receivedData = event.data;
        console.log("Data Received from MATLAB app: ", receivedData);
        document.getElementById('dataFromMatlab').textContent = "Data from MATLAB: " + receivedData;
   }
});

MATLABアプリを開発する

MATLAB アプリに送信されたデータ

2 つの uihtml (MATLAB) コンポーネントを備えた MATLAB アプリを開発します。これらのコンポーネントにコンテンツを提供するには、各コンポーネント専用の HTML ファイルを作成し、HTMLSource (MATLAB) プロパティを使用してリンクします。以下に例を示します。

app.DataToMatlab = uihtml(app.UIFigure);    % used for managing data sent to MATLAB app from custom web page
app.DataToMatlab.HTMLSource = 'dataToMatlab.html'; 
app.DataFromMatlab = uihtml(app.UIFigure);  % used for managing data sent from MATLAB app to custom web page 
app.DataFromMatlab.HTMLSource = 'dataFromMatlab.html';

HTMLEventReceivedFcn (MATLAB) または DataChangedFcn (MATLAB) コールバックのいずれかを、データが MATLAB アプリに送信される uihtml コンポーネントに組み込みます。これらのコールバックは、カスタム Web ページからデータを受信します。以下に例を示します。
```
app.DataToMatlab.HTMLEventReceivedFcn = createCallbackFcn(app, @handleDataToMatlab, true); % use this OR
app.DataToMatlab.DataChangedFcn = createCallbackFcn(app, @handleDataToMatlab, true);
```

MATLAB アプリから送信されたデータ

MATLAB アプリからカスタム Web ページに送信されるデータを管理するために使用される 2 番目の uihtml コンポーネントの sendEventToHTMLSource (MATLAB) 関数を使用して、関連データを含む特定のイベントを HTML インターフェイスに送信します。以下に例を示します。

% Send 'dataFromMatlab' event with 'rmsVal' to associated HTML document in UIHTML component.
app.DataFromMatlab.sendEventToHTMLSource('dataFromMatlab', rmsVal);

カスタム Web ページから MATLAB アプリに送信されたデータを処理する

"message" イベントをリッスンし、カスタム Web ページから MATLAB にデータを送信する JavaScript 関数、setup(htmlComponent) を作成します。以下に例を示します。

console.log("Receive script loaded.");
// Define a setup function that takes an HTML component as an argument
function setup(htmlComponent) {
    // Add an event listener to the window object for "message" events
    window.addEventListener("message", function (event) {
        // CRITICAL: Check origin to verify you are receiving data from a trusted origin. 
        if (event.origin.startsWith('https://<hostname>:<port>')) {
            // Log the event origin to the console
            console.log("Event origin: ", event.origin);
            // Extract the data from the event
            var datatomatlab = event.data;
            
            // Send the received data to the MATLAB app through the "dataToMatlab" event
            htmlComponent.sendEventToMATLAB("dataToMatlab", datatomatlab);
            console.log("Send received data to MATLAB: ", datatomatlab);
        } else {
            // If the origin of the event is not the expected origin, log "Wrong origin." to the console
            console.error("Wrong origin.");
        }
    });
}

この JavaScript 関数を HTML ファイル内に埋め込みます。

MATLABでデータを処理する

MATLAB Web アプリ内で、HTMLEventReceivedFcn コールバックの JavaScript sendEventToMATLAB メソッドを介して送信されたイベントデータを取得します。以下に例を示します。

function handleDataToMatlab(app, event)
    % Extract the name and data of the HTML event from the event object
    eventName = event.HTMLEventName;
    % Check if the event name matches 'dataToMatlab'
    if strcmp(eventName, 'dataToMatlab')
        % If it matches, extract the passed data from the event
        receivedData = event.HTMLEventData;
        % Now, you can use the 'receivedData' variable within your MATLAB code.
        % Further processing or visualization code can go here
    end
end

さらに、DataChangedFcn (MATLAB) コールバックを使用してイベントデータを取得することもできます。

受信したデータをMATLAB環境内で必要に応じて使用します。

MATLAB アプリからカスタム Web ページに送信されたデータの処理

JavaScript コード内に setup(htmlComponent) 関数を作成します。この関数内で、sendEventToHTMLSource (MATLAB) MATLAB 関数から送信されたイベントのイベントリスナーをアタッチします。イベントがトリガーされたら、リスナーを使用してイベントからデータを抽出します。このデータをカスタム Web ページに送信するには、postMessage メソッドを使用します。この JavaScript が HTML ファイルに埋め込まれていることを確認してください。このファイルは MATLAB アプリケーションからアクセスできる必要があります。以下に例を示します。

// Define a setup function that takes an HTML component as an argument
console.log("Receive script loaded.");
function setup(htmlComponent) {
    console.log("setup function called.");
    htmlComponent.addEventListener("dataFromMatlab", function (event) {
        dataFromMatlab = event.Data;        
        // Define targetOrigin to point to the custom web page where the data will be sent
        const targetOrigin = "https://<custom_web_page_hostname>:<port>";
        // Use window.top to send the data to the target webpage
        window.top.postMessage(dataFromMatlab, targetOrigin);
        console.log("Received data from Matlab: ", dataFromMatlab);
    });
}

MATLAB アプリのパッケージ化とデプロイ

compiler.build.webAppArchive (MATLAB Compiler) 関数を使用して MATLAB アプリをパッケージ化します。HTML ファイルと JavaScript ファイルを依存関係として含めます。以下に例を示します。

files = ["dataToMatlab.html", "dataToMatlab.js", "dataFromMatlab.html", "dataFromMatlab.js"]
results = compiler.build.webAppArchive("myWebApp.mlapp",...
    AdditionalFiles=files,...
    OutputDir="output",...
    Verbose="on")

Web アプリアーカイブを MATLAB Web App Server にデプロイし、iframe タグを使用してカスタム Web ページに組み込みます。Web アプリの URL を保護するには、Web アプリのホームページに移動し、目的の Web アプリを右クリックして、コンテキストメニューから [Copy link] を選択します。この URL を使用して、カスタム Web ページの iframe タグ内に Web アプリを埋め込みます。詳細については、カスタムWebページを作成して通信を設定するを参照してください。

参考

webapps-config | uihtml (MATLAB) | compiler.build.webAppArchive (MATLAB Compiler)

トピック

iframe HTML要素を使用してMATLAB Webアプリを埋め込む