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](https://qiita-image-store.s3.amazonaws.com/0/54192/2d52e9af-2dd6-7370-decb-222345affc4e.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なら、 <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

今回のコードは以下

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



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

#### Scratch3.0 自分専用機 を作ろう!!
[(0)Scratch 3.0 自分専用機 を作ろう!! (0)](http://blogger.firefirestyle.net/2017/09/scratch30-0.html)
[(1) Scratch3.0をビルドしてみよう](
http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)
[(2) Scratch3.0 を Androidアプリとして動作させてみよう (1)](http://blogger.firefirestyle.net/2017/12/scratch30-2-scratch30-android-1.html)
[(3) Scratch3.0 を Androidアプリとして動作させてみよう (2)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-2.html)
[(4) Scratch3.0 を Androidアプリとして動作させてみよう (3)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-3.html)
[(5) Webpack とは)](http://blogger.firefirestyle.net/2017/12/scratch-30-5-webpack.html)
[(6) Scratch3.0 の package.jsonを読んでみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-6-scratch30-packagejson.html)
[(7) scratch-gui を インストールしてみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-7-scratch-gui.html)
[(8) scratch-vm に利用されている、scratch-xxx を触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-8-scratch-vm-scratch-xxx.html)
[(9) Babel を触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-9-babel.html)
[ (10) scratch-render.js で 何か作って触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-9-scratch-renderjs.html)
[ (11) scratch-storage.js を触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-11-scratch-storagejs.html)
[ (12) Blockly を触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-12-blockly.html)

#### Scratch2.0 入門

<img src="https://qiita-image-store.s3.amazonaws.com/0/54192/ce995d78-4d14-fe94-0ac5-216d24ddf391.png" width=50%>

[火の型 With Scratch 2.0 (プログラム入門) 　第00巻](https://www.gitbook.com/book/kyorohiro/firestyle/details)
[火の型 With Scratch 2.0 (プログラム入門) 　第01巻](https://www.gitbook.com/book/kyorohiro/firestyle01/details)
[炎の型 With Scratch 2.0 (ゲームプログラム入門)](https://www.gitbook.com/book/kyorohiro/doc_scratch/details)