Blocklyで繋がっていないブロックを実行の対象外にする

更新日：2025-01-19

上のようにブロックを作成した時、helloとhogeの繰り返しが繋がっていなくても、コードを実行する時に繋がって実行しているように見えるのは分かりにくくてよろしくありません。

コードの可読性を上げる為にいくつか工夫をしてみます。

---

Blocklyでコードを実行してみようで作成したコードを下記のように改修してみます。

~/workspace/blockly/index.html

var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

を

var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

workspace.addChangeListener(Blockly.Events.disableOrphans);

のようにコードを一行追加すると、繋がっていないブロックは実行の対象外となります。

コードを変更した後、ブラウザの方で動作を確認してみますと、

どちらのブロックも実行の対象外となってしまいました。

---

ブロックを実行するためには開始用のブロックを作成する必要があります。

Blocklyのカスタムブロックを作ってみるで記載されているBlockly Developer Toolsを開き、開始用のブロックを作成します。

上記のような構成にし、

のような下向きの突起のあるブロックを作成します。

下向きの突起をつけるには ↓ bottom connectionを選択しておきます。

---

続いて、作成中のコードに今回のブロックに関するコードを組み込みます。

~/workspace/blockly/custom.js

に下記のコードを組み込みます。

Blockly.Blocks['start'] = {
	init: function() {
		this.appendDummyInput()
		  .appendField("スタート");
		this.setNextStatement(true, null);
		this.setColour(230);
		this.setTooltip("");
		this.setHelpUrl("");
	}
};

と

javascript.javascriptGenerator.forBlock['start'] = function(block, generator) {
	var code = '// This block is a starting block.\n';
	return code;
};

今回の開始用のブロックでは、実行時にJavaScriptの意味のあるコードがありませんので、適当にコメントを入れておきます。

Blocklyでツールボックスのブロックをカテゴリ分けしてみるの内容に従って、開始用のブロックを配置します。

const toolbox = {
	kind: "categoryToolbox",
	contents: [
		/** 途中省略 **/
		{
			kind: "category",
			name: "Custom",
			contents: [
				/** 途中省略 **/
				{
					kind: "block",
					type: "start",
				},
			],
		},
	],
}

上のキャプチャのように開始用ブロックが付いている方のみ繋がったことになり、実行の対象となりました。

---

今回の内容では、説明書がない限り必ず開始用ブロックをしようしなければならないということが分かりにくくて操作性が落ちてしまいます。

そこで、

ブラウザで実行した時に予めスタートブロックを設置しておくようにしてみます。

~/workspace/blockly/index.html

を下記のように修正します。

var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

を

var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
Blockly.serialization.workspaces.load({"blocks":{"blocks":[{"type":"start", "x":120, "y":50}]}}, workspace);

のように修正します。

Blockly.serialization.workspaces.load(ブロックの配置に関するJSON, workspace)

を挿入することで最初のブロックの配置を指定できます。

JSONの構造は

{
	"blocks": {
		"blocks": [
			/** 配置したいブロック毎にオブジェクトを追加 **/
			{
				"type":"start", 
				"x":120, 
				"y":50
			}
		]
	}
}

になります。