ブロック定義とは

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

たとえば、次のブロックがあるとします。

`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 を使用する場合は、ブロック定義を直接作成します。

ブロック定義の仕組み

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

定義関数はブロック オブジェクトにミックスインされるため、

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

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

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

ブロック定義の作成方法

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

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