Scratch
Blockly
ScratchDay 12

Scratch 3.0 を Hackしよう。 Blockly を触ってみよう

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

スクリーンショット 2017-12-19 23.27.46.png

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

今回のコードは以下

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/blocky

以下の場所でも、アレコレ書いていきます。

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 (ゲームプログラム入門)