Scratch3.0 + obniz 拡張ブロック

![IMG_3287.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/bc3b985f-4d18-eec6-c213-d69d8f215624.jpeg)


### Scratch
プログラミング教育のツールとして多くの小学校やプログラミング教室で導入されているアレですね。ローカルでビルドして拡張ブロックで遊べることを知ったので、お！と思いやってみました。

### obniz
https://obniz.io/ja/
「Webの技術でハードとソフトをつなぐ」アレです。
Webベース（Javascript等）でIoTデバイスの制御ができるアレですね。

### 実施環境
Mac Mojave 10.14.4 


# ローカルの環境構築
## ソースをclone


```
git clone --depth 1 https://github.com/llk/scratch-vm.git
git clone --depth 1 https://github.com/llk/scratch-gui.git
```

scratch-vmをnodeモジュールとしてscratch-guiから参照しますので、npm link を使って同時に開発できるようにします。

```
cd scratch-vm && npm install && npm link
cd scratch-gui && npm link scratch-vm && npm install
```

## 実行
```
cd scratch-gui && npm run start
```

これでローカル環境でScratchが実行されます。
ex: http://localhost:8601

# obniz 拡張ブロックの追加

拡張ブロックの追加方法はこちらをおもいっきり参考にさせて頂きました。ありがとうございます！
https://qiita.com/Hiroyuki_OSAKI/items/a46e1c881d3aed4661f7

```scratch-vm/src/extensions/scratch3_obniz/Scratch3Obniz.js
const ArgumentType = require('../../extension-support/argument-type');
const BlockType = require('../../extension-support/block-type');
const Cast = require('../../util/cast');


class Scratch3Obniz {
    constructor (runtime) {
        this.runtime = runtime;
        this.obniz = null;
    }

    getInfo () {
        return {
            id: 'obniz',
            name: 'Obniz Blocks',
            blocks: [
                {
                    opcode: 'connect',
                    blockType: BlockType.COMMAND,
                    text: 'obniz id [TEXT]',
                    arguments: {
                        TEXT: {
                            type: ArgumentType.STRING,
                            defaultValue: "xxxx-xxxx"
                        }
                    }
                },
                {
                    opcode: 'displayMessage',
                    blockType: BlockType.COMMAND,
                    text: 'Display [TEXT]',
                    arguments: {
                        TEXT: {
                            type: ArgumentType.STRING,
                            defaultValue: "hello"
                        }
                    }
                }

            ],
            menus: {
            }
        };
    }

    connect (args) {
        const text = Cast.toString(args.TEXT);
        this.obniz = new window.Obniz(text);     
    }

    displayMessage (args) {
        const text = Cast.toString(args.TEXT);
        this.obniz.display.clear();
        this.obniz.display.print(text);        
    }
}

module.exports = Scratch3Obniz;
```
```scratch-gui/src/playground/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google" value="notranslate">
    <link rel="shortcut icon" href="static/favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <!-- ＊＊＊＊追加＊＊＊＊ -->
    <script src="https://unpkg.com/obniz/obniz.js"></script>

    <% if (htmlWebpackPlugin.options.sentryConfig) { %>
        <!-- Sentry error logging to help with finding bugs -->
        <script src="https://cdn.ravenjs.com/3.22.1/raven.min.js" crossorigin="anonymous"></script>
        <script>
            Raven.config(<%= htmlWebpackPlugin.options.sentryConfig %>).install();
        </script>
        <!-- /Sentry -->
    <% } %>
  </head>
  <body>
  </body>
</html>
```

最初の画像にあるように、obniz id を入力して旗をクリックすると接続され、スペースで任意の文字がLEDに表示されます。
Scratch + obniz 他にも色々楽しめそうです！


### おまけ
![IMG_3289.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119864/c00961b5-af1c-eaaf-dfb1-c664ce68e2f5.jpeg)