ブロック定義とは

ブロック定義は、カスタム ブロックを定義するオブジェクトです。たとえば、ブロックの外観（テキスト、フィールド、接続、色など）と動作（ブロックレベルのイベント ハンドラなど）を定義します。

たとえば、次のブロックです。

string_length ブロック。

は、次のように JSON または JavaScript で定義できます。

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

defineBlocksWithJsonArray は、JSON オブジェクトからブロック定義を作成します。

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

JavaScript を使用する場合は、ブロック定義を直接作成します。

ブロック定義の仕組み

ブロック定義は、関数値プロパティを含むミックスインです。新しいブロックがインスタンス化されると、これらのプロパティは新しく作成されたブロック オブジェクトにコピーされます。Blockly はこれらの関数を呼び出して、カスタム動作を呼び出します。

定義関数はブロック オブジェクトに混在するためです。

  • 定義関数の this キーワードは、ブロック オブジェクトを参照します。つまり、Block（または BlockSvg）クラスのパブリック メソッドとプロパティにアクセスできます。

Blockly には、ブロックのカスタマイズに使用できる関数がいくつか定義されています。最も一般的なブロックは init です。Blockly はブロックの初期化時にこのブロックを呼び出し、ブロックの外観を定義するために使用します。完全なリストについては、Block クラスと BlockSvg クラスの関数値プロパティをご覧ください。これらのプロパティは、ブロック定義が実装するインターフェースを形成します。これらはすべて省略可能です。

ブロック定義にはカスタム関数を含めることもできます。ただし、Blockly はこれらの関数を直接呼び出すことはありません。代わりに、他の関数を実装するために使用できます。たとえば、ブロックレベルのイベント ハンドラ（Block.onchange プロパティ）は、異なるイベントを異なるカスタム関数に委任できます。

ブロック定義を作成する方法

ブロック定義の作成方法はいくつかあります。

  • Blockly デベロッパー ツールを使用して、ブロックの外観を定義します。生成された JSON または JavaScript をコードにコピーし、必要に応じてカスタムコードを追加します。詳しくは、Blockly デベロッパー ツールをご覧ください。
  • 類似のブロックを見つけて定義をコピーし、必要に応じて変更します。詳細については、既存の定義を変更するをご覧ください。
  • ブロック定義を手書きで記述します。詳細については、JSON と JavaScript をご覧ください。