By kyorohiro (河村潔広)
前回、Blockly を触りました。
Scratch 3.0 の Block は、Blockly 由来なので、「同様の方法で追加できるか。」「Scratch 独自の拡張がされているはずです」。
実際に、試してみましょう。
https://github.com/LLK/scratch-blocks
Scratchの Interface を、様々なアプリに、再利用できそうですね。
コードは以下
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-block-test
renderの実験 や Babelの実験 やWebpackの実験 で、環境構築について、
重複するので、端折ります。
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
https://github.com/kyorohiro/doc.advent.scratch30/blob/master/scratch-block-test/webpack.config.js
<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
}
});
前回、Blockly を触りました。
Scratch 3.0 の Block は、Blockly 由来なので、「同様の方法で追加できるか。」「Scratch 独自の拡張がされているはずです」。
実際に、試してみましょう。
Scratch Block
Scratch3.0 の Visual Programming 環境は、公開されています。https://github.com/LLK/scratch-blocks
Scratchの Interface を、様々なアプリに、再利用できそうですね。
Scratch Block を試してみよう
今回は、webpack を利用する方法で、実験してみます。コードは以下
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-block-test
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の準備をする
以下のような感じhttps://github.com/kyorohiro/doc.advent.scratch30/blob/master/scratch-block-test/webpack.config.js
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 で作成したコードが
実行される仕組みを見て見ましょう
...
Comments
Post a Comment