ワークスペースの作成

Blockly ワークスペースは、Blockly の最上位コンポーネントです。ブロックでプログラミングに使用する UI です。

ワークスペースとそのサブコンポーネントの詳細については、ビジュアル用語集をご覧ください。

インジェクションの div

Blockly ワークスペースは、「injection div」と呼ばれる <div> に挿入する必要があります。

インジェクション div は、静的または動的のサイズを設定できます。ウィンドウのサイズが変更されると、div 内の要素をブロックしてサイズを更新します。

次のコード スニペットは、静的にサイズ変更されるインジェクション div の HTML を示しています。

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

インジェクション

挿入により、ワークスペースの UI を構成するすべての HTML サブ要素が作成されます。また、ワークスペースを使用可能な状態にするために必要な初期化もすべて行います。

インジェクション関数は、インジェクション div の ID またはインジェクション div 自体を受け取ることができます。

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

設定

挿入時に多数のオプション（レイアウトやスタイルなど）を使用してワークスペースを構成できます。

構成オプションの詳細については、構成オプションをご覧ください。