ワークスペースの作成

Blockly ワークスペースは、Blockly の最上位のコンポーネントです。ブロックを使用してプログラミングを行うための UI です。

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

Injection div

Blockly ワークスペースは、インジェクション div と呼ばれる <div> に挿入する必要があります。

インジェクション div のサイズは、静的または動的に設定できます。div 内の Blockly 要素は、ウィンドウのサイズ変更時にサイズを更新します。

次のコード スニペットは、静的にサイズ設定されたインジェクション 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 */ });

構成

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

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