Blocklyで初期値付きのブロックを設置する

更新日：2025-01-18

今回は上のブロックのようにcontrols_repeat_extに初期値付きのmath_numberブロックをはめ込んだブロックを選択できるようにします。

最初にcontrols_repeat_extブロックに初期値無しのmath_numberを組み込んだものを設置しています。

---

はじめにBlocklyを試してみようで作成しましたブロックリストのコードをcontrols_repeat_extのみを設置するように改修してみます。

const toolbox = {
	"kind": "flyoutToolbox",
	"contents": [
		{
			"kind": "block",
			"type": "controls_repeat_ext"
		}
	]
}

上記の状態では、

になっています。

---

続いて、初期値無しのmath_numberブロックを組み込んでみます。

スクリプトを

const toolbox = {
	"kind": "flyoutToolbox",
	"contents": [
		{
			"kind": "block",
			"type": "controls_repeat_ext",
			"inputs": {
				"TIMES": {
					"block": {
						"type": "math_number"
					}
				}
			}
		}
	]
}

のように改修します。

ブラウザの方で表示を確認してみると、

になっています。

inputs属性値を追加したことで、math_numberブロックが組み込まれた状態になっています。

スクリプトの方では◯回繰り返すの箇所にはTIMESという引数を指定することになっています。

引数名の確認方法は、blockly/blocks/loops.ts at develop · google/blocklyでcontrols_repeat_extの定義に記載されていますname属性の値を調べます。

上記ページでcontrols_repeat_extの箇所をピックアップしてみると、

{
	'type': 'controls_repeat_ext',
	'message0': '%{BKY_CONTROLS_REPEAT_TITLE}',
	'args0': [
		{
			'type': 'input_value',
			'name': 'TIMES',
			'check': 'Number',
		},
	],
	'message1': '%{BKY_CONTROLS_REPEAT_INPUT_DO} %1',
	'args1': [
		{
		'type': 'input_statement',
		'name': 'DO',
		},
	],
	'previousStatement': null,
	'nextStatement': null,
	'style': 'loop_blocks',
	'tooltip': '%{BKY_CONTROLS_REPEAT_TOOLTIP}',
	'helpUrl': '%{BKY_CONTROLS_REPEAT_HELPURL}',
}

になっています。

args0内のname属性の値のTIMESが今回に引数名に該当します。

---

続いて、controls_repeat_extに組み込みましたmath_numberブロックの初期値を設定します。

スクリプトを下記のように書き換えます。

const toolbox = {
	"kind": "flyoutToolbox",
	"contents": [
		{
			"kind": "block",
			"type": "controls_repeat_ext",
			"inputs": {
				"TIMES": {
					"block": {
						"type": "math_number",
						"fields": {
							"NUM": 10
						}
					}
				}
			}
		}
	]
}

変更後にブラウザで表示を確認してみますと、組み込みましたmath_numberの値が10になっています。

"fields": {
	"NUM": 10
}

ですが、NUMは先程と同様、blocklyのコードから調べます。

blockly/blocks/math.ts at develop · google/blocklyからmath_numberブロックの定義をピックアップしてみます。

{
	'type': 'math_number',
	'message0': '%1',
	'args0': [
		{
			'type': 'field_number',
			'name': 'NUM',
			'value': 0,
		},
	],
	'output': 'Number',
	'helpUrl': '%{BKY_MATH_NUMBER_HELPURL}',
	'style': 'math_blocks',
	'tooltip': '%{BKY_MATH_NUMBER_TOOLTIP}',
	'extensions': ['parent_tooltip_when_inline'],
}

math_numberの入力フォームの引数名がNUMであることがわかります。