[[Programing]]＞[[Blockly>Programing/Blockly]]＞Tutorial_CreateYourFirstBlock
#title(Blockly - 最初のブロックを作るチュートリアル)
最初のオリジナルブロックを作って、追加して、テストするチュートリアル。Bloklyに機能追加するための入門記事です。
このページは、公式サイトの開発チュートリアルの抄訳＋訳者のコメントです。
-[[Tutorial_CreateYourFirstBlock:https://code.google.com/p/blockly/wiki/Tutorial_CreateYourFirstBlock]] 公式サイトの開発チュートリアル、Tutorial for creating, adding, and testing your first block
以下、書きかけ
-----
この[[チュートリアル: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]]にブロックを追加します。
このブロック「move to」は、お絵かきカメのツールボックスに、指定した座標に直接移動します。
#contents
*準備する [#v88a6ef4]
-Webブラウザ
-シンプルなテキストエディタ
-Subversion
-Blocklyのソースコード
最初の2つは、自分の好みのものを使えばいいでしょう。
最後の2つは、次のステップで入手します。
**SubversionとBlocklyソースコードのダウンロード [#ee4b95bf]
＊訳注：
＊ソースコードは、Githubの「Download ZIP」が簡単だと思う。https://github.com/google/blockly/archive/master.zip
＊これなら、Subversionは不要だし。
＊ファイルをダウンロードして、解凍したら、「サンプルアプリで動作確認」に進む
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.
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
