ウェブページに 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 個のブロックが表示されますライブデモをご利用ください。