Blocklyから実際のソースコードを出力してみる

公式ドキュメントによると、以下の言語が既に対応済みのようです。

JavaScript
Python
Dart

ちなみにソースコードはblockly/generators以下にあるので、自分で他の言語への出力を作りたい場合はそこにジェネレータを書けば良さそうです。ひとまず今回は標準機能の確認をしていきます。

方法

ドキュメントにはあっさり一行、「どんな時でもこのコードを呼び出せばいいよ」とだけ書いてあります。そのためにはモジュールを一つ読み込む必要があります。

<script src="javascript_compressed.js"></script>

その上で変換する関数を呼び出します。

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

つまり、ボタン押下時などのイベントハンドラで上記のコードを走らせるだけで良いようです。そして、DartやPythonを出力したい場合は、"javascript"となっている箇所を該当の言語のものに置き換えれば良いようです。ひとまずJavaScriptを出力するためにtableタグ内にボタンを置き、クリックイベントを設定します。

<table>
  <tbody>
    <tr>
      <h1>おれおれエディター</h1>
    </tr>
    <tr>
      <button onclick="ShowCode()">出力</button>
    </tr>
    <tr>
      <td id="blocklyArea">Workspace</td>
    </tr>
  </tbody>
</table>

function ShowCode(params) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  alert(code);
}

これで、適当にブロックを並べた後にボタンを押すとダイアログボックスが表示され、出力されたコードが確認できるようになります。自前のジェネレーターを作る場合の道筋がぼんやりと見えてきましたね。

リアルタイムでコードを出力

公式ページによると「コード生成は非常に高速なので頻繁に呼んでも大丈夫だよ～」とあるのでやってみます。Blocklyの更新イベントで呼び出してあげる事でリアルタイムでコードが確認できるようになるようです。まずは適当にtextareaを用意します。

<textarea id="outputArea"></textarea>

次にBlocklyの更新通知イベントをハンドリングしてtextareaを更新します。

function ShowCode(e)
{
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById("outputArea").value = code;
}
// workspaceのリスナーへ登録を忘れずに
workspace.addChangeListener(ShowCodeRealTime);

これでブロックを配置したりする度にテキストエリアにソースコードが出力されます。

生成したJavaScriptを実行してみる

単純にeval()で評価してあげればJavaScriptがそのまま実行されますがGoogleはevalを使わない事を推奨しています。この辺はセキュリティリスクの観点で論争が起きるところではあるようですので個人の判断で実装ということで特に触れません。それに今回の最終目標はCのソースコードを出力するところなので…。

まとめ

というわけで、標準で出力できる言語に関してはあっさりと出来てしまう事がわかりました。そして、どのあたりを作ればオレオレエディターが出来そうなのかも見えてきましたね。次回はいよいよカスタムブロックか、コードジェネレーターをいじってみたいと思います。

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

Blocklyから実際のソースコードを出力してみる

方法

リアルタイムでコードを出力

生成したJavaScriptを実行してみる

まとめ