Scratch 3.0 を Hackしよう。scratch-gui を インストールしてみよう

Scratch3.0 Project用の GUI を動かして見ましょう。


![スクリーンショット 2017-12-08 2.24.35.png](https://qiita-image-store.s3.amazonaws.com/0/54192/854f5066-c489-0686-615f-cfd18cfccad6.png)



すでにビルドされたものが公開されています。
http://llk.github.io/scratch-gui

Scratch2.0に近いUser Interfaceですね。
ソースは以下の場所で公開されています。
https://github.com/LLK/scratch-gui



# Readmeを読んでみる

まずは、Readmeを読んで見ましょう。
https://github.com/LLK/scratch-gui/blob/develop/README.md

英語が苦手なら、Google翻訳を通すのも良いでしょう。
https://translate.googleusercontent.com/translate_c?depth=1&hl=ja&rurl=translate.google.com&sl=en&sp=nmt4&tl=ja&u=https://github.com/LLK/scratch-gui/&usg=ALkJrhgCo73t3QS_NI3PaUtnnSdDCFRg8A

### React Component であると書かれている

React　Component として作られていると書かれています。
https://en.wikipedia.org/wiki/React_(JavaScript_library)

React Component は 最近、流行の ReactJSの ライブラリーの部品の一つです。
Scratch-guiのコードを読むことで、モダンなJavaScriptの書き方を学習できそうです。


### Githabページとして置ける作りになっている

Githubページ( https://pages.github.com/ )として、出力できると書いてあります。
Githubページは、githubに置いたHtmlとCSSとJavaScriptで Webページを作成する機能です。

サーバーサイドで動的に、変化するものではなくて、静的なWebページを出力するということです。

なるほど、 scratch-vm ( https://github.com/LLK/scratch-vm )のときと
同じように、 Androidアプリかとかできそうですね!!


### NPM でインストールできるようになっている

前回、npm で packgeをアレコレする方法を試しました。
scratch-gui は、 npm package として作られていて
npm install で、インストールできるようです。




# 動かしてしてみよう

```
npm init -f
npm install https://github.com/LLK/scratch-gui.git
cd node_modules/scratch-gui/
npm install
npm start

> scratch-gui@0.1.0 start /Users/kyorohiro/devDojo/scratch/w/ww/node_modules/scratch-gui
> webpack-dev-server

Project is running at http://0.0.0.0:8601/
webpack output is served from /
Content not from webpack is served from /Users/kyorohiro/devDojo/scratch/w/ww/node_modules/scratch-gui/build
webpack: wait until bundle finished: /

```

無事動作させる事ができました。

Add Spriteボタンをおすと

![スクリーンショット 2017-12-08 3.10.23.png](https://qiita-image-store.s3.amazonaws.com/0/54192/aab78633-8d26-c2a6-487e-9ebee60edae4.png)


いつもの画面がでてきたりと、Scratch2.0 Project みたいに扱えます。
https://scratch.mit.edu/



# 次回


つづく


# PS

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

[Scratch3.0 自分専用機 を作ろう!! (0)](http://blogger.firefirestyle.net/2017/09/scratch30-0.html)
[Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう](
http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)
[Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)](http://blogger.firefirestyle.net/2017/12/scratch30-2-scratch30-android-1.html)
[Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-2.html)
[Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-3.html)
[Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは)](http://blogger.firefirestyle.net/2017/12/scratch-30-5-webpack.html)
[Scratch 3.0 自分専用機 を作ろう!! (6) Scratch3.0 の package.jsonを読んでみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-6-scratch30-packagejson.html)
[Scratch 3.0 自分専用機 を作ろう!! (7) scratch-gui を インストールしてみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-7-scratch-gui.html)


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