カラー フィールド

色フィールドには文字列を value として格納し、文字列を text として格納します。value は #rrggbb という形式の文字列ですが、可能であれば text は #rgb という形式の文字列になります。

カラー フィールド

エディタを開いた状態の色フィールド

折りたたまれたブロックの色フィールド

動画を作成

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff4040",
      "colourOptions":
        ['#ff4040', '#ff8080', '#ffc0c0',
         '#4040ff', '#8080ff', '#c0c0ff'],
      "colourTitles":
        ['dark pink', 'pink', 'light pink',
         'dark blue', 'blue', 'light blue'],
      "columns": 3
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff4040',
            {
                "colourOptions":
                  ['#ff4040', '#ff8080', '#ffc0c0',
                   '#4040ff', '#8080ff', '#c0c0ff'],
                "colourTitles":
                  ['dark pink', 'pink', 'light pink',
                   'dark blue', 'blue', 'light blue'],
                "columns": 3
            }), 'FIELDNAME');
  }
};

色コンストラクタは、以下を受け取ります。

  • オプションの value
  • オプションのvalidator
  • オプション マップ:
    • colourOptions
    • colourTitles
    • columns

value は #rrggbb の形式の文字列にする必要があります。value が指定されていない場合、または指定された value が無効な場合は、デフォルトの色配列の最初のエントリが使用されます。

JSON で次のオプションを設定することもできます。

  • colourOptions
  • colourTitles
  • columns

または、JavaScript フックを使用して設定することもできます。

シリアル化

JSON

色フィールドの JSON は次のようになります。

{
  "fields": {
    "FIELDNAME": "#ff0000"
  }
}

ここで、FIELDNAME はカラー フィールドを参照する文字列で、値はフィールドに適用する値です。この値は、コンストラクタの値と同じルールに従います。

XML

色フィールドの XML は次のようになります。

<field name="FIELDNAME">#ff0000</field>

field ノードの name 属性にはカラー フィールドを参照する文字列が含まれ、ノードの内部テキストはフィールドに適用する値です。内部テキストの値はコンストラクタの値と同じルールに従います。

シリアル化解除と再シリアル化の後は、すべての内部テキスト値が #rrggbb の形式になることに注意してください。これは、ワークスペースの差分を取得する際に重要となることもあります。

カスタマイズ

エディタのオプション

setColours 関数を使用すると、色フィールドの色オプションを設定できます。#rrggbb 形式で定義する必要があるカラー文字列の配列と、オプションのツールチップの配列を受け取ります。ツールチップ配列が指定されていない場合は、デフォルトのツールチップ配列が使用されます。

ツールチップと色は、値ではなく配列インデックスに基づいて照合されます。色配列がツールチップ配列より長い場合、追加色のツールチップは #rrggbb 値になります。

setColumns 関数は、カラー選択ツール内の列数を設定します。

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "COLOUR",
      "colour": "#ff4040"
    }
  ],
  "extensions": ["set_colours_extension"]
}

Blockly.Extensions.register('set_colours_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours(
      ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
      ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
  });

これには、JSON 拡張機能を使用します。

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    var field = new Blockly.FieldColour('#ff4040');
    field.setColours(
        ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
        ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(field, 'COLOUR');
  }
};

カスタマイズされた色フィールド エディタ

必要に応じて、デフォルトの色、ツールチップ、列をグローバルにオーバーライドできます。つまり、特定のフィールドではなく、すべてのカラー フィールドに影響します。

Blockly.FieldColour.COLOURS = [
    '#ff4040', '#ff8080', '#ffc0c0',
    '#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
    'dark pink', 'pink', 'light pink',
    'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;

カラーバリデータを作成する

カラー フィールドの値は #rrggbb 形式文字列であるため、バリデータは #rrggbb 形式文字列を受け入れ、#rrggbb 形式文字列、null、または undefined を返す必要があります。

以下は、フィールドの色に合わせてブロックの色を変更するバリデータの例です。

function(newValue) {
  this.getSourceBlock().setColour(newValue);
  return newValue;
}

色フィールドに基づいて色が変わることをブロックする