- Äɲ䵤줿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
- ºï½ü¤µ¤ì¤¿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
[[Programing]]¡ä[[Blockly>Programing/Blockly]]¡äTutorial_CreateYourFirstBlock
[[Programing]]¡ä[[Blockly>Programing/Blockly2014]]¡äTutorial_CreateYourFirstBlock
#title(Blockly¤Î¥ª¥ê¥¸¥Ê¥ë¥Ö¥í¥Ã¥¯¤òºî¤Ã¤Æ¤ß¤¿¥á¥â)
ºÇ½é¤Î¥ª¥ê¥¸¥Ê¥ë¥Ö¥í¥Ã¥¯¤òºî¤Ã¤Æ¡¢Äɲ䷤ơ¢¥Æ¥¹¥È¤·¤Æ¤ß¤¿¡£
''2017-07-02 [[Blockly1.0¡§¥«¥¹¥¿¥à¥Ö¥í¥Ã¥¯¤Îºî¤êÊý>Blockly/CustomBlock]]¤ò¿·¤·¤¯½ñ¤¤Þ¤·¤¿¡£''
¤³¤Î¥Ú¡¼¥¸¤Ï¡¢Blokly¸ø¼°¥µ¥¤¥È¤Î³«È¯¥Á¥å¡¼¥È¥ê¥¢¥ë¤ò¤Ê¤¾¤Ã¤¿¤È¤¤Î¹©Äø¤È¥á¥â¤Ç¤¹¡£
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¤Î¥½¡¼¥¹¥³¡¼¥É
+(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
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¥Õ¥¡¥¤¥ë¤òÊݸ¤·¤Þ¤¹¡£
¤½¤·¤¿¤é¡¢turtle.js¥Õ¥¡¥¤¥ë¤òÊݸ¤¹¤ë¡£
*Step4¡§template.soy¥Õ¥¡¥¤¥ë¤òÊÔ½¸¤¹¤ë [#d1a286d0]
template.soy¤ò¥¨¥Ç¥£¥¿¤Ç³«¤¯
template.soy¤ò¥¨¥Ç¥£¥¿¤Ç³«¤¯¡£
{template .messages}¥Ö¥í¥Ã¥¯¤ÎÃæ¤Ë¶õ¹Ô¤ò¤¢¤±¤Æ¡¢¼¡¤Î¥³¡¼¥É¤òŽ¤êÉÕ¤±¡£
{template .messages}¥Ö¥í¥Ã¥¯¤ÎÃæ¤Ë¶õ¹Ô¤ò¤¢¤±¤Æ¡¢¼¡¤Î¥³¡¼¥É¤òŽ¤êÉÕ¤±¤ë¡£
¥ª¥¹¥¹¥á¤Î¾ì½ê¤Ï¡¢ <span id="Turtle_moveBackward"> ... ></span>¤Î¤¢¤È¡£
¥ª¥¹¥¹¥á¤Î°ÌÃ֤ϡ¢ <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.