サイズ変更可能なワークスペース

優れたウェブ アプリケーションは、固定サイズではなく、画面上の利用可能なスペースを埋めるように Blockly のサイズを変更します。これを行うには、iframe、CSS、JavaScript の位置指定など、いくつかの方法があります。このページでは、堅牢で柔軟なオーバーレイ アプローチについて説明します。

手順は次の 3 つです。まず、エリアを定義します。2 番目のステップは、Blockly を挿入することです。3 番目のステップは、この領域に Blockly を配置することです。

1. エリアを定義する

HTML テーブルまたは CSS を使用した div のいずれかを使用して、ページのサイズ変更に合わせてリフローする空の領域を作成します。エリアに ID があることを確認します（このページでは blocklyArea と呼びます）。

画面の下部を埋めるテーブル セルのライブデモを以下に示します。

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

Blockly の挿入は、固定サイズの Blockly の挿入で説明されているプロセスと同じです。コード、blocklyDiv 要素、ツールボックス、インジェクション呼び出しを追加します。

Blockly はページ上で実行されていますが、本来あるべき場所に配置されていません（おそらく画面外にあります）。

3. ワークスペースを配置する

最後のステップは、blocklyDiv 要素を blocklyArea 要素の上に配置することです。これを行うには、blocklyDiv から height スタイルと width スタイルを削除し、絶対位置を追加します。

<div id="blocklyDiv" style="position: absolute"></div>

次に、インジェクション スクリプトを blocklyDiv を blocklyArea の上に配置するスクリプトに置き換えます。

const blocklyArea = document.getElementById('blocklyArea');
const blocklyDiv = document.getElementById('blocklyDiv');
const workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox')});
const onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  const element = blocklyArea;
  let x = 0;
  let y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  // Position blocklyDiv over blocklyArea.
  blocklyDiv.style.left = x + 'px';
  blocklyDiv.style.top = y + 'px';
  blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
  blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
  Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();

画面の下部を埋める Blockly のライブデモを以下に示します。