By kyorohiro (河村潔広)
Blockly を触ってみましょう。
https://developers.google.com/blockly/
Scratch3.0 は、Blockly を利用しています。 visual programming interfaces を、
なる早で、実現する為に採用されました。
とっても、簡単に独自の Visual programming interfaces を 作ることができます。
ref https://github.com/LLK/scratch-blocks
Scratch Block のコードに入る前に、 Blockly に触れてみましょう!!
Blockly は、JavaScriptのライブラリーです。 Web、Android、iOSに、
Visual programming interfaces を提供します。
以下のデモを見ていただけるのが、早いでしょう
https://blockly-demo.appspot.com/static/demos/code/index.html
Scratch みたいな、Blockを繋げて、プログラムを書けるようです。
以下のJavaScript ファイルが含まれています。
これらを利用して、Blocklyを操作します。
blockly_accessible_compressed.js
blockly_compressed.js
blocks_compressed.js
dart_compressed.js
javascript_compressed.js
lua_compressed.js
package-lock.json
package.json
php_compressed.js
python_compressed.js
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Fixed Blockly</title>
<script src="./blockly_compressed.js"></script>
<script src="./blocks_compressed.js"></script>
<script src="./msg/js/en.js"></script>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 800px;"></div>
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
var blockyWorkspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
</body>
</html>
と書いて見ましょう。
これだけで、Visual Programming 用の Editor が、動作します。
DIV ブロックに関連付けしています。
デフォルトでは、ツールボックスに置きたい Block は、https://github.com/google/blockly/tree/master/blocks
に登録されている Blockなら、 <block type="math_number"></block> とするだけで
追加できます。
Blockly.JavaScript.workspaceToCode(blockyWorkspace); で
JavaScriptに変換できます。
try {
eval(code);
} catch (e) {
alert(JSON.stringify(e));
}
とすれば、生成した JavaScriptを実行することもできますね!!
Blockly を触ってみましょう。
https://developers.google.com/blockly/
Scratch3.0 は、Blockly を利用しています。 visual programming interfaces を、
なる早で、実現する為に採用されました。
とっても、簡単に独自の Visual programming interfaces を 作ることができます。
ref https://github.com/LLK/scratch-blocks
Scratch Block のコードに入る前に、 Blockly に触れてみましょう!!
Blocklyとは
https://developers.google.com/blockly/guides/overviewBlockly は、JavaScriptのライブラリーです。 Web、Android、iOSに、
Visual programming interfaces を提供します。
以下のデモを見ていただけるのが、早いでしょう
https://blockly-demo.appspot.com/static/demos/code/index.html
Scratch みたいな、Blockを繋げて、プログラムを書けるようです。
Blockly を使ってみよう!!
Javascript のライブラリを取得しよう
git clone https://github.com/google/blockly.git以下のJavaScript ファイルが含まれています。
これらを利用して、Blocklyを操作します。
blockly_accessible_compressed.js
blockly_compressed.js
blocks_compressed.js
dart_compressed.js
javascript_compressed.js
lua_compressed.js
package-lock.json
package.json
php_compressed.js
python_compressed.js
Blockly のBlocky を配置してみよう
emacs hello_01.html<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Fixed Blockly</title>
<script src="./blockly_compressed.js"></script>
<script src="./blocks_compressed.js"></script>
<script src="./msg/js/en.js"></script>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 800px;"></div>
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
var blockyWorkspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
</body>
</html>
と書いて見ましょう。
これだけで、Visual Programming 用の Editor が、動作します。
Blockly.inject() を使う
Blockly.inject({ブロックを置く場所のDOM}, {ツールボックスの設定のDOM}) で、DIV ブロックに関連付けしています。
デフォルトでは、ツールボックスに置きたい Block は、https://github.com/google/blockly/tree/master/blocks
に登録されている Blockなら、 <block type="math_number"></block> とするだけで
追加できます。
Blocklyのコードを Javascript に変換して見ましょう。
emacs index_02.html
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Fixed Blockly</title>
<script src="./blockly_compressed.js"></script>
<script src="./blocks_compressed.js"></script>
<script src="./msg/js/en.js"></script>
<script src="./dart_compressed.js"></script>
<script src="./javascript_compressed.js"></script>
</head>
<body>
<button id="dartButton">Dart</button>
<button id="javascriptButton">Javascript</button>
<button id="runButton" style="background-color: red;">Run</button>
<div id="blocklyDiv" style="height: 480px; width: 800px;"></div>
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
var blockyWorkspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
var dartButton = document.getElementById("dartButton");
dartButton.addEventListener("click", function(){
var code = Blockly.Dart.workspaceToCode(blockyWorkspace);
alert(code);
});
var javascriptButton = document.getElementById("javascriptButton");
javascriptButton.addEventListener("click", function(){
var code = Blockly.JavaScript.workspaceToCode(blockyWorkspace);
alert(code);
});
var runButton = document.getElementById("runButton");
runButton.addEventListener("click", function(){
var code = Blockly.JavaScript.workspaceToCode(blockyWorkspace);
console.log(code);
try {
eval(code);
} catch (e) {
alert(JSON.stringify(e));
}
});
</script>
</body>
</html>
Dart とボタンと、JavaScript ボタンとRUNボタンを追加しました。
JavaScript ボタンを押すと、並べたBlockを JavaScriptに変換します。
RUN ボタンを押すと、 JavaScriptに変換したあと、その JavaScriptを実行します。
Blockly.JavaScript.workspaceToCode を使う
JavaScriptに変換できます。
try {
eval(code);
} catch (e) {
alert(JSON.stringify(e));
}
とすれば、生成した JavaScriptを実行することもできますね!!
Comments
Post a Comment