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

[前回](https://qiita.com/kyorohiro/items/19b56cedc3301d9e4aad) 、Blockly を触りました。



Scratch 3.0 の Block は、Blockly 由来なので、「同様の方法で追加できるか。」「Scratch 独自の拡張がされているはずです」。



実際に、試してみましょう。



# Scratch Block

Scratch3.0 の Visual Programming 環境は、公開されています。

https://github.com/LLK/scratch-blocks



Scratchの Interface を、様々なアプリに、再利用できそうですね。







# Scratch Block を試してみよう
今回は、webpack を利用する方法で、実験してみます。



コードは以下

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-block-test



[Renderの実験](https://qiita.com/kyorohiro/items/71b5a0c366b1e62600f7) や [Babelの実験](https://qiita.com/kyorohiro/items/58f53fceb021057e1595) や[Webpackの実験](https://qiita.com/kyorohiro/items/2eef7b0de3b5d6e36255) で、環境構築について、

重複するので、端折ります。





## Projectを作る

```
mkdir scratch-block-test

cd scratch-block-test/

npm init -f

npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015

npm install --save-dev webpack scratch-blocks web-dev-server copy-webpack-plugin
```




## Webpackの準備をする

以下のような感じ

https://github.com/kyorohiro/doc.advent.scratch30/blob/master/scratch-block-test/webpack.config.js





## Contentsを追加する
emacs src/index.html

```
<html>
<head>
 <title>Hello, World!!</title>
</head>
<body>
 <div id="blocks"></div>
 <script src="scratch-block-test.js"></script>
</body>
</html>
```


emacs src/scratch-block-test.js

```
const Blockly = require("scratch-blocks");
class HelloWorld {
    hello() {
        console.log("Hello, World!!");
    }
}

var helloWorld = new HelloWorld();
helloWorld.hello();

// Instantiate scratch-blocks and attach it to the DOM.
const workspace = Blockly.inject('blocks', {
    media: './media/',
    zoom: {
        controls: true,
        wheel: true,
        startScale: 0.75
    },

    colours: {
        workspace: '#334771',
        flyout: '#283856',
        scrollbar: '#24324D',
        scrollbarHover: '#0C111A',
        insertionMarker: '#FFFFFF',
        insertionMarkerOpacity: 0.3,
        fieldShadow: 'rgba(255, 255, 255, 0.3)',
        dragShadowOpacity: 0.6
    }
});
```



## 動かしてみる

```
> webpack-dev-server

Project is running at http://0.0.0.0:8362/

webpack output is served from /
```

![スクリーンショット 2017-12-21 8.03.15.png](https://qiita-image-store.s3.amazonaws.com/0/54192/c542d6c6-b22f-2f18-7883-7034bf64b1f6.png)



できました!!



次回は、Scratch-Block で作成したコードが

実行される仕組みを見て見ましょう

...









# PS

今回のコードは以下

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



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


#### Scratch2.0 入門

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

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

[火の型 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)



#### 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)
[ (13) Scratch Block に触ってみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-13-scratch-block.html)