Blocklyのオリジナルブロックを作ってみたメモ

Programing＞Blockly＞Tutorial_CreateYourFirstBlock

2017-07-02 Blockly1.0：カスタムブロックの作り方を新しく書きました。

2014-10-18 サイトリニューアルで、元のチュートリアルは削除されたので、ちょっと貴重かも。

• Tutorial_CreateYourFirstBlock 公式サイトの開発チュートリアル

最初のオリジナルブロックを作って、追加して、テストしてみた。

このページは、Blokly公式サイトの開発チュートリアルをなぞってみたときの工程とメモです。

公式サイトの開発チュートリアルでは、題材としてお絵かきカメアプリ(Turtle Graphics)にブロックを追加しています。

このブロック「move to」は、お絵かきカメのツールボックスに、指定した座標に直接移動します。

準備する †

チュートリアルには、次のものをそろえると書いてある。

1. Webブラウザ
2. シンプルなテキストエディタ
3. Subversion
4. Blocklyのソースコード
5. (java)

最初の2つは、自分の好みのものを使えばいいでしょう。

最後の2つは、次のステップで入手するけど、Subversionはなくてもいい。

＊補足：
＊さらに、5番目のツールとして、Javaが必要。
＊コマンドプロンプトで「> java -version」とやると、導入済みかどうか確認できる。
＊導入されてない場合は、http://www.oracle.com/technetwork/jp/java/javase/ からダウンロード
＊Javaがあるのにコマンドプロンプトから使えない場合は、環境変数をセットする。http://www.javadrive.jp/install/jdk/index4.html

SubversionとBlocklyソースコードのダウンロード †

とチュートリアルには書いてあるけれど、Githubの「Download ZIP」のほうが簡単。

https://github.com/google/blockly/archive/master.zip

Githubを使っているなら、こちら。

git clone https://github.com/google/blockly

これなら、Subversionは不要。

ファイルをダウンロードして、解凍したら、「サンプルアプリで動作確認」に進む

サンプルアプリで動作チェック †

サンプルアプリの「お絵かきカメ」を実行するには

1. (ソースコード)\apps\turtle\index.htmlをダブルクリックしてブラウザで開く

これからやること †

このチュートリアルでは、\apps\turtleフォルダにある「turtle.js」「blocks.js」「template.soy」という3つのファイルを修正する。

ここでは、「move_to」ブロックを作っています。「move_to」ブロックでは、xとｙの値を指定することで、カメを(x, y)座標に直接移動させるブロックです。

Step1：ブロックを設計する †

で、ブロックを作り始めてみた。

ブロック工場で作る †

新しいブロックを設計するには、デモアプリにあるブロック工場を利用する。

ブロック工場を使うと、新しいブロックの見た目と機能を簡単に設定できる。

では、ブロック工場で、下記のようにブロックを組み立てる

プレビュー †

ブロックを組み立てたら、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('');
  }
};

JavaScript スタブコード †

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

Step2：blocks.jsファイルを編集する †

テキストエディタで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ファイルを保存します。

* 補足：
* けっこう変更点が多くて、間違えた。
* ファイルの修正点は、こんな感じ。

Step3：turtle.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ファイルを保存する。

Step4：template.soyファイルを編集する †

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ファイルを保存します。

Step5：変更したファイルをコンパイルする †

ここで、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」は、ダブルコーテーションで囲んだほうがいい場合があるかも。

Step6：新しいブロックをテストする †

再度、index.htmlを開くと、「move_to」ブロックが追加されている。やったぜ。

テストのために、こんなコードを組んでみた。

参考 †

公式サイト

• Tutorial_CreateYourFirstBlock開発チュートリアル Tutorial for creating, adding, and testing your first block
• DefiningBlock 新しいブロックの定義方法 How to define new blocks.
• GeneratingCode 新しいブロックからコードを生成するには How to generate code from new blocks.