Main Content

アプリでの HTML コンテンツの表示

アプリを開く

App Designer で、JavaScript®、CSS、アイコンなどの HTML コンテンツをアプリに追加できます。このアプリでは、CSS でスタイルが設定された HTML ボタンを表示し、JavaScript で生成されたデータをプロットする方法を示します。この例は、以下のアプリ作成タスクについても示します。

  • アプリ内で HTML、CSS、およびサポート ファイルにアクセスする。

  • HTML UI コンポーネントのコールバック関数を作成する。

HTML コンテンツの作成とアプリへの追加

次のファイルを使用して HTML で、スタイルが設定されたボタンを作成します。

  • dataForm.html — この HTML ファイルは HTML ボタン要素を作成し、ユーザー操作に応答する JavaScript コードを実装します。

  • inputStyles.css — この CSS ファイルは、HTML ボタン要素のスタイルを設定します。

  • gears-icon.png — このサポート イメージ ファイルは、HTML ボタン要素のカスタム アイコンを提供します。

CSS ファイル内で、アイコン イメージ ファイルを背景イメージとして使用してボタンのスタイルを設定します。次に、HTML ファイルの body タグ内で CSS ファイルとイメージ ファイルの両方を参照します。

<link rel="stylesheet" type="text/css" href="./inputStyles.css">
<link rel="icon" type="image/png" href="gears-icon.png">

CSS によってスタイルが設定されたこの HTML ボタンを App Designer アプリに追加するには、HTML UI コンポーネントを [コンポーネント ライブラリ] から [設計ビュー] のアプリ キャンバスにドラッグします。[コンポーネント ブラウザー] で HTML UI コンポーネントを選択し、HTML ファイルとして HTMLSource プロパティを設定することで、このコンポーネントを HTML ファイルにリンクします。アプリ コードで HTML ファイルとすべてのサポート ファイルを参照できるように、これらのファイルが同じフォルダーおよび MATLAB パス上にあることを確認してください。

HTML UI コンポーネントへの HTML ファイル コンテンツの接続

アプリで HTML ファイルのデータにアクセスするには、まず HTML ファイルの script タグ内に setup という名前の JavaScript 関数を実装する必要があります。この関数 setup で、MATLAB HTML オブジェクトにリンクされたローカルの JavaScript htmlComponent オブジェクトを定義して初期化します。次に、この JavaScript オブジェクトを使用して乱数を生成するボタン コールバックを関数 setup に追加します。

function setup(htmlComponent) {
    var initialData = htmlComponent.Data;
    % Add button callback to generate random number on click
    % ...
}

MATLAB での HTML 要素の使用の詳細については、アプリ内の HTML コンテンツの作成を参照してください。

HTML コンポーネントのコールバック関数の作成

アプリで乱数をプロットするには、HTML UI コンポーネントの DataChangedFcn コールバックを作成します。HTML ファイル内のコールバック関数と App Designer は連携して動作します。アプリで HTML ボタンをクリックすると、JavaScript ボタンのコールバックが実行され、乱数が生成されます。JavaScript 関数は、MATLAB HTML オブジェクトの Data プロパティと同期される htmlComponent オブジェクトの Data プロパティに乱数を保存します。データ値が変更されたため、MATLAB は DataChangedFcn コールバックを実行します。

App Designer のコールバック コードでドット表記を使用して、同期されたデータ値にアクセスします。

data = app.JSDataHTML.Data;

次に、アニメーション化されたラインをプロットして、HTML ボタンをクリックしたときのデータの変化を可視化します。

for k = 1:length(app.numclicks)
    aline = animatedline(app.UIAxes,"MaximumNumPoints",10000,"Marker","*");
    addpoints(aline,app.numclicks,data(k));
    drawnow
end

完全にコード化されたアプリと組み込み HTML ファイルを表示するには、App Designer でこの例を起動します。

参考

関数

プロパティ

関連するトピック