【Google Blocklyを使って遊ぼう】list_blocks.jsonのブロック
Blocklyに最初から組み込まれているブロックが沢山あります。
今回はlist_blocks.jsonに定義されているブロックについて説明します。
このファイルには配列を操作するブロックが定義されています。
lists_create_empty
lists_create_emptyは変数に空の配列を生成するブロックです。また、このブロックには一つの出力端子が存在し、この端子に入れたブロックの内容が変数が初期化されます。
lists_create_emptyの定義
{
"type": "lists_create_empty",
"message0": "create empty list",
"output": "Array",
"colour": 260,
"tooltip": "Returns a list, of length 0, containing no data records.",
"helpUrl": "https://github.com/google/blockly/wiki/Lists#create-empty-list"
}
lists_create_emptyの生成コード
[出力端子] = [];
lists_repeat
lists_repeatは任意の値を用い、任意の要素数の配列を初期化するブロックです。このブロックには2つの入力端子があります、1つ目の入力端子で初期化する値を決定します。
2つ目の入力端子で配列の要素数を決めます、この入力端子には数値ブロックが接続できます。
lists_repeatの定義
{
"type": "lists_repeat",
"message0": "create list with item %1 repeated %2 times",
"args0": [
{
"type": "input_value",
"name": "ITEM"
},
{
"type": "input_value",
"name": "NUM",
"check": "Number"
}
],
"inputsInline": true,
"output": "Array",
"colour": 260,
"tooltip": "Creates a list consisting of the given value repeated the specified number of times.",
"helpUrl": "https://github.com/google/blockly/wiki/Lists#create-list-with"
}
lists_repeatの生成コード
function listsRepeat(value, n) {
var array = [];
for (var i = 0; i < n; i++) {
array[i] = value;
}
return array;
}
[出力端子] = listsRepeat([1つ目の入力端子], [2つ目の入力端子]);
lists_length
lists_lengthは配列の要素数を取得するブロックです。このブロックには1つの入力端子があります、この入力端子に接続したブロックの長さを取得します。
lists_lengthの定義
{
"type": "lists_length",
"message0": "length of %1",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": ['String', 'Array']
}
],
"output": 'Number',
"colour": 260,
"tooltip": "Returns the length of a list.",
"helpUrl": "https://github.com/google/blockly/wiki/Lists#length-of"
}
lists_lengthの生成コード
[出力端子] = [1つ目の入力端子].length
lists_isEmpty
lists_isEmptyは配列が空かどうかを判定するブロックです。このブロックには1つの入力端子があります、この入力端子に接続したブロックが空かどうかを取得します。
lists_isEmptyの定義
{
"type": "lists_isEmpty",
"message0": "%1 is empty",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": ['String', 'Array']
}
],
"output": 'Boolean',
"inputsInline": true,
"colour": 260,
"tooltip": "Returns true if the list is empty.",
"helpUrl": "https://github.com/google/blockly/wiki/Lists#is-empty"
}
lists_isEmptyの生成コード
[出力端子] = ![入力端子].length;
lists_indexOf
lists_indexOfは配列の任意の要素を探すブロックです。このブロックには2つの入力端子があります、1つ目の入力端子は配列・文字列を指定します、2つ目の入力端子で捜査する値を決めます。
また、このブロックにはセレクボックスがあり、捜査する方向を決めます。
lists_indexOfの定義
{
"type": "lists_indexOf",
"message0": "in list %1 find %2 occurence of item %3",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "Array"
},
{
"type": "field_dropdown",
"name": "END",
"options": [
["first", "FIRST"],
["last", "LAST"]
]
},
{
"type": "input_value",
"name": "FIND"
}
],
"inputsInline": true,
"output": "Number",
"colour": 260,
"tooltip": "Returns the index of the first/last occurrence of the item in the list. Returns -1 if item is not found.",
"helpUrl": "https://github.com/google/blockly/wiki/Lists#getting-items-from-a-list",
"TODO(#379)": "https://github.com/google/blockly-android/issues/379"
}
lists_indexOfの生成コード
// セレクボックスでfirstを選択
[1つ目の入力端子].indexOf([2つ目の入力端子]);
// セレクボックスでlastを選択
[1つ目の入力端子].lastIndexOf([2つ目の入力端子]);
lists_getIndex
lists_getIndexは配列の任意の要素を取り出すブロックです。このブロックには2つの入力端子があります、1つ目の入力端子は配列・文字列を指定します。
2つ目の入力端子で取り出す配列の要素を決めます、この入力端子には数値ブロックが接続できます。
また、このブロックには2つのセレクボックスがあります、1つ目のセレクボックスで取得か取得後削除するかを設定し、 2つ目のセレクボックスで捜査する方向を決めます。
lists_getIndexの定義
{
"type": "lists_getIndex",
"message0": "in list %1 %2 %3 %4",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "Array"
},
{
"type": "field_dropdown",
"name": "MODE",
"options": [
["get", "GET"],
["get and remove", "GET_REMOVE"]
]
},
{
"type": "field_dropdown",
"name": "WHERE",
"options": [
["#", "FROM_START"],
["# from end", "FROM_END"]
]
},
{
"type": "input_value",
"name": "NAME",
"check": "Number"
}
],
"inputsInline": true,
"output": null,
"colour": 260,
"helpUrl": "https://github.com/google/blockly/wiki/Lists#getting-items-from-a-list",
"TODO(#380)": "https://github.com/google/blockly-android/issues/380",
"TODO(#381)": "https://github.com/google/blockly-android/issues/381",
"TODO(#383)": "https://github.com/google/blockly-android/issues/383"
}
lists_getIndexの生成コード
// 1つ目のセレクボックスで「 get 」・2つ目のセレクトボックスで「 # 」を選択
[出力端子] = [1つ目の入力端子][2つ目の入力端子];
// 1つ目のセレクボックスで「 get and remove 」・2つ目のセレクトボックスで「 # 」を選択
[出力端子] = [1つ目の入力端子].splice(0,1)[2つ目の入力端子];
// 1つ目のセレクボックスで「 get 」・2つ目のセレクトボックスで「 # from end 」を選択
[出力端子] = [1つ目の入力端子].slice(-1)[2つ目の入力端子];
// 1つ目のセレクボックスで「 get and remove 」・2つ目のセレクトボックスで「 # from end 」を選択
[出力端子] = [1つ目の入力端子].splice(-1,1)[2つ目の入力端子];
lists_setIndex
lists_setIndexは配列に任意の値を挿入するブロックです。このブロックには3つの入力端子があります、1つ目の入力端子は配列・文字列を指定します。
2つ目の入力端子で更新・挿入を行う位置を決めます、3つ目の入力端子で更新・挿入する値を決めます。
また、このブロックには2つのセレクボックスがあります、1つ目のセレクボックスで更新か挿入するかを設定し、 2つ目のセレクボックスで捜査する方向を決めます。
lists_setIndexの定義
{
"type": "lists_setIndex",
"message0": "in list %1 %2 %3 %4 as %5",
"args0": [
{
"type": "input_value",
"name": "LIST",
"check": "Array"
},
{
"type": "field_dropdown",
"name": "MODE",
"options": [
["set", "SET"],
["insert at","INSERT"]
]
},
{
"type": "field_dropdown",
"name": "WHERE",
"options": [
["#", "FROM_START"],
["# from end","FROM_END"]
]
},
{
"type": "input_value",
"name": "AT",
"check": "Number"
},
{
"type": "input_value",
"name": "TO"
}
],
"inputsInline": true,
"previousStatement": null,
"nextStatement": null,
"colour": 260,
"helpUrl": "https://github.com/google/blockly/wiki/Lists#getting-a-sublist",
"TODO(#381)": "https://github.com/google/blockly-android/issues/381",
"TODO(#383)": "https://github.com/google/blockly-android/issues/383"
}
lists_setIndexの生成コード
// 1つ目のセレクボックスで「 set 」・2つ目のセレクトボックスで「 # 」を選択
[1つ目の入力端子][2つ目の入力端子] = [3つ目の入力端子];
// 1つ目のセレクボックスで「 set 」・2つ目のセレクトボックスで「 # from end 」を選択
[1つ目の入力端子][[1つ目の入力端子].length - (2つ目の入力端子 + 1 )] = [3つ目の入力端子]);
// 1つ目のセレクボックスで「 insert at 」・2つ目のセレクトボックスで「 # 」を選択
[1つ目の入力端子].splice([2つ目の入力端子],0,[3つ目の入力端子]);
// 1つ目のセレクボックスで「 insert at 」・2つ目のセレクトボックスで「 # from end 」を選択
[1つ目の入力端子].splice([1つ目の入力端子]..length - [2つ目の入力端子],0,[3つ目の入力端子]);
lists_getSublist
lists_getSublistは配列から指定した範囲の値を配列で切り出すブロックです。このブロックには3つの入力端子があります、1つ目の入力端子は配列・文字列を指定します。
2つ目の入力端子で開始位置を決めます、3つ目の入力端子で終端位置を決めます。
また、このブロックには2つのセレクボックスがあります、 1つ目のセレクボックスで2つ目の入力端子が指定した位置が前方からか後方からなのかを指定します、 2つ目のセレクボックスで3つ目の入力端子が指定した位置が前方からか後方からなのかを指定します。
lists_getSublistの定義
{
"type": "lists_getSublist",
"message0": "in list %1 get sub-list from %2 %3 to %4 %5",
"args0": [
{
"type": "input_value",
"name": "LIST",
"check": "Array"
},
{
"type": "field_dropdown",
"name": "WHERE1",
"options": [
["#", "FROM_START"],
["# from end","FROM_END"]
]
},
{
"type": "input_value",
"name": "AT1",
"check": "Number"
},
{
"type": "field_dropdown",
"name": "WHERE2",
"options": [
["#", "FROM_START"],
["# from end", "FROM_END"]
]
},
{
"type": "input_value",
"name": "AT2",
"check": "Number"
}
],
"inputsInline": true,
"output": "Array",
"colour": 260,
"tooltip": "Creates a copy of the specified portion of a list."
}
lists_getSublistの生成コード
// 1つ目のセレクトボックスで「 # 」を選択、2つ目のセレクトボックスで「 # 」を選択、
[1つ目の入力端子].slice([2つ目の入力端子], [3つ目の入力端子] + 1);
// 1つ目のセレクトボックスで「 # 」を選択、2つ目のセレクトボックスで「 # from end」を選択、
[1つ目の入力端子].slice([2つ目の入力端子],[1つ目の入力端子].length - [3つ目の入力端子]);
// 1つ目のセレクトボックスで「 # from end 」を選択、2つ目のセレクトボックスで「 # 」を選択、
[1つ目の入力端子].slice([1つ目の入力端子].length - [2つ目の入力端子] - 1, [3つ目の入力端子] + 1);
// 1つ目のセレクトボックスで「 # from end 」を選択、2つ目のセレクトボックスで「 # from end 」を選択、
[1つ目の入力端子].slice([1つ目の入力端子].length - [2つ目の入力端子] - 1, [1つ目の入力端子].length - [3つ目の入力端子]);
lists_sort
lists_sortは配列をソートするブロックです。このブロックには1つの入力端子があります、1つ目の入力端子は配列を指定します。
また、このブロックには2つのセレクボックスがあります、 1つ目のセレクボックスで数字でソートするか文字列でソートするかを指定します、 2つ目のセレクボックスで昇順・降順を指定します。
lists_sortの定義
{
"type": "lists_sort",
"message0": "sort %1 %2 %3",
"args0": [
{
"type": "field_dropdown",
"name": "TYPE",
"options": [
["numeric","NUMERIC"],
["alphabetic", "TEXT"],
["alphabetic, ignore case", "IGNORE_CASE"]
]
},
{
"type": "field_dropdown",
"name": "DIRECTION",
"options": [
["ascending", "1"],
["descending", "-1"]
]
},
{
"type": "input_value",
"name": "LIST",
"check": "Array"
}
],
"output": "Array",
"colour": 260,
"tooltip": "Sort a copy of a list.",
"helpUrl": "https://github.com/google/blockly/wiki/Lists#sorting-a-list"
}
lists_sortの生成コード
function listsGetSortCompare(type, direction) {
var compareFuncs = {
"NUMERIC": function(a, b) {
return parseFloat(a) - parseFloat(b);
},
"TEXT": function(a, b) {
return a.toString() > b.toString() ? 1 : -1;
},
"IGNORE_CASE": function(a, b) {
return a.toString().toLowerCase() > b.toString().toLowerCase() ? 1 : -1;
},
};
var compare = compareFuncs[type];
return function(a, b) { return compare(a, b) * direction; }
}
// 1つ目のセレクボックスで「 numeric 」を選択、2つ目のセレクボックスで「 ascending 」を選択
item.slice().sort(listsGetSortCompare("NUMERIC", 1));
// 1つ目のセレクボックスで「 alphabetic 」を選択、2つ目のセレクボックスで「 ascending 」を選択
item.slice().sort(listsGetSortCompare("TEXT", 1));
// 1つ目のセレクボックスで「 alphabetic,ignore case 」を選択、2つ目のセレクボックスで「 ascending 」を選択
item.slice().sort(listsGetSortCompare("IGNORE_CASE", 1));
// 1つ目のセレクボックスで「 numeric 」を選択、2つ目のセレクボックスで「 descending 」を選択
item.slice().sort(listsGetSortCompare("NUMERIC", -1));
// 1つ目のセレクボックスで「 alphabetic 」を選択、2つ目のセレクボックスで「 descending 」を選択
item.slice().sort(listsGetSortCompare("TEXT", -1));
// 1つ目のセレクボックスで「 alphabetic,ignore case 」を選択、2つ目のセレクボックスで「 descending 」を選択
item.slice().sort(listsGetSortCompare("IGNORE_CASE", -1));