カスタム ブロックの概要

Blockly には、数学関数からループ構造まで、多数の定義済みブロックが用意されています。ただし、ほとんどのアプリケーションでは、ドメインのカスタム ブロックを定義して実装する必要があります。たとえば、描画アプリでは線や円を描画するブロックが必要になる場合があります。また、ロボット アプリでは、アームを動かしてクローを操作するブロックが必要になる場合があります。

新しいタイプのブロックを定義して使用するには、次の 3 つが必要です。

  • ブロック定義: ブロックタイプの外観と特定の動作を定義します。
  • ブロックコード ジェネレーター: このタイプのブロックのコード文字列を生成します。ターゲット言語が JavaScript でない場合でも、常に JavaScript で記述されます。
  • ツールボックスの参照: ツールボックス内のブロックタイプへの参照。ユーザーはこれをワークスペースに追加できます。

ブロック定義

ブロック定義では、ブロックの外観（テキスト、フィールド、接続、色など）を定義します。ブロック固有のイベント ハンドラなど、ブロック固有の動作を定義することもできます。たとえば、次のブロックです。

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"
}]);

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 を生成する生成ツールは次のとおりです。

javascriptGenerator.forBlock['string_length'] = function(block, generator) {
   // String or array length.
   var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
   return [argument0 + '.length', Order.MEMBER];
};

ジェネレータ関数は、処理中のブロックと言語ジェネレータを受け取ります。入力に接続されているブロック（例の VALUE 入力など）とフィールドのコードが生成され、生成された文字列が連結されて大きな式になります。

詳細については、ブロックコード生成ツールをご覧ください。

ツールボックスのリファレンス

ブロックタイプを定義したら、タイプ名を使用してツールボックスで参照します。

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

詳細については、フライアウト ツールボックスを定義するまたはカテゴリ ツールボックスを定義するをご覧ください。