Blockly/Tutorial のバックアップの現在との差分(No.4)

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

#title(Blockly - 最初のブロックを作るチュートリアル)
#title(Blocklyのオリジナルブロックを作ってみたメモ)

最初のオリジナルブロックを作って、追加して、テストするチュートリアル。Bloklyに機能追加するための入門記事です。
''2017-07-02 [[Blockly1.0：カスタムブロックの作り方>Blockly/CustomBlock]]を新しく書きました。''

このページは、公式サイトの開発チュートリアルの抄訳＋訳者のコメントです。
2014-10-18 サイトリニューアルで、元のチュートリアルは削除されたので、ちょっと貴重かも。

-[[Tutorial_CreateYourFirstBlock:https://code.google.com/p/blockly/wiki/Tutorial_CreateYourFirstBlock]] 公式サイトの開発チュートリアル、Tutorial for creating, adding, and testing your first block
-[[Tutorial_CreateYourFirstBlock:https://code.google.com/p/blockly/wiki/Tutorial_CreateYourFirstBlock]] 公式サイトの開発チュートリアル

以下、書きかけ
-----

この[[チュートリアル:http://www.weblio.jp/content/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB]]では、[[お絵かきカメアプリ(Turtle Graphics):http://www.catch.jp/program/blockly/apps/turtle/index.html]]にブロックを追加します。
最初のオリジナルブロックを作って、追加して、テストしてみた。

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


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

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

#ref(tutporial_100.png)

#contents

*準備する [#v88a6ef4]

-Webブラウザ
-シンプルなテキストエディタ
-Subversion
-Blocklyのソースコード
チュートリアルには、次のものをそろえると書いてある。

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

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

最後の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
   ＊これなら、Subversionは不要だし。 
   ＊ファイルをダウンロードして、解凍したら、「サンプルアプリで動作確認」に進む
とチュートリアルには書いてあるけれど、Githubの「Download ZIP」のほうが簡単。

Blocklyのソースコードは、Google CodeのBlocklyプロジェクトページで公開されています。
 https://github.com/google/blockly/archive/master.zip

ダウンロードするには、Subversionというツールを使いますが、Windowsの場合は[[TortoiseSVN]]が便利でしょう。
Githubを使っているなら、こちら。

+[[TortoiseSVN]]をダウンロードしてインストール
+ソースコードを保存したいフォルダで、右クリック->「SVN Checkout」
+ダウンロード元(URL Repository)として「http://blockly.googlecode.com/svn/trunk/」を指定する
 git clone https://github.com/google/blockly

これなら、Subversionは不要。 

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

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

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

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

**確認しておこう [#t22212dd]
**これからやること [#t22212dd]

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

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

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

では、ブロックを作り始めましょう。
で、ブロックを作り始めてみた。

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

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

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

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

#ref(BlockFactory_MoveTo_zps80888682.png)

**プレビュー [#o9867b06]

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

#ref(BlockFactory_MoveTo_Preview_zps16065a5d.png)

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

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

Language Code（ランゲージ コード）を見ると、次のようにコードが表示されているはずです。
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('');
  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（スタブ コード）を見ると、次のようにコードが表示されているはずです。
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;
  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]

*最後に [#ec79d1ce]
再度、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.