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

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"]

そして、

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 を 開くと、

VSCode が 表示されます。

ビルドしてみましょう。

Terminal を 開く

menu -> View -> Terminal

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

コードを手に入れる

Terminal(VSCODE)

$ git clone https://github.com/LLK/scratch-vm.git

ビルド

Terminal(VSCODE)

$ cd scratch-vm
$ npm install
$ npm run build

ref https://github.com/LLK/scratch-vm

起動してみる

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 を 開くと、

おっ!! 動きました!!

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

所感

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

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

PS

Scrach について

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

Scratch2.0 入門

火の型 With Scratch 2.0 (プログラム入門) 　第00巻

火の型 With Scratch 2.0 (プログラム入門) 　第01巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)

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)
(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 を触ってみよう
(13) Scratch Block に触ってみよう
(14) scratch-vm.js を使って、100行でHTML5化しよう
(15) ScratchVM の Opcode
(16) ServiceWorker で、PWA 化してみよう

火の型 With Scratch 2.0 (プログラム入門) 　第00巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)

Code-Server について

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

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

今回のコード

次回

続く