Programing > Blockly2017 > カスタムブロックの作り方
ここでは、Blocklyのデモを改良して、乱数を作るブロックを追加します。
Blocklyのブロックは、BlocklyのエディタUIにより、ドラッグ&ドロップで作ることができます。
以前は、ブロックを作った後、Google Closure toolsで再圧縮とかしてたけど、それが不要なので、けっこう簡単です。
元になるデモは、Blocklyのデモに含まれるGenerating JavaScriptです。このデモでは、Blocklyを使って、Javascriptのコードを編集できます。
ToolboxのMathカテゴリに「random」ブロックを追加します。
ブロックのデザインは、Blockly DemoにあるBlockly Developer Toolsで行います。
保存したコードは、ブラウザのローカルストレージに「ライブラリ」として保存されます。
※エクスポート時に複数のブロックを選択しておくと、一組のファイルにまとめられる。しかし、この後の「変換コードの追加」が上書きされてしまうので注意。
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]; };
/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>
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つある。
/** * 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を使う必要はないので、自分の好みのツールでミニマイズすればいいと思う。