[[Programing]]¡ä[[Programing/Blockly]]¡äTutorial_CreateYourFirstBlock #title(Blockly - ºÇ½é¤Î¥Ö¥í¥Ã¥¯¤òºî¤ë¥Á¥å¡¼¥È¥ê¥¢¥ë) ºÇ½é¤Î¥ª¥ê¥¸¥Ê¥ë¥Ö¥í¥Ã¥¯¤òºî¤Ã¤Æ¡¢Äɲ䷤ơ¢¥Æ¥¹¥È¤¹¤ë¥Á¥å¡¼¥È¥ê¥¢¥ë¡£ ¤³¤Î[[¥Á¥å¡¼¥È¥ê¥¢¥ë: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]]¤Ë¥Ö¥í¥Ã¥¯¤òÄɲä·¤Þ¤¹¡£¤½¤Î¤¿¤á¤Ë¡¢¤ª³¨¤«¤¥«¥á¤Î¥Ä¡¼¥ë¥Ü¥Ã¥¯¥¹¤Ë¡¢»ØÄꤷ¤¿ºÂɸ¤Ë°ÜÆ°¤¹¤ë¡Ö°ÜÆ°¤¹¤ë¡×¤È¤¤¤¦¿·¤·¤¤¥Ö¥í¥Ã¥¯¤òÄɲ䷤Ƥߤޤ¹¡£ ¤³¤Î¥Á¥å¡¼¥È¥ê¥¢¥ë¤Ï¡¢°Ê²¼¤Î¾¶Ìõ¤Ç¤¹¡£ -[[Tutorial_CreateYourFirstBlock:https://code.google.com/p/blockly/wiki/Tutorial_CreateYourFirstBlock]] ¸ø¼°¥µ¥¤¥È¤Î³«È¯¥Á¥å¡¼¥È¥ê¥¢¥ë¡¢Tutorial for creating, adding, and testing your first block °Ê²¼¡¢½ñ¤¤«¤± #contents *½àÈ÷¤¹¤ë [#v88a6ef4] -Web¥Ö¥é¥¦¥¶ -¥·¥ó¥×¥ë¤Ê¥Æ¥¥¹¥È¥¨¥Ç¥£¥¿ -Subversion -Blockly¤Î¥½¡¼¥¹¥³¡¼¥É ºÇ½é¤Î2¤Ä¤Ï¡¢¼«Ê¬¤Î¹¥¤ß¤Î¤â¤Î¤ò»È¤¨¤Ð¤¤¤¤¤Ç¤·¤ç¤¦¡£ ºÇ¸å¤Î2¤Ä¤Ï¡¢¼¡¤Î¥¹¥Æ¥Ã¥×¤ÇÆþ¼ê¤·¤Þ¤¹¡£ **Subversion¤ÈBlockly¥½¡¼¥¹¥³¡¼¥É¤Î¥À¥¦¥ó¥í¡¼¥É [#ee4b95bf] Blockly¤Î¥½¡¼¥¹¥³¡¼¥É¤Ï¡¢Google Code¤ÎBlockly¥×¥í¥¸¥§¥¯¥È¥Ú¡¼¥¸¤Ç¸ø³«¤µ¤ì¤Æ¤¤¤Þ¤¹¡£ ¥À¥¦¥ó¥í¡¼¥É¤¹¤ë¤Ë¤Ï¡¢Subversion¤È¤¤¤¦¥Ä¡¼¥ë¤ò»È¤¤¤Þ¤¹¤¬¡¢Windows¤Î¾ì¹ç¤Ï[[TortoiseSVN]]¤¬ÊØÍø¤Ç¤·¤ç¤¦¡£ +[[TortoiseSVN]]¤ò¥À¥¦¥ó¥í¡¼¥É¤·¤Æ¥¤¥ó¥¹¥È¡¼¥ë +¥½¡¼¥¹¥³¡¼¥É¤òÊݸ¤·¤¿¤¤¥Õ¥©¥ë¥À¤Ç¡¢±¦¥¯¥ê¥Ã¥¯->¡ÖSVN Checkout¡× +¥À¥¦¥ó¥í¡¼¥É¸µ(URL Repository)¤È¤·¤Æ¡Öhttp://blockly.googlecode.com/svn/trunk/¡×¤ò»ØÄꤹ¤ë **¥µ¥ó¥×¥ë¥¢¥×¥ê¤ÇÆ°ºî³Îǧ [#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) **¥é¥ó¥²¡¼¥¸ ¥³¡¼¥É [#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; }; *Step2¡§blocks.js¥Õ¥¡¥¤¥ë¤òÊÔ½¸¤¹¤ë [#ode8945a] *Step3¡§turtle.js¥Õ¥¡¥¤¥ë¤òÊÔ½¸¤¹¤ë [#yc4f1dd3] *Step4¡§template.soy¥Õ¥¡¥¤¥ë¤òÊÔ½¸¤¹¤ë [#d1a286d0] *Step5¡§Êѹ¹¤·¤¿¥Õ¥¡¥¤¥ë¤ò¥³¥ó¥Ñ¥¤¥ë¤¹¤ë [#t4a5135b] *Step6¡§¿·¤·¤¤¥Ö¥í¥Ã¥¯¤ò¥Æ¥¹¥È¤¹¤ë [#of6b2cf0] *ºÇ¸å¤Ë [#ec79d1ce] *»²¹Í [#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.