Blocklyでツールボックスのブロックをカテゴリ分けしてみる

更新日：2024-03-06

Blocklyでアプリの開発を進めていくと、ツールボックス(上の画像の画面左)にたくさんのブロックが並び、ブロックの選択が大変になります。

そこでブロックのカテゴリ分けをしてみます。

次にBlocklyを試してみようで作成しましたツールボックスのコードを下記のようにします。

const toolbox = {
	"kind": "categoryToolbox",
	"contents": [
		{
			"kind": "category",
			"name": "Control",
			"contents": [
				{
					"kind": "block",
					"type": "controls_if"
				},
				{
					"kind": "block",
					"type": "controls_repeat_ext"
				},
			]
		},
		{
			"kind": "category",
			"name": "Math",
			"contents": [
				{
					"kind": "block",
					"type": "math_number"
				},
			]
		},
		{
			"kind": "category",
			"name": "Text",
			"contents": [
				{
					"kind": "block",
					"type": "text"
				},
				{
					"kind": "block",
					"type": "text_print"
				}
			]
		},
		{
			"kind": "category",
			"name": "Custom",
			"contents": [
				{
					"kind": "block",
					"type": "sleep",
					"inputs": {
						"SEC": {
							"block": {
								"type": "math_number",
								"fields": {
									"NUM": 1
								}
							}
						}
					}
				},
			]
		},
	]
}

※今までの説明文で使用しなかったブロックも含めています。

今までと異なる箇所は

const toolbox = {
	"kind": "categoryToolbox",
	"contents": [
		// contentsの内容は省略
	]
}

toolboxのkind(種類)をcategoryToolboxに指定して、

{
	"kind": "category",
	"name": "Control",
	"contents": [
		{
			"kind": "block",
			"type": "controls_if"
		},
		{
			"kind": "block",
			"type": "controls_repeat_ext"
		},
	]
},

contentsの値で、最初にcategoryを指定して、categoryのcontentsとして、各種ブロックのオブジェクトを配列の形で指定します。