Scratch 3.0 自分専用機 を作ろう!! (7) scratch-gui を インストールしてみよう

By kyorohiro (河村潔広)

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/



次回


つづく






Comments

  1. Goyang Casino Hotel - Las Vegas
    Goyang Casino Hotel is worrione the septcasino official name of herzamanindir the property for goyangfc.com its gaming facilities in the resort Las febcasino.com Vegas. The resort's gaming floor, casino, and spa are

    ReplyDelete

Post a Comment