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 はフィールドを左に揃えます。