Scratch 3.0 自分専用機 を作ろう!! (12) Blockly を触ってみよう

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とは

https://developers.google.com/blockly/guides/overview

Blockly は、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 を使う


Blockly.JavaScript.workspaceToCode(blockyWorkspace); で
JavaScriptに変換できます。

      try {
        eval(code);
      } catch (e) {
        alert(JSON.stringify(e));
      }

とすれば、生成した JavaScriptを実行することもできますね!!





つづく



PS

今回のコードは以下

Comments