5.1.4 カスタムUI作成

カスタムコンポーネントの設定画面の、パラメータの入力欄をカスタマイズすることができます。デフォルトでは、パラメータの入力欄は1つだけ存在し、そこに全てのパラメータを入力します。

これに対して、パラメータの入力欄としてどういった項目を配置するか、ユーザーが定義することができます。

5.1.4.1 定義ファイルの作成#

ここでは、カスタムUIの定義ファイルの作成方法について説明します。

5.1.4.1.1 作成方法#

次の手順で、カスタムUIの定義ファイルを作成することができます。

jsonファイルを作成します。
jsonファイル内に、"parameter_defines"という配列を定義します。

"parameter_defines"の中に、カスタムコンポーネントの画面に表示する入力要素を定義します。その他、"window_size"、"layout"など必要に応じて定義してください。

定義ファイル(json)

{
  "window_size": "auto",
  "parameter_defines": [
    {
      // 入力要素1
    },
    {
      // 入力要素2
    },
    {
      // 入力要素3
    }
    ...
  ]
}

画面に表示する入力要素は、以下の項目によって定義します。

項目	値の種類	必須	説明
window_size	string	×	ウィンドウのサイズ { "window_size" : "small" }のように指定 auto/指定なし - min-width: "400px" small - min-width: "33%" middle - min-width: "50%" large - min-width:"80%"
parameter_defines	object	○	項目の親要素（最上位の階層から１つ下の階層まで入れ子指定可能参考）
name	string	○	入力した値を設定ファイルに保持する際のキー
label	string	○	画面に表示される項目名
type	string	○	入力する値の種類を、以下の中から選択 string：文字列 number：整数 real：実数 select：選択肢
max	number	○	入力の上限 ※typeがnumber・realの場合のみ有効
min	number	×	入力の下限 ※typeがnumber・realの場合のみ有効
select	array	×	選択肢 ※1 typeがselectの場合のみ有効 ※2 選択肢は、"label"と"value"のプロパティを持つオブジェクト配列によって定義してください。例：[{ "label":"option1", "value":1}, { "label":"option2", "value":2}]
default	any	×	デフォルト値
require	bool	○	入力必須か否か
array	bool	×	配列化するか否か
layout	object	×	各項目の幅指定参考 { "layout" : { "col" : 2 }}のようにcolへ1～12を指定省略時はデフォルト6 array,object省略時はデフォルト12

5.1.4.1.2 サンプル#

カスタムUI定義ファイルのサンプルは次の通りです。

{
  "parameter_defines": [
    {
      "name": "host",
      "label": "ホスト",
      "type": "string",
      "default": "localhost",
      "require": true,
      "max":256
    },
    {
      "name": "port",
      "label": "ポート",
      "type": "number",
      "max": 65535,
      "min": 1,
      "default": "12",
      "require": true
    },
    {
      "name": "select",
      "label": "選択",
      "type": "select",
      "select": [
        { "label":"aaa", "value":1},
        { "label":"bbb", "value":2}
      ],
      "default": 1,
      "require": false
    }
  ]
}

次のようなレイアウトとなります。

サンプル１

5.1.4.2 入れ子を使ったサンプル#

カスタムUI定義ファイルの入れ子を使ったサンプルは次の通りです。

{
  "window_size": "middle",
  "parameter_defines": [
    {
      "name": "nested",
      "label": "入れ子",
      "type": "object",
      "array": true,
      "parameter_defines": [
        {
          "name": "name",
          "label": "波名",
          "type": "string",
          "require": true,
          "max": 32,
          "default": "signal_5"
        },
        {
          "name": "freq",
          "label": "周波数",
          "type": "select",
          "require": true,
          "select": [
            { "label": "1.0", "value": 1.0 },
            { "label": "2.0", "value": 2.0 }
          ],
          "default": 1.0
        },
        {
          "name": "amp",
          "label": "振幅",
          "type": "real",
          "require": true,
          "max": 100.0,
          "min": 0.1,
          "default": 1.0
        }
      ],
      "require": false,
      "default": [
        {
          "name": "signal_1",
          "freq": 1,
          "amp": 1.1
        },
        {
          "name": "signal_2",
          "freq": 2,
          "amp": 1.2
        }
      ]
    }
  ]
}

次のようなレイアウトとなります。

サンプル２

5.1.4.3 項目の幅を指定したサンプル#

カスタムUI定義ファイルの項目幅を指定したサンプルは次の通りです。

{
  "parameter_defines": [
    {
      "name": "item1",
      "label": "項目1",
      "type": "string",
      "require": false,
      "max": 32,
      "default": "こうもく１",
      "layout": {
        "col": 2
      }
    },
    {
      "name": "item2",
      "label": "項目2",
      "type": "real",
      "require": false,
      "max": 32,
      "default": "12.3",
      "mask": true,
      "layout": {
        "col": 4
      }
    },
    {
      "name": "item3",
      "label": "項目3",
      "type": "select",
      "require": false,
      "max": 32,
      "default": 2,
      "select": [
        { "label": "A", "value": 1},
        { "label": "B", "value": 2},
        { "label": "C", "value": 3}
      ],
      "layout": {
        "col": 6
      }
    }
  ]
}

次のようなレイアウトとなります。

サンプル３