- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > [[Blockly1.0>FBlockly2017]] > カスタムブロックの作り方
[[Programing]] > [[Blockly2017>Programing/Blockly2017]] > カスタムブロックの作り方
title("Blockly1.0：カスタムブロックの作り方")
#title("Blockly1.0：カスタムブロックの作り方")
#ref(final.png,nolink)
#contents()
* 概要 [#f08c9217]
ここでは、Blocklyのデモを改良して、乱数を作るブロックを追加します。
Blocklyのブロックは、BlocklyのエディタUIにより、ドラッグ＆ドロップで作ることができます。
以前は、ブロックを作った後、Google Closure toolsで再圧縮とかしてたけど、それが不要なので、けっこう簡単です。
** デモの内容 [#h771662c]
元になるデモは、Blocklyのデモに含まれるGenerating 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にあります。index.htmlを開いて、動作確認しておきましょう。
** デモプログラムを複製する [#b367259f]
/demos/generatorフォルダを丸ごと複製します。
ここでは例として、/demos/testとして複製しています。
** ブロックをデザインする [#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_s2.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)
** random.jsに変換コードを追加する [#kc1a1548]
random.jsを編集して、ブロックから変換するコードを記述します(5行目)。
Blockly.JavaScript['random'] = function(block) {
var value_min = Blockly.JavaScript.valueToCode(block, 'min', Blockly.JavaScript.ORDER_ATOMIC);
var value_man = Blockly.JavaScript.valueToCode(block, 'man', Blockly.JavaScript.ORDER_ATOMIC);
// TODO: Assemble JavaScript into code variable.
var code = 'Math.floor( Math.random() * (' + value_man + ' - ' + value_min + ' + 1 )) + ' + value_min;
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
** /demos/test/index.htmlにブロックを読み込む [#tb02c9bb]
/demos/test/index.htmlを開いて、以下のスクリプトを読み込みできるようにします(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に定義されています。ここに、作成したブロックをMathカテゴリに追加します(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)
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
