【Google Blocklyを使って遊ぼう】ブロックを自作する
Google Blocklyでは自分の好きなようにブロックを作成することができます。 今回はブロックを定義し、アプリケーション内で使用する方法を説明します。
1-JSONファイルを作成する
ブロックはJSONで定義することができます。JSONファイルはassetsフォルダの中に作成します。
今回はassets/defaultフォルダ内に「custom_blocks.json」を新規作成します。
2-ブロックを定義する
JSONで使用出来る属性は下記のものがあります。ルート要素
ブロックの外見や役割を定義するときに使う属性です。| 属性名 | 説明 | 設定例 |
|---|---|---|
| type | ブロックの名前を設定します。 |
"type": "block_name"
|
| colour | ブロックの色を設定します。 色はHue-Saturation-Value (HSV) で設定します。 1000を超える値を設定すると例外終了します。 |
"colour": 160
|
| tooltip | ツールチップに表示されるテキストを設定します。しかし、Androidではツールチップが表示されないので設定しても意味がないようです。 |
"tooltip": "ツールチップを設定します。"
|
| helpUrl | ブロックの説明をしているURLを設定します。 |
"helpUrl": "http://hogehoge"
|
| nextStatement | このブロックに対して、次のブロックが接続できるかどうかを設定します。 設定をするとブロック下部に出力端子が作られます。 また、この属性はoutput属性と同時に設定することはできません。 |
"nextStatement": null
|
| previousStatement | このブロックに対して、前のブロックが接続できるかどうかを設定します。 設定をするとブロック上部に入力端子が作られます。 |
"previousStatement": null
|
| output | このブロックの出力端子の有無と種類を設定します。 この属性はnextStatement属性と同時に設定することはできません。 |
"output": null
|
| message[任意の数字] |
ブロック内に記載されるテキストを設定します。
テキスト内に%[1以上の数字]を含めることで引数ブロックをブロック内に追加できます。
接続する引数ブロックの内容はargs属性にオブジェクトを設定して指定します。
また、下記の点に注意してください。
|
"message0": "my first block"
"message1": "my first block %1"
"message2": "my first block %1 %2"
|
| args[任意の数字] | ブロックに引数ブロックを接続する端子を追加します。 引数ブロックの内容はargs属性を使用して設定します。 message0の引数はargs0、message1の引数はargs1のように対応する。 また、args属性はオブジェクトの配列を設定することができます。 配列の要素数はmessage内に含まれる%の数と一致する必要があります。 |
"message0": "my first block %1"
"args0": [
{
[%1の引数を設定する]
},
{
[%2の引数を設定する]
}
]
|
引数(args)要素
引数(args)の入力方法を定義するときに使用する属性です。| name | 引数に名前を設定できます。 |
"name":"args_name"
|
||||||||||||||||||||||||||
| type |
ブロックの引数がどのような入力方法をとるかを選択することができます。 Fields:
Inputs:
|
"type": "[タイプ名]"
|
||||||||||||||||||||||||||
| class | 文字の装飾するときに使用します。 |
"class": "style-name"
|
||||||||||||||||||||||||||
| src | 表示する画像を設定します。 この属性にはassetsフォルダ内に画像を指定するか、URLを使ってWEB上の画像を指定することができます。 |
"src" : "xxxx.xxx"
"src" : "http://xxxxxxxxxxxx"
|
||||||||||||||||||||||||||
| width | 画像の幅を設定できます。 |
"width" : 100
|
||||||||||||||||||||||||||
| height | 画像の高さを設定できます。 |
"height" : 100
|
||||||||||||||||||||||||||
| alt | 画像の代替テキストを設定します。 |
"alt" : "代替テキスト"
|
||||||||||||||||||||||||||
| text | field_inputの初期設定値を設定します。 |
"text" : "default text"
|
||||||||||||||||||||||||||
| spellcheck | field_inputの値に対してスペルチェックを行うかどうかを設定します。 |
"spellcheck": true
|
||||||||||||||||||||||||||
| options |
field_dropdownに表示されるアイテムを設定します。 アイテムには文字と画像を表示することができます。 options属性は配列を設定できます、配列の1要素がドロップダウンの1アイテムになります。 アイテムはさらに配列で指定できます、1要素目はアイテムの表示内容、2要素目はアイテムの名前を指定します。 |
"options": [
["none", "NONE"],
[{"src": "xxxx.xxx", "width": 50, "height": 25, "alt": "xxx"}, "XXX"]
]
|
||||||||||||||||||||||||||
| checked | field_checkboxの初期表示を設定します。 |
"checked" : false
|
||||||||||||||||||||||||||
| colour | field_colourの初期表示を設定します。 |
"colour" : "#FF0000"
|
||||||||||||||||||||||||||
| variable | field_variableの初期変数名を設定します。 |
"variable": "x"
|
||||||||||||||||||||||||||
| value | field_numberの初期値を設定します。 |
"value": 10
|
||||||||||||||||||||||||||
| min |
field_numberの入力値に対して下限値を設定します。 この値を下回る値が入力された場合は、この値が再設定されます。 |
"min": -128
|
||||||||||||||||||||||||||
| max |
field_numberの入力値に対して上限値を設定します。 この値を上回る値が入力された場合は、この値が再設定されます。 |
"max": 127
|
||||||||||||||||||||||||||
| precision | field_numberの入力をprecision属性で設定した値の倍数のステップ入力にします。 例えばprecision属性に10を設定した場合、ユーザーの入力値に一番近い10の倍数値に値が再設定されます。 |
"precision": 10
|
||||||||||||||||||||||||||
| angle | field_angleの初期値を設定します。 |
"angle": "90"
|
||||||||||||||||||||||||||
| date | field_dateの初期値を設定します。yyyy-MM-ddの形式で設定します。 |
"date": "2015-02-05"
|
||||||||||||||||||||||||||
| check | input_valueタイプの引数に接続できる、output属性の型を指定できます。 Number/String/Variableを指定することができます。 |
"check" : "Number"
"check" : "String"
"check" : "Variable"
|
||||||||||||||||||||||||||
| inputsInline | trueを設定すると引数の並びをインライン化します。 |
"inputsInline": true
|
{
"type": "my_custom",
"message0": "repeat %1 times",
"args0": [
{"type": "input_value", "name": "TIMES", "check": "Number"}
],
"message1": "do %1",
"args1": [
{"type": "input_statement", "name": "DO"}
],
"previousStatement": null,
"nextStatement": null,
"colour": 120
}
3-定義したJSONファイルを使用する
AbstractBlocklyActivity#getBlockDefinitionsJsonPathsでassetsに保存されているカスタムブロックが定義されているファイルを読み込みます。
private static final List<String> BLOCK_DEFINITIONS_JSON_PATHS = Arrays.asList(
"default/custom_blocks.json"
);
@Override
protected List<String> getBlockDefinitionsJsonPaths() {
return BLOCK_DEFINITIONS_JSON_PATHS;
}
4-定義したブロックをツールボックスに載せる
custom_blocks.jsonに定義しただけではアプリケーション内でブロックを使用することができません。ツールボックスでcustom_blocks.jsonに定義されているmy_customブロックを設定します。
<category name="custom">
<block type="my_custom"></block>
</category>