[[Programing]] > [[Blockly2017>Programing/Blockly2017]] > カスタムブロックの作り方
#title("Blockly1.0：カスタムブロックの作り方")
#ref(final.png,nolink)
#contents()
* 概要 [#f08c9217]
ここでは、Blocklyのデモを改良して、乱数を作るブロックを追加します。
Blocklyのブロックは、BlocklyのエディタUIにより、ドラッグ＆ドロップで作ることができます。
以前は、ブロックを作った後、Google Closure toolsで再圧縮とかしてたけど、それが不要なので、けっこう簡単です。
** デモの内容 [#h771662c]
元になるデモは、Blocklyのデモに含まれるGenerating JavaScriptです。このデモでは、Blocklyを使って、Javascriptのコードを編集できます。
-[[Blockly Demo: Generating JavaScript:https://blockly-demo.appspot.com/static/demos/generator/index.html]]
** 追加するブロック [#hee713c2]
ToolboxのMathカテゴリに「random」ブロックを追加します。
*作業準備 [#f176a70c]
** ソースコードをダウンロード [#v3942239]
Blocklyのソースコードを、次のどちらかからダウンロードして展開します。
-[[GithubからClone:https://github.com/google/blockly]]
-[[ZIPファイルのダウンロード:https://github.com/google/blockly/archive/master.zip]]
** デモプログラムを実行する [#x2d2441a]
Generating JavaScriptは、ダウンロードしたファイルの/demos/generatorにあります。
** デモプログラムを複製する [#b367259f]
/demos/generatorフォルダを、同じ/demosフォルダ内に丸ごと複製します。
ここでは例として、/demos/testとして複製しています。
index.htmlを開いて、動作確認しておきましょう。
* ブロックを作る [#mc94f82e]
** ブロックをデザインする [#e7f30605]
ブロックのデザインは、Blockly Demoにある[[Blockly Developer Tools:https://blockly-demo.appspot.com/static/demos/blockfactory/index.html]]で行います。
+[[Blockly Developer Tools:https://blockly-demo.appspot.com/static/demos/blockfactory/index.html]]を開く
+ 「Block Factory」タブをクリック
+ 次図のようにブロックを組み合わせる
+ 「Save "・・・・"」ボタンまたは 「Update "・・・・"」ボタンをクリック
#ref(block_factoy_s3.png,nolink)
保存したコードは、ブラウザのローカルストレージに「ライブラリ」として保存されます。
** ブロックをエクスポートする [#ha2db5b3]
+「Block Exporter」タブをクリック
+ 左側で、エクスポートしたいブロックのチェックボックスをオンにする
+ Export Settingsを設定
-- Block Definition(s): ブロック定義
--- Format: Javascript
--- File Name：(例)random_block.js
-- Generator Stub(s): 変換コード
--- Language: Javascript
--- File Name:(例)random.js
+「Export」ボタンをクリックして、下記のフォルダに格納する
-- ブロック定義 /blocks/random_block.js
-- 変換コード /generators/javaScript/random.js
#ref(block_expoter_s.png,nolink)
※エクスポート時に複数のブロックを選択しておくと、一組のファイルにまとめられる。しかし、この後の「変換コードの追加」が上書きされてしまうので注意。
** 変換コードを追加する [#kc1a1548]
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にブロックを読み込む [#tb02c9bb]
/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にカスタムブロックを追加する [#t2a9dbdd]
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>
** 動作確認 [#s6dd5f6c]
編集した/demos/test/index.htmlを開くと、Mathカテゴリにrandomブロックが追加されています。
#ref(add_toolbox.png,nolink)
もちろん、このブロックを使って、プログラムを組み立てたり、確認したり、実行したりできます。
#ref(final.png,nolink)
* その他 [#g3701ce6]
** 考察 [#b6e7342f]
以前のバージョンは、pythonのスクリプト(build.py)を動かす必要があった。あれは、Google Clusur template(GCT)でJSのスクリプトをマージ＋ミニマイズしていたのではないか？
別にGCTを使う必要はないので、自分の好みのツールでミニマイズすればいいと思う。
** 関連ページ [#ab720fb9]
- [[Blockly2017>Programing/Blockly2017]]
- [[Blockly1.0：ツールボックスとワークスペースの設定方法>Blockly/Toolbox_WorkSpace]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
