カスタム ブロックの概要

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>

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