動的カテゴリ

動的カテゴリは、開くたびに関数に基づいて動的に再入力されるカテゴリです。

Blockly では、登録された文字列キーを使用してカテゴリを関数に関連付けることで、これをサポートしています。この関数は、カテゴリのコンテンツ（ブロック、ボタン、ラベルなど）の定義を返す必要があります。コンテンツは JSON または XML として指定できますが、JSON をおすすめします。

また、この関数にはターゲット ワークスペースがパラメータとして渡されるため、動的カテゴリ内のブロックはワークスペースの状態に基づいて作成できます。

JSON

// Returns an array of objects.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    blockList.push({
      'kind': 'block',
      'type': 'colour_picker',
      'fields': {
        'COLOUR': colourList[i]
      }
    });
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

XML

// Returns an array of XML nodes.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    var block = document.createElement('block');
    block.setAttribute('type', 'colour_picker');
    var field = document.createElement('field');
    field.setAttribute('name', 'COLOUR');
    field.innerText = colourList[i];
    block.appendChild(field);
    blockList.push(block);
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

動的カテゴリ関数を文字列キーに関連付け（登録）したら、この文字列キーをカテゴリ定義の custom プロパティに割り当てて、カテゴリを動的にすることができます。

JSON

{
  "kind": "category",
  "name": "Colours",
  "custom": "COLOUR_PALETTE"
}

XML

<category name="Colours" custom="COLOUR_PALETTE"></category>

組み込みの動的カテゴリ

Blockly には、3 つの組み込み動的カテゴリがあります。

• 'VARIABLE' は、型なし変数のカテゴリを作成します。
• 'VARIABLE_DYNAMIC' は、型付き変数のカテゴリを作成します。文字列、数値、色を作成するボタンがあります。

• 'PROCEDURE' は、関数ブロックのカテゴリを作成します。

JSON

{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE"
},
{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE_DYNAMIC"
},
{
  "kind": "category",
  "name": "Functions",
  "custom": "PROCEDURE"
}

XML

<category name="Variables" custom="VARIABLE"></category>
<category name="Variables" custom="VARIABLE_DYNAMIC"></category>
<category name="Functions" custom="PROCEDURE"></category>

注: Blockly のコードベース全体で「プロシージャ」という単語が使用されていますが、生徒にとってわかりやすいのは「関数」という単語です。不一致が生じてしまい、申し訳ございません。