高度なカスタマイズ

Blockly では、対応する Blockly クラスを置き換えることで、特定の機能をカスタマイズできます。

置換可能なクラス

次の Blockly クラスを置き換えることができます。

Blockly クラス インターフェース レジストリ タイプの名前
Blockly.dragging.Dragger Blockly.IDragger blockDragger
Blockly.ConnectionChecker Blockly.IConnectionChecker connectionChecker
Blockly.InsertionMarkerPreviewer Blockly.IConnectionPreviewer connectionPreviewer
Blockly.HorizontalFlyout Blockly.IFlyout flyoutsHorizontalToolbox
Blockly.VerticalFlyout Blockly.IFlyout flyoutsVerticalToolbox
Blockly.MetricsManager Blockly.IMetricsManager metricsManager
Blockly.Toolbox Blockly.IToolbox toolbox
Blockly.VariableMap Blockly.IVariableMap variableMap
Blockly.VariableModel Blockly.IVariableModel --

レンダラを置き換える方法については、カスタム レンダラを作成するをご覧ください。

代替クラスを作成する

置換クラスを作成するには、対応するインターフェースで関数を実装します。これらの関数はすべて新しいクラスに実装することも、Blockly クラスを拡張して変更したい関数のみをオーバーライドすることもできます。唯一の要件は、インターフェース内のすべての関数を実装し、インターフェースのコメントに記載されている要件を遵守することです。

特定のインターフェースを実装することを型チェッカーに伝えるには、クラスに @implements {InterfaceName} JSDoc タグ（JavaScript の場合）または implements キーワード（TypeScript の場合）でアノテーションを付けます。

Blockly に置換クラスを通知する

Blockly に置換クラスを伝える方法は 2 つあります。その型のデフォルト クラスとして登録する方法（推奨）と、plugins 構成オプションを使用して挿入する方法です。

置換クラスをデフォルトとして登録する

Blockly に置換クラスを伝える推奨方法は、その型のデフォルトとして登録することです。これを行うには、名前 Blockly.registry.DEFAULT を使用して Blockly.registry.register を呼び出し、opt_allowOverrides パラメータを true に設定します。

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

代替クラスを挿入する

plugins 構成オプションを使用して、置換クラスを挿入することもできます。これは、レジストリ型名をプロパティ名として使用し、置換クラスまたは登録名をプロパティ値として使用するオブジェクトです。

（plugins プロパティの名前とは異なり、クラスをパッケージ化して Blockly を拡張するために使用されるプラグインのように npm を介して配布する必要はありません）。

置換クラスを Blockly.inject に渡します。

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

または、Blockly.registry.register を使用してクラスを登録し、登録した名前を Blockly.inject に渡します。これは、構成オプションを純粋な JSON として保存する場合に便利です。

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', CustomMetricsManagerClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}