レンダラ

ブロックの形状は、ブロックの定義（フィールドと接続）に基づいてレンダラによって決定されます。

組み込みレンダラ

Blockly には 3 つのレンダラが組み込まれており、それぞれがプログラムに少し異なる外観を与えます。

レンダリング 説明 画像
Thrasos 推奨されるレンダラ。より均一な間隔と実線の境界線を備えた、よりモダンな geras レンダラです。 thrasos
Geras デフォルトのレンダラ。これは、Blockly が構築された元のレンダラです。 geras
Zelos Scratch-3.0 ブロック設計に基づくレンダラ。 zelos

これらのレンダラを使用するには、名前を構成オプションに渡します。

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

カスタム レンダラ

組み込みレンダラとは異なる外観をプログラムに持たせたい場合は、カスタム レンダラを作成することもできます。始めるにあたって、Blockly チームは次のことをおすすめします。

  1. レンダラのコンセプトに関するドキュメントで、レンダラのすべてのコンポーネントがどのように連携しているかを確認します。
  2. カスタム レンダラ Codelab を完了して、カスタム レンダリングの実践演習を行います。
  3. プロジェクトにデバッグ レンダラを追加します。
  4. レンダラをカスタマイズする。