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

すでにビルドされたものが公開されています。
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ボタンをおすと

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

次回

つづく

PS

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

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

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