Scratch 3.0 を Hackしよう。 Scratch Block に触ってみよう

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

スクリーンショット 2017-12-21 8.03.15.png

できました!!

次回は、Scratch-Block で作成したコードが

実行される仕組みを見て見ましょう

...

PS

今回のコードは以下

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/blocky

以下の場所でも、アレコレ書いていきます。

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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.