[[Programing]][[Blockly>Programing/Blockly2014]]Tutorial_CreateYourFirstBlock

#title(BlocklyΥꥸʥ֥åäƤߤ)

''2017-07-02 [[Blockly1.0֥åκ>Blockly/CustomBlock]]񤭤ޤ''
''2017-07-02 [[Blockly1.0֥åκ>Blockly/CustomBlock]]򿷤񤭤ޤ''

2014-10-18 ȥ˥塼ǡΥ塼ȥꥢϺ줿ΤǡäȵŤ⡣

-[[Tutorial_CreateYourFirstBlock:https://code.google.com/p/blockly/wiki/Tutorial_CreateYourFirstBlock]] Ȥγȯ塼ȥꥢ

-----

ǽΥꥸʥ֥åäơɲäơƥȤƤߤ

ΥڡϡBloklyȤγȯ塼ȥꥢʤäƤߤȤιȥǤ


Ȥγȯ塼ȥꥢǤϡȤ[[ᥢץ(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


**SubversionBlocklyɤΥ [#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֥륯åƥ֥饦dz

**줫뤳 [#t22212dd]

Υ塼ȥꥢǤϡ\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]]Ѥ롣

֥åȤȡ֥åθܤȵǽñǤ롣

Ǥϡ֥åǡΤ褦˥֥åȤΩƤ

#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 


*Step2blocks.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)

*Step3turtle.jsեԽ [#yc4f1dd3]

turtle.jsե򥨥ǥdz

// 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ե¸롣


*Step4template.soyեԽ [#d1a286d0]

template.soy򥨥ǥdz

{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