【Google Blocklyを使って遊ぼう】text_blocks.jsonのブロック
Blocklyに最初から組み込まれているブロックが沢山あります。
今回はtext_blocks.jsonに定義されているブロックについて説明します。
このファイルには文字列を操作するブロックが定義されています。
textについて
textは文字列を出力するブロックです。また、このブロックには一つの入力フィールドが存在し、ここに入れた文字列が変数に代入されます。
何も設定されなかった場合は空文字(”)が出力されます。
textの定義
{
"type": "text",
"message0": "%1 %2 %3",
"args0": [
{
"type": "field_image",
"src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAQAAAAqJXdxAAAAn0lEQVQI1z3OMa5BURSF4f/cQhAKjUQhuQmFNwGJEUi0RKN5rU7FHKhpjEH3TEMtkdBSCY1EIv8r7nFX9e29V7EBAOvu7RPjwmWGH/VuF8CyN9/OAdvqIXYLvtRaNjx9mMTDyo+NjAN1HNcl9ZQ5oQMM3dgDUqDo1l8DzvwmtZN7mnD+PkmLa+4mhrxVA9fRowBWmVBhFy5gYEjKMfz9AylsaRRgGzvZAAAAAElFTkSuQmCC",
"width": 12,
"height": 12,
"alt": "\u201C"
},
{
"type": "field_input",
"name": "TEXT",
"text": ""
},
{
"type": "field_image",
"src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAQAAAAqJXdxAAAAqUlEQVQI1z3KvUpCcRiA8ef9E4JNHhI0aFEacm1o0BsI0Slx8wa8gLauoDnoBhq7DcfWhggONDmJJgqCPA7neJ7p934EOOKOnM8Q7PDElo/4x4lFb2DmuUjcUzS3URnGib9qaPNbuXvBO3sGPHJDRG6fGVdMSeWDP2q99FQdFrz26Gu5Tq7dFMzUvbXy8KXeAj57cOklgA+u1B5AoslLtGIHQMaCVnwDnADZIFIrXsoXrgAAAABJRU5ErkJggg==",
"width": 12,
"height": 12,
"alt": "\u201D"
}
],
"output": "String",
"colour": 160,
"tooltip": "A letter, word, or line of text.",
"helpUrl": "https://en.wikipedia.org/wiki/String_(computer_science)"
}
textの生成コード
[出力端子] = '[入力フィールド]';
text_appendについて
text_appendは変数の値に文字列を追加するブロックです。このブロックはデフォルトで「item」という変数名が設定されています。
変数名はセレクトボックスで「定義済みの変数名」か「新しい変数名」のどちらかを設定することができます。
「定義済みの変数名」の場合は変数内の値に文字列を追加し、「新しい変数名」の場合は変数の定義と文字列の代入が行われます。
また、このブロックには一つの入力端子が存在し、この端子に入れたブロックの内容が変数に追加されます。
何も設定されなかった場合は「”」が追加されます。
text_appendの定義
{
"type": "text_append",
"message0": "to %1 append text %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item"
},
{
"type": "input_value",
"name": "TEXT",
"check": "String"
}
],
"output": "String",
"colour": 160,
"helpUrl": "https://github.com/google/blockly/wiki/Text#text-modification",
"TODO(#386)": "https://github.com/google/blockly-android/issues/386"
}
text_appendの生成コード
var [設定した変数名];
[設定した変数名] = String([設定した変数名]) + String('[入力端子の値]');
text_lengthについて
text_lengthは文字列、配列の長さを取得するブロックです。このブロックには一つの入力端子が存在し、端子に入れたブロックの文字列・配列の長さが取得できます。
また、このブロックには出力端子が存在し、取得した長さが出力されます。
text_lengthの定義
{
"type": "text_length",
"message0": "length of %1",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": ["String", "Array"]
}
],
"output": "Number",
"colour": 160,
"tooltip": "Returns the number of letters (including spaces) in the provided text.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#text-modification"
}
text_lengthの生成コード
[出力端子] = [入力端子の変数名].length;
text_isEmptyについて
text_isEmptyは文字列、配列に要素の有無を取得するブロックです。このブロックには一つの入力端子が存在し、端子に入れたブロックの文字列・配列の要素の有無が取得できます。
また、このブロックには出力端子が存在し、取得した要素の有無が出力されます。
text_isEmptyの定義
{
"type": "text_isEmpty",
"message0": "%1 is empty",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": ["String", "Array"]
}
],
"inputsInline": true,
"output": "Boolean",
"colour": 160,
"tooltip": "Returns true if the provided text is empty.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#checking-for-empty-text"
}
text_isEmptyの生成コード
[出力端子] = ![入力端子の変数名].length;
text_indexOfについて
text_indexOfは指定した文字列の中から指定した別の文字列が最初に現れる位置を取得するブロックです。このブロックには2つの入力端子が存在し、1つ目の入力端子に入れたブロックの文字列の中から、2つ目の入力端子に入れたブロックの文字列が最初に現れる位置が取得できます。
このブロックにはセレクトボックスがあり、検索をはじめる方向を選べます、firstは先頭、lastは末尾から検索を始めます。
また、このブロックには出力端子が存在し、取得した現れる位置が出力されます。
text_indexOfの定義
{
"type": "text_indexOf",
"message0": "in text %1 find %2 occurrence of text %3",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "String"
},
{
"type": "field_dropdown",
"name": "END",
"options": [
[
"first",
"FIRST"
],
[
"last",
"LAST"
]
]
},
{
"type": "input_value",
"name": "FIND",
"check": "String"
}
],
"inputsInline": true,
"output": "Number",
"colour": 160,
"tooltip": "Returns the index of the first/last occurrence of the first text in the second text. Returns %1 if text is not found.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#finding-text"
}
text_indexOfの生成コード
// セレクトボックスでfirstを選択
[出力端子] = '[1つ目の入力端子]'.indexOf('[2つ目の入力端子]');
// セレクトボックスでlastを選択
[出力端子] = '[1つ目の入力端子]'.lastIndexOf('[2つ目の入力端子]');
text_charAtについて
text_charAtは指定した文字列の中から指定した位置の文字を取得するブロックです。このブロックには2つの入力端子が存在し、1つ目の入力端子に入れた文字列ブロックの中から、2つ目の入力端子に入れた数字ブロックの位置の文字を取得できます。
このブロックにはセレクトボックスがあり、letter#は先頭からの位置を指定し、letter#from endは末尾からの位置を指定します。
また、このブロックには出力端子が存在し、取得した文字列が出力されます。
text_charAtの定義
{
"type": "text_charAt",
"message0": "in text %1 get %2 %3",
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "String"
},
{
"type": "field_dropdown",
"name": "WHERE",
"options": [
[
"letter #",
"FROM_START"
],
[
"letter # from end",
"FROM_END"
]
]
},
{
"type": "input_value",
"name": "AT",
"check": "Number"
}
],
"inputsInline": true,
"output": "String",
"colour": 160,
"tooltip": "Returns the letter at the specified position.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#extracting-text",
"TODO(#390)": "https://github.com/google/blockly-android/issues/390"
}
text_charAtの生成コード
// セレクトボックスでletter#を選択 [出力端子] = '[1つ目の入力端子]'.charAt([2つ目の入力端子]); // セレクトボックスでletter#from endを選択 [出力端子] = '[1つ目の入力端子]'.slice(-1 * [2つ目の入力端子] - 1).charAt(0);
text_getSubstringについて
text_getSubstringは指定した文字列の中から開始位置と終了位置を指定して文字列を切り出すブロックです。このブロックには3つの入力端子が存在し、1つ目の入力端子に入れた文字列ブロックの中から、2つ目の入力端子に入れた数字ブロックを開始位置、3つ目の入力端子に入れた数字ブロックを終了位置として文字列を切り出します。
このブロックには開始位置と終了位置にはそれぞれセレクトボックスがあり、letter#は先頭からの位置を指定し、letter#from endは末尾からの位置を指定します。
また、このブロックには出力端子が存在し、取得した文字列が出力されます。
text_getSubstringの定義
{
"type": "text_getSubstring",
"message0": "in text %1 get substring from %2 %3 to %4 %5",
"args0": [
{
"type": "input_value",
"name": "STRING",
"check": "String"
},
{
"type": "field_dropdown",
"name": "WHERE1",
"options": [
[
"letter #",
"FROM_START"
],
[
"letter # from end",
"FROM_END"
]
]
},
{
"type": "input_value",
"name": "AT1",
"check": "Number"
},
{
"type": "field_dropdown",
"name": "WHERE2",
"options": [
[
"letter #",
"FROM_START"
],
[
"letter # from end",
"FROM_END"
]
]
},
{
"type": "input_value",
"name": "AT2",
"check": "Number"
}
],
"inputsInline": true,
"output": "String",
"colour": 160,
"tooltip": "Returns a specified portion of the text.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#extracting-a-region-of-text",
"TODO(#391)": "https://github.com/google/blockly-android/issues/391"
}
text_getSubstringの生成コード
// 1つ目のセレクトボックスでletter#、2つ目のセレクトボックスでletter#を選択
[出力端子] = '[1つ目の入力端子]'.slice([2つ目の入力端子], [3つ目の入力端子] + 1);
// 1つ目のセレクトボックスでletter#、2つ目のセレクトボックスでletter#from endを選択
[出力端子] = '[1つ目の入力端子]'.slice([2つ目の入力端子], '[1つ目の入力端子]'.length + (-1 * [3つ目の入力端子] -1));
// 1つ目のセレクトボックスでletter#from end、2つ目のセレクトボックスでletter#を選択
[出力端子] = '[1つ目の入力端子]'.slice('[1つ目の入力端子]'.length + (-1 * [2つ目の入力端子] -1), [3つ目の入力端子] + 1);
// 1つ目のセレクトボックスでletter#from end、2つ目のセレクトボックスでletter#from endを選択
[出力端子] = '[1つ目の入力端子]'.slice('[1つ目の入力端子]'.length + (-1 * [2つ目の入力端子] -1), '[1つ目の入力端子]'.length + (-1 * [3つ目の入力端子] -1));
text_changeCase
text_changeCaseは文字列の大文字小文字を変更するブロックです。このブロックには一つの入力端子が存在し、入力端子に入れたブロックの大文字小文字を変更できます。
このブロックにはセレクトボックスがあり、UPPER CASEは大文字、lower caseは小文字、Title Caseは単語の最初の文字を大文字に、それ以外を小文字にそれぞれ変更します。
また、このブロックには出力端子が存在し、大文字小文字が変更された文字列が出力されます。
text_changeCaseの定義
{
"type": "text_changeCase",
"message0": "to %1 %2",
"args0": [
{
"type": "field_dropdown",
"name": "CASE",
"options": [
[
"UPPER CASE",
"UPPERCASE"
],
[
"lower case",
"LOWERCASE"
],
[
"Title Case",
"TITLECASE"
]
]
},
{
"type": "input_value",
"name": "TEXT",
"check": "String"
}
],
"output": "String",
"colour": 160,
"tooltip": "Return a copy of the text in a different case.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#adjusting-text-case"
}
text_changeCaseの生成コード
// セレクトボックスでUPPER CASEを選択
[出力端子] = '[1つ目の入力端子]'.toUpperCase();
// セレクトボックスでlower caseを選択
[出力端子] = '[1つ目の入力端子]'.toLowerCase();
// セレクトボックスでTitle Caseを選択
function textToTitleCase(str) {
return str.replace(/\S+/g,function(txt) {return txt[0].toUpperCase() + txt.substring(1).toLowerCase();});
}
[出力端子] = textToTitleCase('[1つ目の入力端子]');
text_trimについて
text_trimは文字列から空白を除去するブロックです。このブロックには一つの入力端子が存在し、入力端子に入れたブロックの文字列から空白を除去できます。
このブロックにはセレクトボックスがあり、both sidesは両端の空白、left sideは先頭側の空白、right sideは末尾側の空白をそれぞれ除去します。
また、このブロックには出力端子が存在し、空白が除去された文字列が出力されます。
text_trimの定義
{
"type": "text_trim",
"message0": "trim spaces from %1 of %2",
"args0": [
{
"type": "field_dropdown",
"name": "MODE",
"options": [
[
"both sides",
"BOTH"
],
[
"left side",
"LEFT"
],
[
"right side",
"RIGHT"
]
]
},
{
"type": "input_value",
"name": "TEXT",
"check": "String"
}
],
"output": "String",
"colour": 160,
"tooltip": "Return a copy of the text with spaces removed from one or both ends.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#trimming-removing-spaces"
}
text_trimの生成コード
// セレクトボックスでboth sidesを選択 [出力端子] = '[1つ目の入力端子]'.trim(); // セレクトボックスでleft sideを選択 [出力端子] = '[1つ目の入力端子]'.replace(/^[\s\xa0]+/, ''); // セレクトボックスでright sideを選択 [出力端子] = '[1つ目の入力端子]'.replace(/[\s\xa0]+$/, '');
text_printについて
text_printはダイアログを表示するブロックです。このブロックには一つの入力端子が存在し、入力端子に入れたブロックの文字列がメッセージとして表示されます。
text_printの定義
{
"type": "text_print",
"message0": "print %1",
"args0": [
{
"type": "input_value",
"name": "TEXT"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": 160,
"tooltip": "Print the specified text, number or other value.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#printing-text"
},
{
"type": "text_prompt_ext",
"message0": "prompt for %1 with message %2",
"args0": [
{
"type": "field_dropdown",
"name": "TYPE",
"options": [
[
"text",
"TEXT"
],
[
"number",
"NUMBER"
]
]
},
{
"type": "input_value",
"name": "TEXT",
"check": "String"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": 160,
"tooltip": "Prompt for user for some text or a number.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#getting-input-from-the-user",
"TODO(#394)": "https://github.com/google/blockly-android/issues/394"
}
text_printの生成コード
window.alert('[1つ目の入力端子]');
text_prompt_extについて
text_printは入力ダイアログを表示するブロックです。このブロックには一つの入力端子が存在し、入力端子に入れたブロックの文字列がメッセージとして表示されます。
このブロックにはセレクトボックスがあり、textは文字列、number数字をそれぞれ入力させるダイアログを表示します。
text_prompt_extの定義
{
"type": "text_prompt_ext",
"message0": "prompt for %1 with message %2",
"args0": [
{
"type": "field_dropdown",
"name": "TYPE",
"options": [
[
"text",
"TEXT"
],
[
"number",
"NUMBER"
]
]
},
{
"type": "input_value",
"name": "TEXT",
"check": "String"
}
],
"previousStatement": null,
"nextStatement": null,
"colour": 160,
"tooltip": "Prompt for user for some text or a number.",
"helpUrl": "https://github.com/google/blockly/wiki/Text#getting-input-from-the-user",
"TODO(#394)": "https://github.com/google/blockly-android/issues/394"
}
text_prompt_extの生成コード
// セレクトボックスでtextを選択
window.prompt('[1つ目の入力端子]')
// セレクトボックスでnumberを選択
parseFloat(window.prompt('[1つ目の入力端子]'))