2022年08月25日更新

ブロック型ビジュアルプログラミングBlocklyの基本コード

どうも、クラゲジュニアです。

ブロック型ビジュアルプログラミングのライブラリBlocklyの基本コードをメモしておきます。公式ドキュメントや公式GitHubもあるのですが、基本コードが分かりにくいのでまとめました。

最小コード

まずはブロックを並べるだけの最小コードです。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }

    h1 {
      font-weight: normal;
      font-size: 140%;
    }

    .demo {
      padding: 1rem;
    }
  </style>
</head>

<body>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>

  <script>
    const workspace = Blockly.inject('blocklyDiv',
      {
        toolbox: document.getElementById('toolbox')
      });
  </script>

</body>

</html>

ブロックを結合したときに「カチッ」と音が鳴ったり、左側（toolbox）へブロックをドラッグ＆ドロップすると削除する機能はあります。

基本コード

先ほどのコードに加え、以下の機能が追加されています。

JavaScriptへのコード変換
ボタン押下時にブロック実行
workspaceにスクロールやゴミ箱表示

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }

    h1 {
      font-weight: normal;
      font-size: 140%;
    }

    .demo {
      padding: 1rem;
    }
  </style>
</head>

<body>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <category colour="210" name="Main">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="controls_repeat_ext"></block>
      <block type="math_number">
        <field name="NUM">123</field>
      </block>
      <block type="math_arithmetic"></block>
    </category>
    <category colour="120" name="Sub">
      <block type="text"></block>
      <block type="text_print"></block>
    </category>
  </xml>
  <div><button onclick="executeCode()">Execute the JavaScript code below</button></div>
  <div><textarea id="generatedCodeContainer" readonly placeholder="Generated JavaScript will go here..." cols="50" rows="10"></textarea></div>

  <script>
    const workspace = Blockly.inject('blocklyDiv',
      {
        toolbox: document.getElementById('toolbox')
      });

    workspace.addChangeListener(event => {
      const code = Blockly.JavaScript.workspaceToCode(workspace);
      document.getElementById('generatedCodeContainer').value = code;
    });

    function executeCode() {
      const code = Blockly.JavaScript.workspaceToCode(workspace);
      eval(code);
    }    
  </script>

</body>

</html>

JavaScriptへの変換はBlockly.JavaScript.workspaceToCode、ブロックの実行はeval、workspaceにスクロールやゴミ箱表示はcategoryタグの追加で行われています。

以上です。