More than 5 years have passed since last update.

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

Scratch

Last updated at 2017-12-07Posted at 2017-12-07

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 (ゲームプログラム入門)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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