Blockly/Tutorial のバックアップ差分(No.11)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]]>[[Blockly>Programing/Blockly]]>Tutorial_CreateYourFirstBlock
[[Programing]]>[[Blockly>Programing/Blockly2014]]>Tutorial_CreateYourFirstBlock

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

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

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

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

-[[Tutorial_CreateYourFirstBlock:https://code.google.com/p/blockly/wiki/Tutorial_CreateYourFirstBlock]] 公式サイトの開発チュートリアル

-----

公式サイトの開発チュートリアルでは、題材として[[お絵かきカメアプリ(Turtle Graphics):http://www.catch.jp/program/blockly/apps/turtle/index.html]]にブロックを追加しています。

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

#ref(tutporial_100.png)

#contents

*準備する [#v88a6ef4]

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

+Webブラウザ
+シンプルなテキストエディタ
+Subversion
+Blocklyのソースコード
+(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ソースコードのダウンロード [#ee4b95bf]

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

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

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

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

これなら、Subversionは不要。 

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

**サンプルアプリで動作チェック [#m00ad4e7]

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

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

**これからやること [#t22212dd]

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

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

*Step1:ブロックを設計する [#raf2cf73]

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

**ブロック工場で作る [#j4060590]

新しいブロックを設計するには、デモアプリにある[[ブロック工場:https://blockly-demo.appspot.com/static/apps/blockfactory/index.html]]を利用する。

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

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

#ref(BlockFactory_MoveTo_zps80888682.png)

**プレビュー [#o9867b06]

ブロックを組み立てたら、preview(プレビュー)を見てみる。次のようなブロックが表示されているはず。

#ref(BlockFactory_MoveTo_Preview_zps16065a5d.png)

  #補足:下記のURLで共有
  https://blockly-demo.appspot.com/static/apps/blockfactory/index.html#qupx67

**ランゲージ コード [#d6f8701b]

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 スタブコード [#bb348633]

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ファイルを編集する [#ode8945a]

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

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

#ref(tutporial_150.png)

*Step3:turtle.jsファイルを編集する [#yc4f1dd3]

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ファイルを編集する [#d1a286d0]

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:変更したファイルをコンパイルする [#t4a5135b]

ここで、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:新しいブロックをテストする [#of6b2cf0]

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

#ref(tutporial_300.png)

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

#ref(tutporial_200.png)

*参考 [#db8c0669]

公式サイト

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


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS