By kyorohiro (河村潔広)
Scratch3.0 Project用の GUI を動かして見ましょう。
すでにビルドされたものが公開されています。
http://llk.github.io/scratch-gui
Scratch2.0に近いUser Interfaceですね。
ソースは以下の場所で公開されています。
https://github.com/LLK/scratch-gui
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
https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Component は 最近、流行の ReactJSの ライブラリーの部品の一つです。
Scratch-guiのコードを読むことで、モダンなJavaScriptの書き方を学習できそうです。
Githubページは、githubに置いたHtmlとCSSとJavaScriptで Webページを作成する機能です。
サーバーサイドで動的に、変化するものではなくて、静的なWebページを出力するということです。
なるほど、 scratch-vm ( https://github.com/LLK/scratch-vm )のときと
同じように、 Androidアプリかとかできそうですね!!
scratch-gui は、 npm package として作られていて
npm install で、インストールできるようです。
npm install https://github.com/LLK/scratch-gui.git
cd node_modules/scratch-gui/
npm install
npm start
無事動作させる事ができました。
Add Spriteボタンをおすと
いつもの画面がでてきたりと、Scratch2.0 Project みたいに扱えます。
https://scratch.mit.edu/
つづく
火の型 With Scratch 2.0 (プログラム入門) 第00巻
火の型 With Scratch 2.0 (プログラム入門) 第01巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)
炎の型工房 ScratchとDartでゲームプログラム入門 Advent Calendar 2016
Qiita: Scratch Advent Calendar 2017
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 -fnpm 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
Scratch 3.0 自分専用機 を作ろう!! (0)火の型 With Scratch 2.0 (プログラム入門) 第00巻
火の型 With Scratch 2.0 (プログラム入門) 第01巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)
炎の型工房 ScratchとDartでゲームプログラム入門 Advent Calendar 2016
Qiita: Scratch Advent Calendar 2017
Comments
Post a Comment