チェックボックス フィールド

チェックボックス フィールドは、値を文字列として、テキストを文字列として保存します。値は 'TRUE' または 'FALSE' で、テキストは 'true' または 'false' です。

チェックボックス フィールド

「checkbox:」というラベルの付いたブロックと、チェックマークの付いたチェックボックス フィールド。

折りたたまれたブロックのチェックボックス フィールド

折りたたまれた後の同じブロック。ラベルは「variable: true」で、右端がギザギザになっており、折りたたまれていることを示しています。

作成

JSON

{
  "type": "example_checkbox",
  "message0": "checkbox: %1",
  "args0": [
    {
      "type": "field_checkbox",
      "name": "FIELDNAME",
      "checked": true
    }
  ]
}

JavaScript

Blockly.Blocks['example_checkbox'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('checkbox:')
        .appendField(new Blockly.FieldCheckbox(true), 'FIELDNAME');
  }
};

チェックボックスのコンストラクタは、オプションの値とオプションのバリデータを受け取ります。省略可能な値は 'TRUE'、'FALSE'、またはブール値にする必要があります。それ以外の場合は、デフォルトの false になります。

シリアル化

JSON

チェックボックス フィールドの JSON は次のようになります。

{
  "fields": {
    "FIELDNAME": true
  }
}

ここで、FIELDNAME はチェックボックス フィールドを参照する文字列で、値はフィールドに適用する値です。値はブール値にする必要があります。

XML

チェックボックス フィールドの XML は次のようになります。

<field name="FIELDNAME">TRUE</field>

または

<field name="FIELDNAME">true</field>

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

逆シリアル化と再シリアル化の後、すべての内部テキスト値が大文字（'TRUE' または 'FALSE'）になることに注意してください。これは、ワークスペースを比較する際に重要になることがあります。

カスタマイズ

チェックマーク文字

Blockly.FieldCheckbox.CHECK_CHAR プロパティを使用すると、チェックマークの見た目を変更できます。値は Unicode 文字を含む文字列にする必要があります。

チェックマークの代わりにハートが付いたチェックボックス フィールド

CHECK_CHAR プロパティはデフォルトで \u2713 または ✓ に設定されています。

これはグローバル プロパティであるため、設定するとすべてのチェックボックス フィールドが変更されます。

チェックボックス バリデーターの作成

チェックボックス フィールドの値は 'TRUE' または 'FALSE' のいずれかであるため、検証ツールはこれらの値（文字列）を受け取り、'TRUE'、'FALSE'、null、または undefined を返す必要があります。

チェックボックスがオンになっているかどうかに基づいてテキスト入力フィールドを非表示または表示するバリデーターの例を次に示します。

  validate: function(newValue) {
    var sourceBlock = this.getSourceBlock();
    sourceBlock.showTextField_ = newValue == 'TRUE';
    sourceBlock.updateTextField();

    return newValue;
  },

  updateTextField: function() {
    var input = this.getInput('DUMMY');
    if (this.showTextField_ && !this.getField('TEXT')) {
      input.appendField(new Blockly.FieldTextInput(), 'TEXT');
    } else if (!this.showTextField_ && this.getField('TEXT')) {
      input.removeField('TEXT');
    }
  }

バリデータ付きチェックボックス フィールド

チェックボックスがオンになっている様子を示すアニメーション GIF。チェックボックスがオンの場合、テキスト フィールドが表示されます。