004 - Blocklyを使ったオリジナルVisual Programming Editorを作ってみる

いよいよコードの生成

今回はカスタムブロックのコードジェネレーターを作成します。ひとまずJavaScriptを出力するようにしてみます。コードジェネレーターについての公式ドキュメントはこちら。

color_block の Generator を実装

さて、Block Factory で作成された Generator のスタブコードを拡張します。/blockly/generators/javascript/color_block.js として保存したコードを以下のようにします。

Blockly.JavaScript['color'] = function(block) {
  var colour_color = block.getFieldValue('color');
  // TODO: Assemble JavaScript into code variable.
  var code = '' + colour_color;
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_ATOMIC];
};

getFieldValueは設定されたRGB値をテキストとして取得して返します。この関数は必ずリストを返す必要があるようです。最初のcodeは自身で生成したJavaScriptのコード（文字列）です。２つ目の要素は式の評価の優先度を指定するようです。具体的にはこちらに記載されています。そのページの最後のパラグラフに「わからなかったらとりあえずvalueToCodeではATOMICをつかえばいいよ。最後のreturnするときだけNONEを指定してカッコでくくるようにすればいい。」的な事が書いてあります。なので今回はORDER_ATOMICを指定します

setting_block の Generator を実装

このブロックのコードでページ内のフォントカラーを変更するようにします。

Blockly.JavaScript['foreground_setting'] = function(block) {
  var value_foreground = Blockly.JavaScript.valueToCode(block, 'foreground', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var code = 'document.getElementById("header").style.color =  "' + value_foreground + '"\n';
  //console.log(code);
  return code;
};

idがheaderの要素のカラーを変更するコードとしてみました。HTML上にheaderというidを持つ要素を追加します。

<h1 id="header">色が変わる！</h1>

出来上がったJavaScriptを実行するため、ボタンを配置します。

<button onclick="ExecCode()">実行</button>
<script>
  function ExecCode()
  {
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    eval(code);
  }
</script>

ここまで来たらビルドします。

python build.py

エラーなく完了したらindex.htmlを開いてブロックを並べてボタンを押すと、テキストの色が変わるようになります。

まとめ

ここまででブロックの作り方、ジェネレータの作り方を試せた事になります。次はJavaScriptではなく、Cなどの他言語用のコードを出力する方法を試していきたいと思います。