Blockly を触ってみましょう。
Scratch3.0 は、Blockly を利用しています。 visual programming interfaces を、
なる早で、実現する為に採用されました。
とっても、簡単に独自の Visual programming interfaces を 作ることができます。
ref https://github.com/LLK/scratch-blocks
Scratch Block のコードに入る前に、 Blockly に触れてみましょう!!
Blocklyとは
Blockly は、JavaScriptのライブラリーです。 Web、Android、iOSに、
Visual programming interfaces を提供します。
以下のデモを見ていただけるのが、早いでしょう
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 のBlock を配置してみよう
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なら、 とするだけで
追加できます。
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 を使う
Blockly.JavaScript.workspaceToCode(blockyWorkspace); で
JavaScriptに変換できます。
try {
eval(code);
} catch (e) {
alert(JSON.stringify(e));
}
とすれば、生成した JavaScriptを実行することもできますね!!
つづく
PS
今回のコードは以下
以下の場所でも、アレコレ書いていきます。
Scratch3.0 自分専用機 を作ろう!!
(0)Scratch 3.0 自分専用機 を作ろう!! (0)
(1) Scratch3.0をビルドしてみよう
(2) Scratch3.0 を Androidアプリとして動作させてみよう (1)
(3) Scratch3.0 を Androidアプリとして動作させてみよう (2)
(4) Scratch3.0 を Androidアプリとして動作させてみよう (3)
(5) Webpack とは)
(6) Scratch3.0 の package.jsonを読んでみよう
(7) scratch-gui を インストールしてみよう
(8) scratch-vm に利用されている、scratch-xxx を触ってみよう
(9) Babel を触ってみよう
(10) scratch-render.js で 何か作って触ってみよう
(11) scratch-storage.js を触ってみよう
(12) Blockly を触ってみよう
Scratch2.0 入門
火の型 With Scratch 2.0 (プログラム入門) 第00巻
火の型 With Scratch 2.0 (プログラム入門) 第01巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)