ビジュアルプログラミング環境の作りかた

こんんちは！

EYSの中澤です。

システムサポート課で音楽教室を運営するシステムの課題対応、機能追加を行っています。

また、プログラミング教室のカリキュラムを考えています。

今回は、子供のプログラミング学習のみならず、IoTや非エンジニア向けのサービスで使用されているビジュアルプログラミング環境のつくりかたをまとめました。

数字の１〜９のブロックと足し算のブロックを作って計算結果を教えてくれる環境を作ります。

ScratchやMakeCodeのベースとなっているGoogleのオープンソースプロジェクトBlocklyをつかうことで、HTML, JavaScript, CSSのみで、GUI関連の処理を実装しなくても作れるようになっています。

ソース

https://github.com/google/blockly

ドキュメント

https://developers.google.com/blockly/

必要なファイルは blockly_compressed.js です。今回はCDNのファイルを参照します。

まず、数字の１のブロックを表示してみましょう。

以下の内容で、htmlファイルを作成します。

<meta charset="UTF-8">
<title>たしざん</title>
<script src="https://cdn.jsdelivr.net/npm/blockly@3.20191014.3/blockly.min.js"></script>
<div id="canvas"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<block type="digit1"></block>
</xml>
<script>
Blockly.Blocks.digit1 = {
init: function (block) {
this.jsonInit({
"type": "digit1",
"message0": "1",
"output": "Number",
"colour": 230,
"tooltip": "",
"helpUrl": ""
})
}
}
var workspace = Blockly.inject('canvas', {
toolbox: document.getElementById('toolbox'),
zoom: { startScale: 1.5 }
})
</script>

作成したHTMLをブラウザで開くと、下記のように表示されます。

　灰色部分（ツールボックスといいます）のブロックを右側にドラッグすることでブロックを並べることができます。

　Blockly.Blocksにブロックを定義して、xmlタグ内に定義したブロックをblockタグで並べるとでツールボックに表示される仕組みです。

　ブロックのプロパティは次のとおりです。

type: ブロックの種類ごとの名前で重複しないように自由に設定できる

message0: ブロックに表示する内容

output: ブロックから出力される値の型

colour: ブロックの色0〜360で指定(HSV色空間の色相を指定)

tooltip: ブロックにカーソルを合わせた際に表示される説明

helpUrl: ブロックを右クリックしてHelpを選ぶと表示される説明ページのURL

ブロックの大きさは Blockly.inject の第2引数で zoom.startScale で指定できます。

次に、同様にして、９までのブロックを追加します。

カラフルにしてみました。

次は足し算をするブロックを追加します。

Blockly.Blocks.addition = {
init: function (block) {
this.jsonInit({
"type": "addition",
"message0": "%1 たす %2",
"args0": [
{
"type": "input_value",
"name": "left_value",
"check": "Number"
},
{
"type": "input_value",
"name": "right_value",
"check": "Number"
}
],
"inputsInline": true,
"output": "Number",
"colour": 0,
"tooltip": "2つのすうじをたします",
"helpUrl": ""
})
}
}

　足し算をするには足す数と足される数の２つをセットしなければなりません。

　そのために、arg0というプロパティを用意して、2つの値を受け取る枠を定義します。これらを入力といいます。各入力のプロパティには type, name, checkがあります。

type: input_value(1つの値の枠を作る), input_statement(複数のつなげたブロック用の枠を作る), input_dummy(枠は作らず文字のみ表示するときに使う)のいずれかを指定

name: ブロック内で固有の名前を自由に設定できる

check: 受け付ける値の方を指定（省略可）

また、message0 を 「%1 たす %2 」としていますが、%1には1つ目の入力枠が設定され、%2には2つ目の入力枠が設定されます。

最後に結果を表示するブロックを追加します。

これで、足し算のプログラムをブロックで組めるようになりました。

あとは実行できるようにします。

実行するには、ブロックで作ったプログラムを実行可能なプログラムのソースコード（JavaScript等）に変換してから実行する形になります。

ただ、そうするためには、それぞれのブロックがどのようなソースコードに変換されるかを定義する必要があります。

たとえば1のブロックの定義は次のようになります。

Blockly.JavaScript.digit1 = function(block) {
return [ '1', Blockly.JavaScript.ORDER_NONE ]
}

全ブロックに対して、JavaScriptに変換する定義をつけ、実行ボタンと押したときの処理を作れば完成です。

じっこうボタン(id=run)を押したときの処理は次のように書きます。

document.getElementById('run').addEventListener('click', function() {
try {
eval(Blockly.JavaScript.workspaceToCode(workspace))
} catch(e) {
alert(e)
}
})

Blockly.JavaScript.workspaceToCode でブロックの内容をJavaScriptのプログラムに変換することができます。

Blocklyの仕組みを使えば、任意の処理を行うブロックを作って、任意のプログラミング言語に変換、実行することが可能です。

今回作成したHTMLを下記においています。よろしければ動かしたり手を加えてみてください。
https://programpark.jp/addition.html

EYSではシステム開発だけではなく、プログラミング教育のオリジナル教材を作成しています。興味のある方はぜひご連絡ください。