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 に触ってみよう