UiFlow Block Maker
作れるブロックは2種類
Value
ブロックのコードを実行した結果の値を返す
Execute
ブロックのコードを実行する
どちらのブロックも引数を取れる
引数の型は4種類
Label
ブロックに表示される。複数あっても問題ない。
String
文字列をブロックに入力する
Number
数値をブロックに入力する
Variable
値を返すブロック（変数など）の値が入る
ブロックのコードで引数を参照する場合は${引数名}を使う
UiFlow Block Makerがつらいところ
ボタンが増えると画面からはみだす。保存や読み込みのためのボタンが押せなくなる。
画面がレスポンシブになってない
一度作ったボタンを並び替えられない
m5bファイルをいじるとできる
m5bファイルを読み込むとたまにラベルが表示されないm5bファイルが生成される
ボタンをすべて選択して表示しなおすと生成し直されて元に戻る
コードの差分がわからない
m5bファイルはJSONファイルを1つの文字列として扱っている。MicroPythonのコードも文字列になっている。
m5bファイルの構造
改行のないJSON
内部ブロック名は__Namespaceに指定した文字列（category）_ブロック名になる
NamespaceがATOM_Babiesでブロック名がinitAtomBabiesの場合
__ATOM_BabIes_initAtomBabiesが内部的なブロック名
全体の構造
code:sample.m5b
{
"category": "", // Namespaceに指定した文字列
"color": "", // Block Colorで指定した色
"blocks": [ // 内部ブロック名の配列。UiFlowのメニューにこの順に並ぶ
],
"jscode": "", // 全てのブロックのコード（JavaScript）。改行は\nに置き換えられた文字列
// Block Makerの右のペインに表示し，UiFlowでブロック定義するのに使用
/* 以下はUiFlow Block Maker用 */
"code": { // 各ブロックのコード（JavaScript）。ブロック名がキー，コードが値
"ブロック名": [
"JavaScriptのコード"，
"microPythonのコード"， // Block Codeの内容
],
...
}
}
"code"はUiFlow Block MakerでBlock Codeフィールドに表示するためのもので，UiFlowで読み込むときには使われていないようだ。
Valueブロックの構造
ネームスペース
sample
ブロック名
valueBlock
引数
label
Label型
str
String型
num
Number型
v
Variable型
生成されるJavaScriptコード
コメントについて
/* */は私のコメント
//は自動生成されるコメント
code:value_block.js
// Block __sample_valueBlock
var __sample_valueBlock_json = {
"output": null,
/* 1番目の引数：Label */
"message0": "%1", /* argsの要素の数だけ並べる。args0は要素が1なので"%1" */
"args0": [
{
"type": "field_label",
"text": "label"
}
],
/* 2番目の引数：String */
'message1": "%1 %2",
"args1": [
{
"type": "field_label",
"text": "str"
},
{
"type": "field_input",
"text": "",
"spellcheck": false,
"name": "str"
}
],
/* 3番目の引数：Number */
"message2": "%1 %2",
"args2": [
{
"type": "field_label",
"text": "num"
},
{
"type": "field_number",
"value": 0,
"name": "num"
}
],
/* 4番目の引数：Variable */
"message3": "%1 %2",
"args3": [
{
"type": "field_label",
"text": "v"
},
{
"type": "input_value",
"name": "v"
}
],
"colour": "#333333" /* Block Colorに指定した色。キーはcolorではないので注意 */
};
init: function() {
this.jsonInit(__sample_valueBlock_json);
}
};
var str = block.getFieldValue('str');
var num = block.getFieldValue('num');
var v = Blockly.Python.valueToCode(block, 'v', Blockly.Python.ORDER_NONE);
/* ブロックのコードはヒアドキュメントで変数（${str}など）を展開した文字列を返す */
return [ブロックのコード, Blockly.Python.ORDER_CONDITIONAL]
};
Executeブロック
ネームスペース
sample
ブロック名
valueBlock
引数
label
Label型
str
String型
num
Number型
v
Variable型
生成されるJavaScriptコード
コメントについて
/* */は私のコメント
//は自動生成されるコメント
code:exec_block.js
// Block __sample_execBlock
var __sample_execBlock_json = {
"previousStatement": null,
"nextStatement": null,
/* 1番目の引数：Label */
"message0": "%1",
"args0": [
{
"type": "field_label",
"text": "label"
}
],
"message1": "%1 %2",
"args1": [
{
"type": "field_label",
"text": "str"
},
{
"type": "field_input",
"text": "",
"spellcheck": false,
"name": "str"
}
],
"message2": "%1 %2",
"args2": [
{
"type": "field_label",
"text": "num"
},
{
"type": "field_number",
"value": 0,
"name": "num"
}
],
"message3": "%1 %2",
"args3": [
{
"type": "field_label",
"text": "v"
},
{
"type": "input_value",
"name": "v"
}
],
"colour": "#333333" /* Block Colorに指定した色。キーはcolorではないので注意 */
};
init: function() {
this.jsonInit(__sample_execBlock_json);
}
};
var str = block.getFieldValue('str');
var num = block.getFieldValue('num');
var v = Blockly.Python.valueToCode(block, 'v', Blockly.Python.ORDER_NONE);
return ブロックのコード + "\n";
};