Scratch 3.0 自分専用機 を作ろう!! (13) Scratch Block に触ってみよう

on
By kyorohiro (河村潔広)

前回、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