前回 、Blockly を触りました。
Scratch 3.0 の Block は、Blockly 由来なので、「同様の方法で追加できるか。」「Scratch 独自の拡張がされているはずです」。
実際に、試してみましょう。
Scratch Block
Scratch3.0 の Visual Programming 環境は、公開されています。
Scratchの Interface を、様々なアプリに、再利用できそうですね。
Scratch Block を試してみよう
今回は、webpack を利用する方法で、実験してみます。
コードは以下
Renderの実験 や Babelの実験 やWebpackの実験 で、環境構築について、
重複するので、端折ります。
Projectを作る
mkdir scratch-block-test
cd scratch-block-test/
npm init -f
npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015
npm install --save-dev webpack scratch-blocks web-dev-server copy-webpack-plugin
Webpackの準備をする
以下のような感じ
Contentsを追加する
emacs src/index.html
<html>
<head>
<title>Hello, World!!</title>
</head>
<body>
<div id="blocks"></div>
<script src="scratch-block-test.js"></script>
</body>
</html>
emacs src/scratch-block-test.js
const Blockly = require("scratch-blocks");
class HelloWorld {
hello() {
console.log("Hello, World!!");
}
}
var helloWorld = new HelloWorld();
helloWorld.hello();
// Instantiate scratch-blocks and attach it to the DOM.
const workspace = Blockly.inject('blocks', {
media: './media/',
zoom: {
controls: true,
wheel: true,
startScale: 0.75
},
colours: {
workspace: '#334771',
flyout: '#283856',
scrollbar: '#24324D',
scrollbarHover: '#0C111A',
insertionMarker: '#FFFFFF',
insertionMarkerOpacity: 0.3,
fieldShadow: 'rgba(255, 255, 255, 0.3)',
dragShadowOpacity: 0.6
}
});
動かしてみる
> webpack-dev-server
Project is running at http://0.0.0.0:8362/
webpack output is served from /
できました!!
次回は、Scratch-Block で作成したコードが
実行される仕組みを見て見ましょう
...
PS
今回のコードは以下
以下の場所でも、アレコレ書いていきます。
Scratch2.0 入門
火の型 With Scratch 2.0 (プログラム入門) 第00巻
火の型 With Scratch 2.0 (プログラム入門) 第01巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)
Scratch3.0 自分専用機 を作ろう!!
(0)Scratch 3.0 自分専用機 を作ろう!! (0)
(1) Scratch3.0をビルドしてみよう
(2) Scratch3.0 を Androidアプリとして動作させてみよう (1)
(3) Scratch3.0 を Androidアプリとして動作させてみよう (2)
(4) Scratch3.0 を Androidアプリとして動作させてみよう (3)
(5) Webpack とは)
(6) Scratch3.0 の package.jsonを読んでみよう
(7) scratch-gui を インストールしてみよう
(8) scratch-vm に利用されている、scratch-xxx を触ってみよう
(9) Babel を触ってみよう
(10) scratch-render.js で 何か作って触ってみよう
(11) scratch-storage.js を触ってみよう
(12) Blockly を触ってみよう
(13) Scratch Block に触ってみよう