Hack For Scratch 3.0  2019 advent (01 プレ)  開発環境を作ろう

Qiita 2019 Advent カレンダー 用の記事です。

Hack For Scratch 3.0 Advent 2017
- https://qiita.com/kyorohiro/items/ce5b595c4e767b3b7929
- http://blogger.firefirestyle.net/2017/09/scratch30-0.html

の 2019 年度版です。実際に書き進めるのは、3月くらいから..
なので、紹介記事です。


# よりモダンに
## 開発環境は Docker and Code-Server

開発環境が上手く構築できないという質問を何度も受けました。
開発環境で手が止まるのは本質的な問題ではないです。 

これは、Scrachの開発者が、あなたの環境を想定出来ていないからです。
なので、ここで手が止まったらどうしようもありません。

そこで、Hack For Scrach 3.0 Advent 2019 では、 Docker というテクノロジーを利用して、すべて想定内の範疇にできるようにします。

## 開発環境を作ろう 

第一回目は、開発環境を作るとことから始めます。

* Docker が使えることは前提です
* Docker-Composeを使えることが前提です。


Dockerfile を書く!!

```Dockerfile:Dockerfile
FROM ubuntu:20.04

WORKDIR /works
RUN apt-get update
RUN apt-get install -y wget gnupg1
RUN apt-get install git -y
RUN apt-get install npm -y
# code-server
RUN wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz
RUN tar -xzf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz -C ./ --strip-components 1

WORKDIR /app

CMD ["/works/code-server", "--auth","none", "--host","0.0.0.0","--port","8443", "/app"]

```

そして、

```bash:terminal
$ docker build -t scrach_dev .
$ docker run -p 8080:8080 -p 8443:8443 -v $PWD:/app -it scrach_dev

```

そして、`http://0.0.0.0:8443` を 開くと、

<img width="1249" alt="Screen Shot 2019-12-25 at 1.15.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54192/3ed4c258-8e76-b148-0c87-34d45e55ccda.png">

VSCode が 表示されます。



## ビルドしてみましょう。

### Terminal を 開く
`menu -> View -> Terminal` 

<img width="1248" alt="Screen Shot 2019-12-25 at 1.17.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54192/96518387-a7e1-a8a0-bd40-7095e47a78bf.png">

※ `bash` と 入力して Bash を起動するのがお勧め


### コードを手に入れる

```bash:Terminal(VSCODE)
$ git clone https://github.com/LLK/scratch-vm.git
```

### ビルド

```bash:Terminal(VSCODE)
$ cd scratch-vm
$ npm install
$ npm run build
```
 
ref https://github.com/LLK/scratch-vm


## 起動してみる

```bash:Terminal(VSCODE)
$ npm update caniuse-lite browserslist
$ export PORT=8080
$ npm run start 
...
..
> scratch-vm@0.2.0 start /app/scratch-vm
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
...
..
/minilog/lib/web/localstorage.js] 530 bytes {main} [built]
        [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built]
        [./src/dispatch/shared-dispatch.js] 13.8 KiB {main} [built]
        [./src/dispatch/worker-dispatch.js] 6.69 KiB {main} [built]
        [./src/extension-support/argument-type.js] 686 bytes {main} [built]
        [./src/extension-support/block-type.js] 1.02 KiB {main} [built]
        [./src/extension-support/target-type.js] 308 bytes {main} [built]
        [./src/util/log.js] 84 bytes {main} [built]
            + 5 hidden modules
ℹ ｢wdm｣: Compiled successfully.

```

※ npm update caniuse-lite browserslist は、あとから指定されたので、手動で更新
  今後はいらなくなるかも


そして、`http://0.0.0.0:8080` を 開くと、

<img width="1249" alt="Screen Shot 2019-12-25 at 1.55.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54192/87cf7e8b-a0d1-319d-6237-3b0fb12e22d7.png">

おっ!!  動きました!!

この開発 Image を使えば、環境を問わず Scrachを改造できます!!
※ Image には　まだ固めません... 3月以降..





## 所感

Scracthの開発環境がかなり重い...
2017年度版で想定していた子供向けでやるのは難しいかも..
しかし、でかくなったものだ..

うーむ
打開策を考えないと


## PS

### Scrach について

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

#### 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)


### Hack For Scratch 3.0 Advent 2017

- https://qiita.com/kyorohiro/items/ce5b595c4e767b3b7929
- http://blogger.firefirestyle.net/2017/09/scratch30-0.html

#### Scratch3.0 自分専用機 を作ろう!! 2017
[(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)
[ (14) scratch-vm.js を使って、100行でHTML5化しよう](http://blogger.firefirestyle.net/2017/12/scratch-30-14-scratch-vmjs-100html5.html)
[ (15) ScratchVM の Opcode](http://blogger.firefirestyle.net/2017/12/scratch-30-15-scratchvm-opcode.html)
[ (16) ServiceWorker で、PWA 化してみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-16-serviceworker-pwa.html)



[火の型 With Scratch 2.0 (プログラム入門) 　第00巻](https://firebook.firefirestyle.net/)
[炎の型 With Scratch 2.0 (ゲームプログラム入門)](https://firefirebook.firefirestyle.net/)

### Code-Server について

以下の場所でも、アレコレ書いていきます。
https://qiita.com/advent-calendar/2019/code-server

* オンライン環境下において、iPad で Scrarch を 開発したいと
* 開発環境を、ブラウザー経由で提供して、プログラム教室や教材で使いたいとか

## 今回のコード

https://github.com/kyorohiro/advent-2019-code-server/tree/master/extra/scratch


## 次回

続く