バリデータ

バリデータは、フィールドの新しい値を受け取り、その値に対して処理を行う関数です。フィールドをカスタマイズする簡単な方法です。これらを使用すると、フィールドの値が変更されたときに機能をトリガーしたり、入力を変更したり、受け入れ可能な値を制限したりできます。

一般的な例を以下に示します。

  • テキスト フィールドで文字のみを受け付けるように制限する。
  • テキスト フィールドが空でないことを必須にする。
  • 日付が将来の日付であることを要求します。
  • プルダウンに基づいてブロックの形状を変更する。

検証ツールの種類

バリデータは、その種類に応じて異なるタイミングで実行されます。

クラス バリデータはフィールド型のクラス定義の一部であり、通常はフィールドで許可される値の型を制限するために使用されます（たとえば、数値フィールドでは数値文字のみが受け入れられます）。クラス バリデータは、フィールドに渡されたすべての値（コンストラクタに渡された値を含む）に対して実行されます。

クラス バリデーターの詳細については、カスタム フィールドの作成のクラス バリデーターの実装をご覧ください。

ローカル バリデータは、フィールドの構築時に定義されます。ローカル バリデータは、フィールドに渡されるすべての値（コンストラクタに渡される値を除く）に対して実行されます。つまり、次の環境で実行されます。

  • XML に含まれる値。
  • setValue に渡される値。
  • setFieldValue に渡される値。
  • ユーザーが変更した値。

クラス バリデータは、ゲートキーパーのように機能するため、ローカル バリデータよりも前に実行されます。値を渡す前に、値の型が正しいことを確認します。

値の検証の順序と値全般の詳細については、値をご覧ください。

ローカル バリデーターを登録する

ローカル バリデータは次の 2 つの方法で登録できます。

  • フィールドのコンストラクタに直接追加されます。
Blockly.Blocks['validator_example'] = {
  init: function() {
    // Remove all 'a' characters from the text input's value.
    var validator = function(newValue) {
      return newValue.replace(/\a/g, '');
    };

    this.appendDummyInput()
        .appendField(new Blockly.FieldTextInput('default', validator));
  }
};

Blockly.Blocks['validator_example'] = {
  init: function() {
    // Remove all 'a' characters from the text input's value.
    var validator = function(newValue) {
      return newValue.replace(/\a/g, '');
    };

    var field = new Blockly.FieldTextInput('default');
    field.setValidator(validator);

    this.appendDummyInput().appendField(field);
  }
};

上記のいずれかのメソッドを 拡張機能でラップして、JSON 形式をサポートできます。

フィールドの値は、検証するフィールドのタイプによって大きく異なる場合があります（たとえば、数値フィールドには数値が保存され、テキスト入力フィールドには文字列が保存されます）。そのため、バリデーターを作成する前に、特定のフィールドのドキュメントを読むことをおすすめします。

戻り値

バリデータの戻り値によって、フィールドの次の動作が決まります。次の 3 つの可能性があります。

変更された戻り値

変更された値または異なる値。これがフィールドの新しい値になります。これは、末尾の空白を削除するなど、値をクリーンアップするためによく使用されます。

変更バリデーターの例:

// Remove all 'a' characters from the text input's value.
var validator = function(newValue) {
  return newValue.replace(/\a/g, '');
};

変更バリデータを含むテキスト入力フィールド

Null 戻り値

Null。指定された値が無効であることを意味します。ほとんどの場合、このフィールドは入力値を無視します。正確な動作は、フィールドの doValueInvalid_ 関数で指定されます。

Nulling Validator の例:

// Any value containing a 'b' character is invalid.  Other values are valid.
var validator = function(newValue) {
  if (newValue.indexOf('b') != -1) {
    return null;
  }
  return newValue;
};

nulling 検証ツールを含むテキスト入力フィールド

未定義の戻り値

未定義（または return ステートメントがない）か、入力値。これは、入力値がフィールドの新しい値になることを意味します。これらのタイプのバリデーターは、通常、変更リスナーとして機能します。

リスナー バリデータの例:

// Log the new value to console.
var validator = function(newValue) {
  console.log(newValue);
};

表示されるテキストが必ずしもフィールドの値を反映しているとは限らないことに注意してください。

この値

バリデータ内の this は、ブロックではなくフィールドを参照します。バリデーター内のブロックにアクセスする必要がある場合は、getSourceBlock 関数を使用します。bind 関数を使用して、バリデーターが呼び出されるコンテキストを設定することもできます。

getSourceBlock を使用したサンプルコード:

Blockly.Blocks['colour_match'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldColour(
            null, this.validate
        ), 'COLOUR');
    this.setColour(this.getFieldValue('COLOUR'));
  },

  validate: function(colourHex) {
    this.getSourceBlock().setColour(colourHex);
  }
};

bind を使用したサンプルコード:

Blockly.Blocks['colour_match'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldColour(
          null, this.validate.bind(this)
      ), 'COLOUR');
    this.validate(this.getFieldValue('COLOUR'));
  },

  validate: function(colourHex) {
    this.setColour(colourHex);
  }
};