固定サイズのワークスペース

Blockly をウェブページに配置する最も簡単な方法は、空の「div」タグに挿入することです。

1. コードを取得する

アプリケーションに最適な方法でコードを取得します。

2. エリアを定義する

ページの本文のどこかに空の div を追加し、サイズを設定します。

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. ワークスペースを挿入する

ツールボックスの構造を定義する:

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

最後に、以下を呼び出して、定義した div に Blockly を挿入します。

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

workspace 変数は現在使用されていませんが、後でブロックの保存やコードの生成を行うときに重要になります。同じページに Blockly の複数のインスタンスが挿入されている場合は、返されたワークスペースがそれぞれ異なる変数に保存されていることを確認してください。

これで、ブラウザでページをテストできます。Blockly のエディタが div に表示され、ツールボックスに 7 つのブロックが表示されます。ライブデモをご覧ください。