Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

いよいよコードの生成

今回はカスタムブロックのコードジェネレーターを作成します。ひとまず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のコード(文字列)です。2つ目の要素は式の評価の優先度を指定するようです。具体的にはこちらに記載されています。そのページの最後のパラグラフに「わからなかったらとりあえず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などの他言語用のコードを出力する方法を試していきたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした