既存のフィールドを拡張するには、組み込みフィールド(FieldTextInput
、FieldColour
など)をサブクラス化し、ニーズに合わせてその一部を変更する必要があります。変更できるフィールドには、次のようなものがあります。
- エディタです。
- オンブロック ディスプレイである。
- 表示されるテキスト。
組み込みフィールドの動作を必要としないカスタム フィールドを作成する場合は、Field
をサブクラス化する必要があります。
一般的な拡張機能
ほとんどのカスタム フィールドは、次の 3 つのタイプのいずれかを拡張します。
- テキスト入力: フィールドに入力させる場合は、
FieldTextInput
を拡張する必要があります。 - 数値: 数値を保存する場合は、
FieldNumber
を拡張する必要があります。 - プルダウン: プルダウンを作成するものの、デフォルトの文字列モデルや画像モデルとは異なるモデルを保存する場合は、
FieldDropdown
を拡張する必要があります。- 注意:
FieldDropdown
を拡張する前に、プルダウン フィールドのカスタマイズ オプションではニーズを満たせないことを確認してください。
- 注意:
状況によっては、別のフィールド タイプを拡張する必要があります。たとえば、FieldLabelSerializable
は FieldLabel
を拡張します。
サブクラス化
import * as Blockly from 'blockly';
export class MyCustomTextField extends Blockly.FieldTextInput {
constructor(value, validator, config) {
super(value, validator, config);
}
}
フィールドのサブクラスのコンストラクタは、カスタム フィールドのコンストラクタとよく似ています。サブコンストラクタのシグネチャは通常、スーパーコンストラクタのシグネチャと一致する必要があります。
JSON と登録
また、このフィールドを 1 回登録する必要があります。
Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);
JSON 形式で動作するように、クラスで fromJson
の実装を提供します。
static fromJson(options) {
const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
return new MySubclassName(value);
}
フィールドの登録の詳細については、「カスタム フィールドの作成」の JSON と登録セクションをご覧ください。