JavaScript のブロック構造

このドキュメントでは、JavaScript を使用してブロックの入力とフィールド（ラベルを含む）を定義する方法について説明します。これらの用語に慣れていない場合は、先に進む前にブロックの構造をご覧ください。

入力、フィールド、接続は JSON で定義することもできます。

入力を追加する

JavaScript API には、append メソッドが各 入力 タイプに含まれています。

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

各 appendInput メソッドは識別子文字列を受け取ることができます。この文字列は、コード生成ツールが入力に接続されたブロックのコードを取得するために使用します。コード生成ツールがダミー入力と行末入力を参照することはほとんどないため、通常は識別子を割り当てる必要はありません。

JavaScript API には、カスタム入力を追加するための汎用 appendInput メソッドもあります。この場合、識別子はカスタム入力のコンストラクタに直接渡す必要があります。

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

すべての appendInput メソッド（汎用と非汎用の両方）は入力オブジェクトを返すため、メソッド チェーンを使用してさらに構成できます。入力を構成するために使用される組み込みメソッドは 3 つあります。

フィールドを追加する

入力が作成され、appendInput を使用してブロックに追加されたら、 必要に応じて任意の数の フィールドを 入力に追加できます。これらのフィールドは、各入力の用途を説明するラベルとしてよく使用されます。

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

最もシンプルなフィールドはラベルです。Blockly の慣例では、固有名詞（Google、SQL など）を除き、すべて小文字のテキストを使用します。

入力行には任意の数のフィールドを含めることができます。 複数の appendField 呼び出しを連結して、同じ入力行に複数のフィールドを効率的に追加できます。

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

appendField('hello') 呼び出しは、実際には明示的な FieldLabel コンストラクタ appendField(new Blockly.FieldLabel('hello')) を使用するためのショートカットです。 コンストラクタを使用するのは、ラベルを CSS ルールでスタイル設定できるようにクラス名を指定する場合のみです。

接続チェック

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

setCheck メソッドは、接続の型チェックに使用されます。デフォルトの引数 null が指定されている場合、この入力は任意のブロックに接続できます。 詳細については、接続 チェックをご覧ください。

フィールドを配置する

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

setAlign メソッドは、入力内のフィールドを配置するために使用されます。この関数には、Blockly.inputs.Align.LEFT、Blockly.inputs.Align.RIGHT、Blockly.inputs.Align.CENTER の 3 つの自己記述的な値を引数として渡すことができます。

ブロックが右から左のモード（アラビア語やヘブライ語など）でレンダリングされる場合、左と右が逆になります。したがって、Blockly.inputs.Align.RIGHT はフィールドを左に配置します。