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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.