コード生成ツール

Blockly のほとんどのアプリケーションでは、ユーザーのプログラムをプログラミング言語に変換する必要があります。このアクションは、Blockly によってクライアント側で実行されます。

コードの生成

まず、対象言語のジェネレータを追加します。Blockly には以下のジェネレータが含まれています。

• JavaScript
• Python
• PHP
• Lua
• Dart

ジェネレータは、次のいずれかの方法でインポートして使用できます。

モジュール

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

パッケージ化されていない

Blockly を追加した後に、ジェネレータを追加する必要があります。

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = luna.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

ローカル スクリプト

Blockly を追加した後に、ジェネレータを追加する必要があります。

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = lua.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

リアルタイム生成

コードの生成は非常に高速のオペレーションであるため、この関数を頻繁に呼び出しても問題はありません。一般的な方法は、Blockly の変更イベントにリスナーを追加して、コードをリアルタイムで生成して表示することです。

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

詳しくは、イベントをご覧ください。