コードを生成して実行する

アプリケーションはいつでもコードを生成できます。たとえば、エンドユーザーがボタンをクリックしたときや、ユーザーが変更を加えるたびにコードが生成される場合があります。

コード生成の概要については、コード生成をご覧ください。

言語コード生成ツールをインポートする

コードを生成するには、言語コード生成ツールが必要です。言語コード生成ツールは、次のいずれかの方法でインポートできます。

モジュール

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';

// Generate code for all the blocks in the workspace.
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);

Unpkg

生成ツールは、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>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.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>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

コードを生成する

コードを生成するには、ジェネレータの workspaceToCode 関数を使用します。

const code = javascriptGenerator.workspaceToCode(workspace);

継続的な更新

継続的な更新により、ユーザーが変更を加えるたびにコードを表示または実行できます。コードの生成は高速なオペレーションであるため、パフォーマンスへの影響はほとんどありません。これは、イベントリスナーを使用して行います。

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

プリアンブルコードまたはポストスクリプトコードを追加する

コードを生成した後、必要に応じて、生成されたコードの開始前または終了後にコードを含めることができます。

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

通常、プリアンブルコードは、コードの先頭に外部定義を含める場合に使用されます。ポストスクリプトコードは通常、関数を呼び出してコードの末尾で動作を開始するために使用されます。

生成されたコードがそのまま実行可能な場合は、プリアンブルやポストスクリプトを含める必要はありません。

コードを実行する

コードを生成したら、そのコードを実行する方法を見つける必要があります。実行方法の決定はアプリケーション固有であり、Blockly の範囲外です。

JavaScript コードを実行する場合は、JavaScript の生成と実行をご覧ください。ここでは、JavaScript コード生成ツールの特別な機能と、JavaScript を安全に実行する方法として Blockly チームが推奨する JSInterpreter について説明します。

他の言語には他のツールが必要です。

コードを生成して実行する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。