カスタムUI JS-APIリファレンス

カスタムUIをHTMLで作成する際のJavaScriptのAPI仕様です。カスタムUIをHTMLで作成する手順については下記を参照してください。

コールバック関数#

パラメータ設定ダイアログが表示されるとき、および、設定を保存して閉じるときに、 SpeeDBee SynapseのUI画面本体とパラメータ情報をやり取りするためのコールバック関数が必要になります。下記に説明する２つの関数onLoad, onSaveは、カスタムUI(HTML)内のJavaScriptで定義してください。 SpeeDBee SynapseのUI画面本体からコールされます。

onLoad … カスタムUI読み込みフック#

カスタムコンポーネントの設定ダイアログがユーザーに表示された際にコールされるフック関数

定義

onLoad?: (editable: boolean, parameter: {}, newComponent: boolean, componentId?: string) => Promise<void>;

引数

editable: 現在表示している設定ダイアログを編集可能とする場合はtrue, 編集不可の場合はfalse
parameter: 保存済みのパラメータオブジェクト
newComponent: コンポーネントの新規作成時にtrue, 更新時はfalse
componentId: 対象コンポーネントインスタンスのID

戻り値

なし

説明

カスタムコンポーネントの設定ダイアログがユーザーに表示された際にコールされる関数を登録するプロパティです。保存済みのパラメータを取得するために必要ですので、以下のようにして必ず登録してください。

window.customUiLib.onLoad = function (editable, parameter, newComponent, componentId) {
  :
};

この関数の引数として、以前保存したパラメータオブジェクトを受け取ることができます。このオブジェクトを元に、HTML内の入力ボックス等に初期値を設定してください。

Runモードの場合はeditableがfalseとなっています。この場合はユーザーが設定を変更できないように、入力項目等は非活性にするなどの対応をしてください。非活性にしない場合ユーザーが画面上で値を変更できてしまいます。ただし、その場合でもパラメータの保存はできません。

第四引数のcomponentIdは、window.customUiLib.apiオブジェクト内のAPIを使用する際の引数として使用できます。ただしコンポーネントの新規作成時には、まだコンポーネントが作成されていないためcomponentIdは引数として渡されません。

onSave … パラメーター保存フック#

カスタムコンポーネントの設定ダイアログで、ユーザーが保存ボタンを押してパラメーターを保存する際に自動で呼び出されるフック関数

定義

onSave?: () => Promise<{} | null>;

引数

なし

戻り値

null: パラメータの保存をキャンセルする場合にnullを返します。
{}: 保存したいパラメータを返します。

説明

ユーザーが保存ボタンを押した際に自動で実行される関数です。保存時に行いたい処理を一つの関数として実装し、下記のようにonSaveに登録してください。

window.customUiLib.onSave = function () {
  :
  return ..;
};

この関数がコールされたら、保存するパラメータ情報をオブジェクトとして返却する必要があります。オブジェクトはJSON化可能なデータとしてください。返却されたオブジェクトが当該コンポーネントのパラメータとして保存され、設定ダイアログは閉じられます。

nullを返却した場合、パラメータの保存はキャンセルされます。この場合はダイアログも閉じられません。カスタムUI画面でユーザーが入力したデータ等のフォーマットをチェックし、入力内容に問題がある場合などに、この方法で保存をキャンセルできます。ただしキャンセルされたことは自動ではユーザーに通知されませんので、どのような要因で保存をキャンセルしたのかについてはカスタムUIのHTML内でエラー表示等を行うようにしてください。

SpeeDBee Synapse設定取得関数#

window.customUiLib.apiオブジェクトには、SpeeDBee Synapseの画面上で設定した様々な情報を取得することができるユーティリティ関数が定義されています。これらの関数の使用は必須ではありませんが、適切に利用することで入力補助などの用途でユーザーの利便性、操作性を向上させることができます。

getComponentbases … コンポーネントベース一覧取得#

コンポーネントベース情報の一覧を取得する関数

定義

window.customUiLib.api.getComponentbases: () => Promise<ComponentbaseResponse[]>;

引数

なし

戻り値

ComponentbaseResponse[]: コンポーネントベース情報の一覧

説明

本関数は、コンポーネントベース情報を一覧で取得します。

getPanels … パネル一覧取得#

パネル一覧を取得する関数

定義

window.customUiLib.api.getPanels: () => Promise<PanelResponse[]>;

引数

なし

戻り値

PanelResponse[]: パネル情報の一覧

説明

本関数は、全パネルの情報を一覧で取得します。

getPanel … パネル情報取得#

パネル情報を取得する関数

定義

window.customUiLib.api.getPanel: (id: number) => Promise<PanelResponse>;

引数

No	項目	説明
1	`id` number	パネルID

戻り値

PanelResponse: パネル情報

説明

本関数は、指定したパネルIDのパネル情報を取得します。

getComponents … コンポーネント一覧取得#

コンポーネント一覧を取得する関数

定義

window.customUiLib.api.getComponents: (panelId?: number) => Promise<ComponentResponse[]>;

引数

No	項目	説明
1	`panelId` number \| undefined	取得するパネルのID（未指定の場合は全パネル）

戻り値

ComponentResponse[]: コンポーネント一覧

説明

本関数は、コンポーネント情報を一覧で取得します。
パネルIDを指定すると、そのパネルに配置しているコンポーネントだけを取得できます。

getComponent … コンポーネント情報取得#

コンポーネント情報を取得する関数

定義

window.customUiLib.api.getComponent: (id: string) => Promise<ComponentResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

ComponentResponse: コンポーネント情報

説明

本関数は、指定したコンポーネントIDのコンポーネント情報を取得します。

getInPort … 入力ポート設定取得#

入力ポート設定を取得する関数

定義

window.customUiLib.api.getInPort: (id: string) => Promise<InportResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

InportResponse: コンポーネントの入力ポート設定

説明

本関数は、コンポーネントの入力ポート設定を取得します。
入力ポート設定には、送られてくるデータ対しての設定や集約、遅延時間、イベントについての設定が含まれています。

getInPortData … 入力ポート情報取得#

入力ポートで受信しているデータについての情報を取得する関数

定義

window.customUiLib.api.getInPortData: (id: string) => Promise<PortDataResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

PortDataResponse: コンポーネントの入力ポートで受信しているデータの情報

説明

本関数は、コンポーネントの入力ポートで受信しているデータについての情報を取得します。
入力ポート情報には、送られてくるデータがどのような型か、配列かどうか等の情報が含まれています。

getInPortDataValue … 入力ポートデータ取得#

入力ポートで受信しているデータを取得する関数

定義

window.customUiLib.api.getInPortDataValue: (id: string) => Promise<PortDataValueResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

PortDataValueResponse: コンポーネントの入力ポートで受信しているデータ

説明

本関数は、コンポーネントの入力ポートで受信しているデータやタイムスタンプを取得します。
取得できる値は各データごとに最新の一件となります。

getSystemPort … システムポート設定取得#

システムポート設定を取得する関数

定義

window.customUiLib.api.getSystemPort: (id: string) => Promise<OutportResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

OutportResponse: コンポーネントのシステムポート設定

説明

本関数は、コンポーネントのシステムポート設定を取得します。
システムポート設定には、送信するデータの永続化、数値変換、登録条件や付与したコメントの設定が含まれています。

getSystemPortData … システムポート情報取得#

システムポートから送信しているデータについての情報を取得する関数

定義

window.customUiLib.api.getSystemPortData: (id: string) => Promise<PortDataResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

PortDataResponse: コンポーネントのシステムポートから送信しているデータの情報

説明

本関数は、コンポーネントのシステムポートから送信しているデータについて取得します。
システムポート情報には、送るデータはどのような型か、配列かどうか等の情報が含まれています。

getSystemPortDataValue … システムポートデータ取得#

システムポートで送信している最新のデータを取得する関数

定義

window.customUiLib.api.getSystemPortDataValue: (id: string) => Promise<PortDataValueResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

PortDataValueResponse: コンポーネントのシステムポートから送信しているデータ

説明

本関数は、コンポーネントのシステムポートから送信しているデータ、タイムスタンプを取得します。取得する値は各データごとに最新の一件となります。

getOutPort … 出力ポート設定取得#

出力ポート設定を取得する関数

定義

window.customUiLib.api.getOutPort: (id: string) => Promise<OutportResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

OutportResponse: コンポーネントの出力ポート設定

説明

本関数は、コンポーネントの出力ポート設定を取得します。
出力ポート設定には、送信するデータの永続化、数値変換、登録条件や付与したコメントの設定が含まれています。

getOutPortData … 出力ポート情報取得#

出力ポートから送信しているデータについての情報を取得する関数

定義

window.customUiLib.api.getOutPortData: (id: string) => Promise<PortDataResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

PortDataResponse: コンポーネントの出力ポートから送信しているデータの情報

説明

本関数は、コンポーネントの出力ポートから送信しているデータについて取得します。
出力ポート情報には、送るデータはどのような型か、配列かどうか等の情報が含まれています。

getOutPortDataValue … 出力ポートデータ取得#

出力ポートで送信している最新のデータを取得する関数

定義

window.customUiLib.api.getOutPortDataValue: (id: string) => Promise<PortDataValueResponse>;

引数

No	項目	説明
1	`id` string	取得するコンポーネントのID

戻り値

PortDataValueResponse: コンポーネントの出力ポートから送信しているデータ

説明

本関数は、コンポーネントの出力ポートから送信しているデータ、タイムスタンプを取得します。取得する値は各データごとに最新の一件となります。

runMethod … コンポーネントインスタンスメソッド実行#

コンポーネントインスタンスメソッドを実行する関数です。

注意

メソッドを実行できるのは管理者以上です。

定義

runMethod: (id: string, methodName: string, parameter: string | object | null) => Promise<ComponentMethodResponse>;

引数

No	項目	説明
1	`id` string	実行するコンポーネントのID
2	`methodName` string	取得するメソッドの名称
3	`parameter` string \| object \| null	実行するメソッドに渡すパラメーター

戻り値

ComponentMethodResponse: 実行したインスタンスメソッドの結果と戻り値

説明

本関数は、コンポーネントに実装されているインスタンスメソッドを実行します。
インスタンスメソッドについてはを参照してください。

getFlowlinks … フローリンク一覧取得#

フローリンク一覧を取得する関数

定義

window.customUiLib.api.getFlowlinks: (componentId?: string) => Promise<FlowlinkResponse[]>;

引数

No	項目	説明
1	`componentId` string	取得するコンポーネントのID（未指定の場合は全フローリンク）

戻り値

FlowlinkResponse[]: フローリンク一覧

説明

本関数は、フローリンク情報を取得します。
コンポーネントIDを指定した場合はそのコンポーネントに接続されているフローリンクを、未指定の場合は全フローリンクを取得します。

getFlowlink … フローリンク情報取得#

フローリンク情報を取得する関数

定義

window.customUiLib.api.getFlowlink: (id: string) => Promise<FlowlinkResponse>;

引数

No	項目	説明
1	`id` string	取得するフローリンクのID

戻り値

FlowlinkResponse: フローリンク情報

説明

本関数は、フローリンク情報をIDで検索して取得します。

getFlowlinkFilter … フローリンクフィルター情報取得#

フローリンクに設定されているフィルター情報を取得する関数

定義

window.customUiLib.api.getFlowlinkFilter: (id: string) => Promise<FlowlinkFiltersResponse>;

引数

No	項目	説明
1	`id` string	取得するフローリンクのID

戻り値

FlowlinkFiltersResponse: フローリンク情報

説明

本関数は、フローリンクに設定されているフィルター情報をIDで検索して取得します。

型#

ComponentbaseResponse#

SpeeDBee Synapseに登録されているコンポーネントベース情報

定義

type ComponentbaseResponse = {
    id: string,
    name: string,
    tag: string,
    inports: number,
    outports: number,
    required_point: number,
    error_types: {
        id: string,
        parameter_names: string[],
    }[],
}

構成

No	項目	説明
1	`id`	コンポーネントベースID
2	`name`	コンポーネントベース名
3	`tag`	タグ
4	`inports`	入力ポート数
5	`outports`	出力ポート数
6	`required_point`	起動時に必要なポイント数
7	`error_types`	エラー種別オブジェクトの一覧

error_types

No 項目説明

1 id エラーID

2 parameter_names パラメータ名

説明

各コンポーネントのベース情報のデータ型です。
getComponentbasesを使用した際に戻り値として一覧を取得できます。

PanelResponse#

パネル情報

定義

type PanelResponse = {
    id: number,
    order: number,
    name: string,
    type: string,
    options: any,
    components: any[],
};

構成

No	項目	説明
1	`id`	パネルID
2	`order`	表示順
3	`name`	名称
4	`type`	種別
5	`options`	オプション
6	`components`	コンポーネント情報

説明

登録されている各パネルのデータ型です。
getPanels、getPanelを使用した際に戻り値として取得できます。

ComponentResponse#

コンポーネント情報

定義

type ComponentResponse = {
    id: string,
    baseid: string,
    name: string,
    enable: boolean,
    parameter: any | undefined,
    options: any | undefined,
};

構成

No	項目	説明
1	`id`	コンポーネントID
2	`baseid`	コンポーネントベースID
3	`name`	名称
4	`enable`	有効/無効
5	`parameter`	パラメーター
6	`options`	オプション

説明

ユーザーが設定した各コンポーネントを取得する際のデータ型です。
getComponents、getComponentを使用した際に戻り値として取得できます。

InportResponse#

入力ポート設定

定義

type InportResponse = {
    setting_option: 'reception' | 'regexp',
    column_data: {
        target: {
            source_name: string,
            data_name: string,
            data_types?: string[],
        }[],
        raw_data: boolean,
        typical_value?: string,
        basic_statistics: string[],
    }[],
    window: {
        window_type: 'tumbling' | 'value_change',
        time_span?: number,
        columns?: {
            source_name: string,
            data_name: string,
            data_types: string[]
        },
        max_duration?: number
    },
    delaytime: number,
    event?: {
        source_name: string,
        data_name: string,
        pre_event_time: number,
        post_event_time: number
    },
    column_order_output?: {
        specify_columns: {
            source_name: string,
            data_name: string,
            outputname?: string,
        }[],
        order_type: string
    }
};

構成

No	項目	説明
1	`setting_option`	フィルターを正規表現で行うか、データごとに行うかどうか
2	`column_data`	入力データ情報
3	`window`	ウィンドウ設定
4	`delaytime`	遅延時間(ナノ秒)
5	`event`	入力ポートへのデータを外部のイベントによりON/OFFする設定
6	`column_order_output`	入力ポートに入ってきたデータを並べ替える設定と別名の設定

column_data

No 項目説明

1 target 集約対象となるソースとデータのパターン

2 raw_data 未加工データの利用有無

3 typical_value 代表値の設定。最新値(newer)または最古値(older)

4 basic_statistics 基本統計データ

target

No 項目説明

1 source_name 対象とするコンポーネント名のパターンを示す正規表現

2 data_name 対象とするデータ名のパターンを示す正規表現

3 data_types 対象とするデータ型のリスト(省略/nullは任意の型にマッチ)

window

No 項目説明

1 window_type ウィンドウ種別

2 time_span 検索時間幅(ナノ秒)

3 columns 対象とするデータ情報の一覧

4 max_duration ウィンドウの最大時間幅(ナノ秒)

columns

No 項目説明

1 source_name 対象とするコンポーネント名のパターンを示す正規表現

2 data_name 対象とするデータ名のパターンを示す正規表現

3 data_types 対象とするデータ型のリスト(省略/nullは任意の型にマッチ)

event

No 項目説明

1 source_name 外部イベントのカラムを生成するコンポーネント名

2 data_name 外部イベントのカラム名(bool型のみ有効)

3 pre_event_time プレイベント時間(ナノ秒)

4 post_event_time ポストイベント時間(ナノ秒)

column_order_output

No 項目説明

1 specify_columns 並び順と出力名

2 order_type 指定外のデータの並び順

specify_columns

No 項目説明

1 source_name コンポーネント名

2 data_name データ名

3 outputname カラムに付与する出力名

説明

コンポーネントの入力ポート設定のデータ型です。
getInPortを使用した際に戻り値として取得できます。

OutportResponse#

システム、出力ポート設定

定義

type OutportResponse = {
    setting_option: 'reception' | 'regexp';
    pattern_settings: {
        target: {
            source_name?: string,
            data_name: string,
            data_types?: string[],
        }[],
        storage_type: string,
        file_index: boolean,
        conversion?: {
            data_type?: string,
            expression?: string,
        },
        value_filter?: {
            expression: string,
        },
        comment?: string,
    }[];
};

構成

No	項目	説明
1	`target`	対象データを指定するためのパターン定義
2	`storage_type`	永続化
3	`file_index`	検索用インデックスの作成フラグ
4	`conversion`	数値変換
5	`value_filter`	登録条件
6	`comment`	コメント

target

No 項目説明

1 source_name 対象とするコンポーネント名のパターンを示す正規表現

2 data_name 対象とするデータ名のパターンを示す正規表現

3 data_types 対象とするデータ型のリスト(省略/nullは任意の型にマッチ)

conversion

No 項目説明

1 data_type 変換後のデータ型

2 expression 変換式

value_filter

No 項目説明

1 expression 条件式

コンポーネントの出力ポート設定のデータ型です。
getSystemPort、getOutPortを使用した際に戻り値として取得できます。

PortDataResponse#

入出力ポートが受信、送信しているデータについての情報

定義

type PortDataResponse = {
    id: string;
    name: string;
    data?: {
        name: string;
        source?: string;
        column_type: string,
        sampling_rate?: number,
        data_type: string;
        data_array?: number;
    }[]
};

構成

No	項目	説明
1	`id`	コンポーネントID
2	`name`	名称
3	`data`	入力ポートに受信しているデータ情報

data

No 項目説明

1 name データ名

2 source コンポーネント名

3 column_type カラム種別

4 sampling_rate サンプリングレート

5 data_type データ型

6 data_array 配列数

説明

コンポーネントの入出力ポートが受信、送信しているデータについてのデータ型です。
getInPortData、getSystemPortData、getOutPortDataを使用した際に戻り値として取得できます。

PortDataValueResponse#

入出力ポートが受信、送信しているデータ

定義

type PortDataValueResponse = {
    id: string;
    name: string;
    data?: {
        value: any | any[];
        timestamp?: number;
        name: string;
        source?: string;
        data_type: string;
        data_array?: number;
    }[]
};

構成

No	項目	説明
1	`id`	コンポーネントID
2	`name`	名称
3	`data`	入力ポートに受信しているデータ

data

No 項目説明

3 value 値

4 timestamp タイムスタンプ（ナノ秒）

1 name データ名

2 source コンポーネント名

5 data_type データ型

6 data_array 配列数

説明

コンポーネントの入出力ポートが受信、送信しているデータのデータ型です。
getInPortDataValue、getSystemPortDataValue、getOutPortDataValueを使用した際に戻り値として取得できます。

ComponentMethodResponse#

コンポーネントのインスタンスメソッドを実行した後の結果

定義

type ComponentMethodResponse = {
    method_name: string,
    result: string | object | null
};

構成

No	項目	説明
1	`method_name`	実行した関数名
2	`result`	実行した関数の戻り値

説明

コンポーネントのインスタンスメソッドを実行した後に返されるデータのデータ型です。
resultの内容はカスタムコンポーネント側の実装によって変わるため、これ以降に行う処理に合わせてカスタムコンポーネント側の戻り値を実装してください。

FlowlinkResponse#

フローリンク情報

定義

type FlowlinkResponse = {
    id: string,
    source?: {
        id: string,
        port: number,
    },
    destination?: {
        id: string,
        port: number,
    }
};

構成

No	項目	説明
1	`id`	フローリンクID
2	`source`	接続元の情報
3	`destination`	接続先の情報

source, destination

No 項目説明

1 id 接続先のポートID

2 port ポート番号

説明

コンポーネントが接続しているフローリンクのデータ型です。
getFlowlinks、getFlowlinkを使用した際に戻り値として取得できます。

FlowlinkFiltersResponse#

フローリンクのフィルター情報

定義

type FlowlinkFiltersResponse = {
    setting_option: 'reception' | 'regexp',
    pattern_settings: {
        target: {
            data_name: string,
            data_types?: string[]
        },
        pass: boolean,
    }[],
};

構成

No	項目	説明
1	`setting_option`	フィルターを正規表現で行うか、データごとに行うかどうか
2	`pattern_settings`	フィルター設定オブジェクトの一覧

pattern_settins

No 項目説明

1 target 対象データを指定するためのパターン定義

2 pass 値を通すかどうかの判定用フラグ

target

No 項目説明

1 data_name 対象とするデータ名のパターンを示す正規表現

2 data_types 対象とするデータ型のリスト(省略/nullは任意の型にマッチ)

説明

コンポーネントが接続しているフローリンクに設定されたフィルターのデータ型です。 getFlowlinkFilterを使用した際に戻り値として取得できます。

No	項目	説明
1	`target`	集約対象となるソースとデータのパターン
2	`raw_data`	未加工データの利用有無
3	`typical_value`	代表値の設定。最新値(newer)または最古値(older)
4	`basic_statistics`	基本統計データ

No	項目	説明
1	`source_name`	対象とするコンポーネント名のパターンを示す正規表現
2	`data_name`	対象とするデータ名のパターンを示す正規表現
3	`data_types`	対象とするデータ型のリスト(省略/nullは任意の型にマッチ)

No	項目	説明
1	`window_type`	ウィンドウ種別
2	`time_span`	検索時間幅(ナノ秒)
3	`columns`	対象とするデータ情報の一覧
4	`max_duration`	ウィンドウの最大時間幅(ナノ秒)

No	項目	説明
1	`source_name`	外部イベントのカラムを生成するコンポーネント名
2	`data_name`	外部イベントのカラム名(bool型のみ有効)
3	`pre_event_time`	プレイベント時間(ナノ秒)
4	`post_event_time`	ポストイベント時間(ナノ秒)

No	項目	説明
1	`specify_columns`	並び順と出力名
2	`order_type`	指定外のデータの並び順

No	項目	説明
1	`source_name`	コンポーネント名
2	`data_name`	データ名
3	`outputname`	カラムに付与する出力名

No	項目	説明
3	`value`	値
4	`timestamp`	タイムスタンプ（ナノ秒）
1	`name`	データ名
2	`source`	コンポーネント名
5	`data_type`	データ型
6	`data_array`	配列数

No	項目	説明
1	`target`	対象データを指定するためのパターン定義
2	`pass`	値を通すかどうかの判定用フラグ