AVEVA™ InTouch HMI

カスタムウィジェット

Save PDF

カスタムウィジェット

Save PDF

Last UpdatedJul 01, 2026
3 minute read

クライアントコントロールと OMI アプリはデスクトップでのみサポートされ、Web Client では動作しません。カスタムウィジェットはクロスプラットフォームソリューションを提供し、一度開発すると、Web 環境やデスクトップ環境の InTouch および OMI アプリケーション間で使用できます。

前提条件

開始する前に、以下がインストールされていることを確認してください。

Node.js（24.15.0 以降）および npm （11.12.1 以降）：依存関係をインストールし、ウィジェットパッケージをビルドするために必要です。nodejs.org からダウンロードしてください。
テキストエディタ：ウィジェットファイルの編集に使用します。Visual Studio Code を推奨します。

このセクションでは、InTouch および OMI アプリケーションでカスタムウィジェットを作成、構築、および使用する方法について説明します。以下のステップに従ってください。

ステップ 1：カスタムウィジェットを作成および変更する
ステップ 2：プロジェクトファイルを更新する
ステップ 3 ：ウィジェットのプロパティとメソッドを .wjson ファイルで定義する
ステップ 4：ウィジェットパッケージをビルドする
ステップ 5：ウィジェットをインポートして使用する

ステップ 1：カスタムウィジェットを作成および変更する

サンプルウィジェットは C:\ProgramData\AVEVA\Widgets\SampleWidget から入手できます。これを使用して開始します。

［テンプレート］フォルダには、新しいウィジェットの作成に使用されるベースファイルが含まれています。通常のウィジェット開発時には、これらのテンプレートファイルは変更しないでください。

WidgetCreator ディレクトリ（C:\ProgramData\AVEVA\Widgets\WidgetCreator）でターミナルを開きます。
次のコマンドを実行して、新しいウィジェットを作成します：

npm run create-widget MyWidgetName。MyWidgetName は新しいウィジェットの名前です。
新しく作成したウィジェットフォルダ（cd MyWidgetName）に移動します。
Visual Studio Code で新しいウィジェットフォルダを開いて変更を加えます。

ステップ 2：プロジェクトファイルを更新する

次のプロジェクトファイルをカスタマイズして、ウィジェットを構築できます。

index.html：必要に応じて HTML 構造を変更するために使用します。この必須ファイルはメインエントリポイントであり、ウィジェットを開いた時、最初にロードされます。このファイルの名前は変更しないでください。
src/*.css：表示スタイルのカスタマイズに使用します。
src/*.js：ウィジェットロジックの実装に使用します。

注意：デフォルトの CSS と JavaScript のファイル名は、サンプルウィジェットに基づいて付けられています。これらのファイル名は、必要に応じて変更できます。

ステップ 3 ：ウィジェットのプロパティとメソッドを .wjson ファイルで定義する

.wjson ファイルは、ウィジェットと InTouch および OMI アプリケーション間のコントラクトとして機能します。ウィジェットがプラットフォームに公開するプロパティを定義します。

.wjson の構造を理解する

.wjson ファイルには、次の主要なフィールドが含まれます。

version：ウィジェットのバージョンを指定します。
width および height：ウィジェットが最初に追加される際のデフォルトのサイズを定義します。
events：現在は実装されていませんが、将来のリリースで実装される予定です。
properties：プラットフォームに公開されるウィジェットのプロパティを定義します。各プロパティには、「0」から始まり、「1」、「2」というように、連続した番号を付ける必要があります。

注意：これらのフィールドは必須であり、ウィジェットが正しく機能するために必要であるため、削除してはなりません。

設定可能なプロパティフィールド

各ウィジェットのプロパティに対して、次のフィールドを設定できます。

Name：InTouch および OMI に表示されるウィジェットプロパティ名を指定します。名前は最大 32 文字まで指定できます。
Type：プロパティのデータ型を定義します。サポートされているプロパティの型には、boolean、double、elapsed time、float、integer、string、time、history summary があります。
Value：ウィジェットのプロパティに割り当てられるデフォルト値を設定します。
Desc：ウィジェットプロパティの説明を入力します。このフィールドは、ローカリゼーションを強化し、使いやすさを向上させるために、複数の言語をサポートしています。

次の例は、2 つのプロパティを示しています。新しいプロパティを追加するには、JSON エントリ全体をコピーし、連続番号と、名前、型、その他の関連フィールドを更新します。

{

"version": 0,

"width": 500,

"height": 500,

"events": {},

"properties": {

"0": {

"name": "Counter",

"type": "integer",

"value": 0,

"desc": {

"1033": "Counter value",

"1036": "Valeur du compteur",

"1031": "Zählerwert",

"1041": "カウンター値",

"2052": "计数器值"

}

"1": {

"name": "Label",

"type": "string",

"value": "Count:",

"desc": {

"1033": "Display label",

"1036": "Étiquette d'affichage",

"1031": "Anzeigebeschriftung",

"1041": "表示ラベル",

"2052": "显示标签"

}

JavaScript でウィジェットのプロパティを使用する

.wjson ファイルでプロパティを定義すると、JavaScript で cwidget を使用してプロパティにアクセスできるようになります。

プロパティの変更を検出する

ウィジェットプロパティの変更を検出するには、次のパターンを使用します（'Counter' を実際のプロパティ名に置き換えてください）。

cwidget.on('Counter', callbackFn);

callbackFn：プロパティ値が変更されるたびに実行される関数。UI の更新や追加のロジックのトリガーに使用できます。

サンプルウィジェットからの例：

SampleWidget.js では、'Counter' プロパティが変更されると、_onCounterCshanged() 関数がトリガーされ、表示が更新されます。

cwidget.on('Counter', _onCounterChanged);

function _onCounterChanged() {

document.getElementById('counter').innerText = cwidget.Counter;

}

プロパティ値を設定する

ウィジェットのプロパティに新しい値を割り当てるには、次の構文を使用します。

cwidget.Counter = nextValue;

nextValue：プロパティに割り当てる値を格納します。プロパティのデータ型と一致している必要があります（たとえば、整数型プロパティの場合は数値、文字列型プロパティの場合は文字列）。

サンプルウィジェットからの例：

SampleWidget.js では、加算ボタンによって Counter プロパティが更新されます。これにより、コールバックが自動的にトリガーされ、バインドされているすべてのコントロールが更新されます。

function _increment() {

const current = Number.parseInt(cwidget.Counter, 10) || 0;

cwidget.Counter = current + 1;

}

JavaScript で呼び出し可能なメソッドをバインドする（任意指定）

InTouch および OMI アプリケーションがウィジェットのメソッドを呼び出せるようにするには、ウィジェットクラスのメソッドをウィンドウオブジェクトの関数にバインドして公開します。

次に例を示します（SampleWidget、Decrement、_decrement、Counter を独自のクラス名とメソッド名に置き換えてください）。

class SampleWidget {

constructor() {

window.Decrement = this._decrement.bind(this);

}

_decrement(args) {

var number = JSON.parse(args[0]);

const current = Number.parseInt(cwidget.Counter, 10) || 0;

const delta = Number.parseInt(number, 10) || 0;

cwidget.Counter = current - delta;

_onCounterChanged();

}

これにより、「Decrement」という名前の呼び出し可能な関数が作成され、ウィジェットをインポートした後に産業用グラフィックアクションスクリプトで使用できるようになります。

ステップ 4：ウィジェットパッケージをビルドする

開発が完了したら、以下の手順に従ってウィジェットをビルドし、配置可能なパッケージを生成します。

ウィジェットフォルダ（C:\ProgramData\AVEVA\Widgets\WidgetCreator\MyWidgetName）でターミナルを開きます。
ビルドコマンド npm run build を実行します。

これにより、dist フォルダに .cwp パッケージが生成されます。

ステップ 5：ウィジェットをインポートして使用する

ウィジェットがビルドされたら、それをアプリケーションにインポートして使用できます。以下の手順に従って、InTouch アプリケーションにウィジェットをインポートし、そのプロパティをバインドします。

InTouch WindowViewer のウィジェットをインポートして埋め込む

アプリケーションで WindowMaker を開きます。
［ファイル］>［インポート］> ［視覚化］>［HTML5 ウィジェット］に移動します。
ステップ 4 で生成した .cwp ファイルを選択します。
グラフィックエディタを開き、［産業用グラフィック］ > ［ウィジェット］からウィジェットを埋め込みます。

System Platform IDE のウィジェットをインポートして埋め込む

Galaxy を開きます。
［ホーム］タブに移動し、［インポート］を選択します。
［Web ウィジェット］を選択します。
ステップ 4 で生成した .cwp ファイルを選択します。

インポート後、ウィジェットがグラフィックエディタツールボックスに表示され、グラフィックにドラッグアンドドロップできるようになります。

カスタムプロパティをバインドする

ウィジェットのプロパティをカスタムプロパティにバインドすると、ウィジェットとアプリケーションの他のコントロール間で双方向の同期が可能になります。

バインディングを設定する

アプリケーションにカスタムプロパティを作成します。この例では、cp_value を使用します。
ウィジェットのプロパティをカスタムプロパティにバインドします。ウィジェットのプロパティグリッドで、Counter ウィジェットのプロパティを cp_value に紐付けます。

双方向バインディング

バインディングを設定すると、変更は双方向に自動的に反映されます。

ウィジェットからアプリケーションへ：ウィジェットでプロパティが更新されると（例： cwidget.Counter = newValue）、cp_value カスタムプロパティが更新され、すべてのバインドされたコントロール（テキストボックスなど）に新しい値が反映されます。
アプリケーションからウィジェットへ：テキストボックスに値を入力すると、cp_value が変更されます。この変更により、cwidget.on() に登録されたコールバック関数がトリガーされ、ウィジェットが応答して、UI が同期された状態を維持します。

スクリプトからウィジェットのメソッドを呼び出す

ウィジェットで呼び出し可能なメソッドを定義している場合（「ステップ 3：JavaScript で呼び出し可能なメソッドをバインドする」を参照）、グラフィックスクリプトエディタからウィジェットのメソッドを呼び出すことができます。

この例では、アクションスクリプトアニメーションを備えたボタンを作成し、クリック時に、先ほど JavaScript でバインドした Decrement メソッドがトリガーされるようにします。

dim args [1] as object;

args[1]=5;

SampleWidget1.ExecuteFunctionAsync("Decrement",args);

たとえば、Decrement 関数を呼び出すには、次のようにします。

このスクリプトは、ウィジェットインスタンスで Decrement メソッドを呼び出し、値として 5 を渡します。ボタンがクリックされると、ウィジェットのカウンターが 5 減少します。

ここで、

SampleWidget1 は、グラフィック上のウィジェットインスタンスの名前です。
ExecuteFunctionAsync は、ウィジェットの関数を非同期で呼び出すために使用されるメソッドです。
Decrement は、JavaScript のバインディング window. Decrement this._decrement.bind (this) にマップされるメソッド名です。
args はウィジェットのメソッドに渡される引数を格納するオブジェクト配列です。配列のインデックスは（[0] ではなく）[1] から開始してください。

SampleWidget1 を実際のウィジェット名に置き換え、必要に応じてメソッド名や引数を調整します。

これで、カスタムウィジェットが完全に統合され、使用できるようになりました。

AVEVA™ InTouch HMI