Blocklyでずっとブロックを作成する

ビジュアルプログラミングのMakeCodeにあるずっとブロックをBlocklyでも作成してみます。

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

上記のような構成にし、

ブロックの間に更にブロックを挿入できるようにします。

---

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

~/workspace/blockly/custom.js

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

Blockly.Blocks['forever'] = {
	init: function() {
		this.appendStatementInput("NAME")
		  .setCheck(null)
		  .appendField("ずっと");
		this.setColour(230);
		this.setTooltip("");
		this.setHelpUrl("");
	}
};

と

javascript.javascriptGenerator.forBlock['forever'] = function(block, generator) {
	var statements_name = generator.statementToCode(block, 'NAME');
	var code = 'for(;;){\n'+statements_name+'}\n';
	return code;
};

にします。

statements_nameを挟むようにコードを作成することで、繰り返しの処理にすることが出来ます。

※toolboxにforeverブロックを追加するための編集内容は省略します

---

サーバを起動して、ブラウザを開き動作を確認してみます。

このようにブロックを組むと、

for(;;){
	window.alert('hello');
	(function(ms) {
		var start = Date.now();
		while(Date.now() - start < ms){

		}
	})(5000);
}

※ n秒待つのブロックから出力されるコードは可読性の向上の為に整形しています。

意図通りのコードになりました。