ProgramingBlocklyTutorial_CreateYourFirstBlock

2017-07-02 Blockly1.0֥åκ򿷤񤭤ޤ

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


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

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

Ȥγȯ塼ȥꥢǤϡȤᥢץ(Turtle Graphics)˥֥åɲäƤޤ

Υ֥åmove toפϡΥġܥåˡꤷɸľܰưޤ

tutporial_100.png

塼ȥꥢˤϡΤΤ򤽤Ƚ񤤤Ƥ롣

  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

SubversionBlocklyɤΥ

ȥ塼ȥꥢˤϽ񤤤Ƥ뤱ɡ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֥륯åƥ֥饦dz

줫뤳

Υ塼ȥꥢǤϡ\apps\turtleեˤturtle.jsסblocks.jsסtemplate.soyפȤ3ĤΥե롣

Ǥϡmove_toץ֥åäƤޤmove_toץ֥åǤϡxȣͤꤹ뤳Ȥǡ(x, y)ɸľܰư֥åǤ

Step1֥å߷פ

ǡ֥åϤƤߤ

֥åǺ

֥å߷פˤϡǥ⥢ץˤ֥åѤ롣

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

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

BlockFactory_MoveTo_zps80888682.png

ץӥ塼

֥åȤΩƤ顢preview(ץӥ塼)򸫤Ƥߤ롣Τ褦ʥ֥åɽƤϤ

BlockFactory_MoveTo_Preview_zps16065a5d.png
 #­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

Step2blocks.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ե¸ޤ

* ­
* äѹ¿ơְ㤨
* եνϡʴ
tutporial_150.png

Step3turtle.jsեԽ

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եԽ

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ѹե򥳥ѥ뤹

ǡ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ץ֥åɲäƤ롣ä

tutporial_300.png

ƥȤΤˡʥɤȤǤߤ

tutporial_200.png


  ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS
Last-modified: 2017-07-02 () 19:04:32 (694d)