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

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

概要 †

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

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

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

デモの内容 †

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

• Blockly Demo: Generating JavaScript

追加するブロック †

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

ブロックを作る †

ブロックをデザインする †

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

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

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

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

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

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

組み込み先を準備する †

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

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

• GithubからClone
• ZIPファイルのダウンロード

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

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ブロックが追加されています。

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

その他 †

ブロックの色を変更する †

ブロックの色を変える方法は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)。これは、全てのブロックの色合いを調整する。
  • https://groups.google.com/forum/#!topic/blockly/6qLrbJSwE3w

/**
 * 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;

• カスタマイズした追加ブロックは、#RRGGBBで色指定できる
  • https://developers.google.com/blockly/reference/js/Blockly.Block#setColour

this.setColour("#808080");

考察 †

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

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

関連ページ †

• Blockly2017
• Blockly1.0：ツールボックスとワークスペースの設定方法