カスタム ブロックを追加

Blockly では多数の標準ブロックが定義されていますが、ほとんどのアプリでは、少なくともいくつかのドメイン関連ブロックを定義して実装する必要があります。

ブロックは次の 3 つのコンポーネントで構成されます。

  • ブロック定義オブジェクト: テキスト、色、フィールド、接続など、ブロックの外観と動作を定義します。
  • ツールボックス リファレンス: ツールボックス XML 内のブロックタイプへの参照。ユーザーがワークスペースに追加するために使用します。
  • ジェネレータ関数: このブロックのコード文字列を生成します。ターゲット言語が JavaScript でない場合でも、常に JavaScript で記述されます。

ブロックの定義

ウェブ向けの Blockly は、スクリプト ファイルを介してブロックを読み込みます。blocks/ ディレクトリには、標準ブロック用のそのような例がいくつか含まれています。ブロックが既存のカテゴリに当てはまらない場合は、新しい JavaScript ファイルを作成します。この新しい JavaScript ファイルは、エディタの HTML ファイルの <script ...> タグのリストに含める必要があります。

一般的なブロック定義は次のようになります。

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

  • string_length: ブロックのタイプ名です。すべてのブロックが同じ名前空間を共有しているため、カテゴリ（この場合は string）の後にブロックの関数（この場合は length）を付けた名前を使用することをおすすめします。

  • init: この関数はブロックの外観を定義します。

これにより、次のブロックが定義されます。

「string_length」ブロック。

ブロック定義の詳細については、ブロックを定義するをご覧ください。

JSON 配列

JSON ブロック定義の配列を使用して、複数のブロックを一度に定義できます。

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

ツールボックス リファレンスを追加

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

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

詳しくは、ツールボックスのガイドをご覧ください。

ブロックコード ジェネレータを追加する

最後に、ブロックをコードに変換するために、ブロックをジェネレータ関数とペアにします。ジェネレータは目的の出力言語に固有のものですが、標準のジェネレータは通常次の形式になります。

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

ジェネレータ関数は、処理するブロックへの参照を受け取ります。入力（上記の VALUE 入力）をコード文字列にレンダリングし、それらをより大きな式に連結します。

→ ブロックコード ジェネレータの詳細