Blockly1.0:カスタムブロックの作り方

https://www.catch.jp:443/wiki/index.php?Blockly%2FCustomBlock

Programing > Blockly2017 > カスタムブロックの作り方

final.png

概要

ここでは、Blocklyのデモを改良して、乱数を作るブロックを追加します。

Blocklyのブロックは、BlocklyのエディタUIにより、ドラッグ&ドロップで作ることができます。

以前は、ブロックを作った後、Google Closure toolsで再圧縮とかしてたけど、それが不要なので、けっこう簡単です。

デモの内容

元になるデモは、Blocklyのデモに含まれるGenerating JavaScriptです。このデモでは、Blocklyを使って、Javascriptのコードを編集できます。

追加するブロック

ToolboxのMathカテゴリに「random」ブロックを追加します。

ブロックを作る

ブロックをデザインする

ブロックのデザインは、Blockly DemoにあるBlockly Developer Toolsで行います。

  1. Blockly Developer Toolsを開く
  2. 「Block Factory」タブをクリック
  3. 次図のようにブロックを組み合わせる
  4. 「Save "・・・・"」ボタンまたは 「Update "・・・・"」ボタンをクリック
block_factoy_s3.png

保存したコードは、ブラウザのローカルストレージに「ライブラリ」として保存されます。

ブロックをエクスポートする

  1. 「Block Exporter」タブをクリック
  2. 左側で、エクスポートしたいブロックのチェックボックスをオンにする
  3. Export Settingsを設定
    • Block Definition(s): ブロック定義
      • Format: Javascript
      • File Name:(例)random_block.js
    • Generator Stub(s): 変換コード
      • Language: Javascript
      • File Name:(例)random.js
  4. 「Export」ボタンをクリックして、下記のフォルダに格納する
    • ブロック定義 /blocks/random_block.js
    • 変換コード /generators/javaScript/random.js
block_expoter_s.png

※エクスポート時に複数のブロックを選択しておくと、一組のファイルにまとめられる。しかし、この後の「変換コードの追加」が上書きされてしまうので注意。

組み込み先を準備する

ソースコードをダウンロード

Blocklyのソースコードを、次のどちらかからダウンロードして展開します。

デモプログラムを実行する

Generating JavaScriptは、ダウンロードしたファイルの/demos/generatorにあります。

デモプログラムを複製する

/demos/generatorフォルダを、同じ/demosフォルダ内に丸ごと複製します。

ここでは例として、/demos/testとして複製しています。

index.htmlを開いて、動作確認しておきましょう。

ブロックを組み込む

変換コードを追加する

random.jsを編集して、ブロックから変換するコードを記述します(5行目)。

Blockly.JavaScript['random'] = function(block) {
  var value_min = Blockly.JavaScript.valueToCode(block, 'min', Blockly.JavaScript.ORDER_ATOMIC);
  var value_max = Blockly.JavaScript.valueToCode(block, 'max', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = 'Math.floor( Math.random() * (' + value_max + ' - ' + value_min + ' + 1 )) + ' +  value_min;
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

index.htmlにブロックを読み込む

/demos/test/index.htmlを開いて、「random_block.js」と「random.js」を読み込みできるようにします(6行目と7行目)。

<title>Blockly Demo: Generating JavaScript</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../javascript_compressed.js"></script>
<script src="../../msg/js/en.js"></script>
<script src="../../blocks/random_block.js"></script>
<script src="../../generators/javaScript/random.js"></script>

Toolboxにカスタムブロックを追加する

Tooboxは、<xml id="toolbox" style="display: none"> - </xml>で、index.htmlに定義されています。

このToolboxのMathカテゴリに、作成した「random」ブロックを追加します(5行目)。

<category name="Math">
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="math_single"></block>
  <block type="random"></block>
</category>

動作確認

編集した/demos/test/index.htmlを開くと、Mathカテゴリにrandomブロックが追加されています。

add_toolbox.png

もちろん、このブロックを使って、プログラムを組み立てたり、確認したり、実行したりできます。

final.png

その他

ブロックの色を変更する

ブロックの色を変える方法は3つある。

  • Blockly Developer Toolsで色(色相:Hue)を指定する。彩度(Saturation)と明度(Value)は固定
  • 彩度(Saturation)と明度(Value)は、blocks_compressed.js または core/constant.jsにあるBlockly.HSV_SATURATIONとBlockly.HSV_VALUEを修正する(0.0-1.0)。これは、全てのブロックの色合いを調整する。
/**
 * The richness of block colours, regardless of the hue.
 * Must be in the range of 0 (inclusive) to 1 (exclusive).
 */
Blockly.HSV_SATURATION = 0.45;
/**
 * The intensity of block colours, regardless of the hue.
 * Must be in the range of 0 (inclusive) to 1 (exclusive).
 */
Blockly.HSV_VALUE = 0.65;
this.setColour("#808080");

考察

以前のバージョンは、pythonのスクリプト(build.py)を動かす必要があった。あれは、Google Clusur template(GCT)でJSのスクリプトをマージ+ミニマイズしていたのではないか?

別にGCTを使う必要はないので、自分の好みのツールでミニマイズすればいいと思う。

関連ページ


  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: fileblock_factoy_s3.png 182件 [詳細] filefinal.png 221件 [詳細] fileblock_factoy_s2.png 209件 [詳細] fileadd_toolbox.png 204件 [詳細] fileblock_expoter_s.png 195件 [詳細]
Last-modified: 2018-03-30 (金) 21:46:48 (564d)