Blockly/Tutorial のバックアップ差分(No.4)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]]>[[Blockly>Programing/Blockly]]>Tutorial_CreateYourFirstBlock

#title(Blockly - 最初のブロックを作るチュートリアル)

最初のオリジナルブロックを作って、追加して、テストするチュートリアル。Bloklyに機能追加するための入門記事です。

この[[チュートリアル: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

以下、書きかけ
-----

この[[チュートリアル: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とyの値を指定することで、カメを(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.


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS