[[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 **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¤È£ù¤ÎÃͤò»ØÄꤹ¤ë¤³¤È¤Ç¡¢¥«¥á¤ò(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.