オリジナルのヴィジュアルプログラミング環境を作ろう

京都なんか#5 id:Pasta-K / @pastak

こんにちは

https://gyazo.com/6db963f8b16abc9c5c24aa7e9902cc27

元はてなインターン(2013)

株式会社はてな アルバイト

TypeScript

Nota Inc Gyazo開発チーム アルバイト

JavaScript / React / Ruby on Rails / Browser Extension

ビール仕入れ業 / ビールサーバー運用エンジニア

趣味: ビール🍻

宣伝

https://生誕祭.pastak.net/2019/img/flyer.png

今日の話題

https://gyazo.com/b0534b37e3c69b91e041a09bb2a24b96 https://linecorp.com/ja/pr/news/ja/2019/2869

ヴィジュアルプログラミング環境作るの流行ってる

我々もやってみましょう

用意するもの

Blockly

お好みのウェブサーバー

Blockly

Google製のビジュアルプログラミングエディタライブラリ

巷で人気らしいScratchも3.0からはこれがベースになってる

Blockly

サンプルがあるので触ってみよう

任意のブロックを作れる

出力結果も任意のものに出来る

JSやXMLなどをちまちま書くと出来る

やってみます

ライブラリ持ってくる

https://raw.githubusercontent.com/google/blockly/master/blockly_compressed.js

https://raw.githubusercontent.com/google/blockly/master/blocks_compressed.js

https://raw.githubusercontent.com/google/blockly/master/msg/js/ja.js

サンプルみたいなのやってみる

code: index.html

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

ワークスペース適当にdiv作ってやる

code:index.html

<block type="controls_if"></block>

<block type="logic_compare"></block>

<block type="controls_repeat_ext"></block>

<block type="math_number">

<field name="NUM">123</field>

</block>

<block type="math_arithmetic"></block>

<block type="text"></block>

<block type="text_print"></block>

</xml>

ブロックの定義をXMLで書く

code:main.js

'use strict';

const workspace = Blockly.inject('blocklyDiv', {

toolbox: document.getElementById('toolbox')

});

例えばJavaScriptを生成実行できるようにする

ブロックをJSに変換するルール集

https://raw.githubusercontent.com/google/blockly/master/javascript_compressed.js

code:main.js

const onUpdate = () => {

const code = Blockly.JavaScript.workspaceToCode(workspace);

console.log(code)

}

workspace.addChangeListener(onUpdate)

カスタムブロックを増やしたい

code: main.js

init: function() {

this.appendDummyInput().appendField("画像を表示する (URL:");

this.appendValueInput('IMAGE_URL')

.setCheck('String');

this.appendDummyInput().appendField(')');

this.setColour(160);

this.setInputsInline(true);

this.setPreviousStatement(true);

this.setNextStatement(true);

}

};

JavaScriptを吐き出すようにする

code:main.js

const argument0 = Blockly.JavaScript.valueToCode(block, 'IMAGE_URL',

Blockly.JavaScript.ORDER_FUNCTION_CALL) || '\'\'';

return `(() => {

const src = ${argument0}

if (!src) return;

const image = document.createElement('img');

image.src = src;

document.body.appendChild(image)

})()`;

};

document.bodyにappendChildしててヤバい

code:index.html

<div id=playarea></div>

code:main.js

const onUpdate = () => {

document.querySelector('#playarea').innerHTML

const code = Blockly.JavaScript.workspaceToCode(workspace);

eval(code)

}

return `(() => {

const src = ${argument0}

if (!src) return;

const image = document.createElement('img');

image.src = src;

document.querySelector('#playarea').appendChild(image)

})()`;

ゴニョゴニョして完成した作品がこちら

(DEMO)

more idea

変換先の言語は任意に増やせるので、HTML吐くようにしたりも出来そう

code: lang.js

Blockly.LangName =new Blockly.Generator("LangName");

Blockly.JavaScript.addReservedWords("Reserved,Keyword");

...

もっと知りたい

組み込み済みのブロックを利用する・カテゴライズする

複雑なブロックなどを作るのを支援してくれるIDE的なもの