Programing>Blockly>Tutorial_CreateYourFirstBlock
2017-07-02 Blockly1.0:カスタムブロックの作り方を新しく書きました。
2014-10-18 サイトリニューアルで、元のチュートリアルは削除されたので、ちょっと貴重かも。
最初のオリジナルブロックを作って、追加して、テストしてみた。
このページは、Blokly公式サイトの開発チュートリアルをなぞってみたときの工程とメモです。
公式サイトの開発チュートリアルでは、題材としてお絵かきカメアプリ(Turtle Graphics)にブロックを追加しています。
このブロック「move to」は、お絵かきカメのツールボックスに、指定した座標に直接移動します。
チュートリアルには、次のものをそろえると書いてある。
最初の2つは、自分の好みのものを使えばいいでしょう。
最後の2つは、次のステップで入手するけど、Subversionはなくてもいい。
*補足: *さらに、5番目のツールとして、Javaが必要。 *コマンドプロンプトで「> java -version」とやると、導入済みかどうか確認できる。 *導入されてない場合は、http://www.oracle.com/technetwork/jp/java/javase/ からダウンロード *Javaがあるのにコマンドプロンプトから使えない場合は、環境変数をセットする。http://www.javadrive.jp/install/jdk/index4.html
とチュートリアルには書いてあるけれど、Githubの「Download ZIP」のほうが簡単。
https://github.com/google/blockly/archive/master.zip
Githubを使っているなら、こちら。
git clone https://github.com/google/blockly
これなら、Subversionは不要。
ファイルをダウンロードして、解凍したら、「サンプルアプリで動作確認」に進む
サンプルアプリの「お絵かきカメ」を実行するには
このチュートリアルでは、\apps\turtleフォルダにある「turtle.js」「blocks.js」「template.soy」という3つのファイルを修正する。
ここでは、「move_to」ブロックを作っています。「move_to」ブロックでは、xとyの値を指定することで、カメを(x, y)座標に直接移動させるブロックです。
で、ブロックを作り始めてみた。
新しいブロックを設計するには、デモアプリにあるブロック工場を利用する。
ブロック工場を使うと、新しいブロックの見た目と機能を簡単に設定できる。
では、ブロック工場で、下記のようにブロックを組み立てる
ブロックを組み立てたら、preview(プレビュー)を見てみる。次のようなブロックが表示されているはず。
#補足:下記のURLで共有 https://blockly-demo.appspot.com/static/apps/blockfactory/index.html#qupx67
Language Code(ランゲージ コード)を見ると、次のようにコードが表示されているはず。
Blockly.Blocks['move_to'] = { init: function() { this.setHelpUrl('http://www.example.com/'); this.setColour(160); this.appendDummyInput() .appendField(" move to"); this.appendValueInput("XPOS") .setCheck("Number") .appendField("x"); this.appendValueInput("YPOS") .setCheck("Number") .appendField("y"); this.setInputsInline(true); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(''); } };
stub code(スタブ コード)を見ると、次のようにコードが表示されているはず。
Blockly.JavaScript['move_to'] = function(block) { var value_xpos = Blockly.JavaScript.valueToCode(block, 'XPOS', Blockly.JavaScript.ORDER_ATOMIC); var value_ypos = Blockly.JavaScript.valueToCode(block, 'YPOS', Blockly.JavaScript.ORDER_ATOMIC); // TODO: Assemble JavaScript into code variable. var code = '...'; return code; };
ブロックデザインの詳細は、https://code.google.com/p/blockly/wiki/DefiningBlocks
コード生成の詳細は、 https://code.google.com/p/blockly/wiki/GeneratingCode
テキストエディタでblocks.jsファイルを開く。
で、次のコードの直後に、先ほどの2つのコードを貼り付けます。
Blockly.JavaScript['draw_move'] = function(block) { // Generate JavaScript for moving forward or backwards. var value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_NONE) || '0'; return 'Turtle.' + block.getFieldValue('DIR') + '(' + value + ', \'block_id_' + block.id + '\');\n'; }; //ここに2つのコードを貼り付ける
それから、一部をこんなふうに修正します。
Blockly.Blocks['draw_moveto'] = { // move turtle to absolute x,y location // for reference 0,0 is top/let and 200,200 is centre init: function() { this.setHelpUrl(''); this.setColour(160); this.appendDummyInput() .appendField(BlocklyApps.getMsg('Turtle_moveTo')); this.appendValueInput("XPOS") .setCheck("Number") .appendField("x"); this.appendValueInput("YPOS") .setCheck("Number") .appendField("y"); this.setInputsInline(true); this.setPreviousStatement(true); this.setNextStatement(true); this.setTooltip(BlocklyApps.getMsg('Turtle_moveToTooltip')); } }; Blockly.JavaScript['draw_moveto'] = function(block) { // Generate JavaScript for moving to absolute position var xpos = Blockly.JavaScript.valueToCode(block, 'XPOS', Blockly.JavaScript.ORDER_NONE) || '0'; var ypos = Blockly.JavaScript.valueToCode(block, 'YPOS', Blockly.JavaScript.ORDER_NONE) || '0'; return 'Turtle.moveTo(' + xpos + ',' + ypos + ', \'block_id_' + block.id + '\');\n'; };
そしたら、blocks.jsファイルを保存します。
* 補足: * けっこう変更点が多くて、間違えた。 * ファイルの修正点は、こんな感じ。
turtle.jsファイルをエディタで開く
「// Turtle API」コメントの下にある、 Turtle API部分を見つけ出す。
Turtle.moveBackward{...}ブロックの後ろに、次のAPIコードを追加する
Turtle.moveTo = function(xpos, ypos, id) { BlocklyApps.log.push(['MT', xpos, ypos, id]); };
もうひとつ。Turtle.step = function(command, values) {...}ブロックの後ろの中、switch (command) {...} 文があるから、'case FD' (Forward) と'case RT' (Right Turn)の間に、次の文を追加する。
case 'MT': // Move To Turtle.x=values[0]; Turtle.y=values[1]; break;
そしたら、turtle.jsファイルを保存する。
template.soyをエディタで開く。
{template .messages}ブロックの中に空行をあけて、次のコードを貼り付ける。
オススメの位置は、 <span id="Turtle_moveBackward"> ... </span>のあと。
<span id="Turtle_moveToTooltip">{msg meaning="Turtle.moveToTooltip" desc="Moves the turtle to an absolute x and y location via 2 numbers. Top left is 0,0 whilst centre is 200,200 (default)."}Moves turtle to the absolute x/y location without drawing a mark{/msg}</span> <span id="Turtle_moveTo">{msg meaning="Turtle.moveTo" desc="block text - Infinitive or imperative of a verb to move the turtle to an absolute x and y location via 2 numbers. Top left is 0,0 whilst centre is 200,200 (default)."}move to{/msg}</span>
それから、新しいブロックがツールボックスに表示されるように、{template .toolbox}部分に次のコードを追加する。move_toブロックの位置としては、<block type="draw_move">...</block>のあとが、わかりやすい。
<block type="draw_moveto"> <value name="XPOS"> <block type="math_number"> <field name="NUM">200</field> </block> </value> <value name="YPOS"> <block type="math_number"> <field name="NUM">200</field> </block> </value> </block>
そしたら、template.soyファイルを保存します。
ここで、Windowsならコマンドプロンプトを開いて、お絵かきカメプログラムのフォルダに移動する。
> cd <myfolder>/blockly/apps/turtle
それからJavaでコンパイル。Javaについては、冒頭の補足も参照のこと。
> java -jar ../_soy/SoyToJsSrcCompiler.jar --outputPathFormat generated/en.js --srcs ../common.soy,template.soy
*補足: 末尾の「../common.soy,template.soy」は、ダブルコーテーションで囲んだほうがいい場合があるかも。
再度、index.htmlを開くと、「move_to」ブロックが追加されている。やったぜ。
テストのために、こんなコードを組んでみた。
公式サイト