調査アンケート: Blockly のご利用体験についてお聞かせください
アンケートを開始
既存のフィールドを拡張する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
既存のフィールドを拡張するには、組み込みフィールド(例:
FieldTextInput
、FieldColour
など)を作成し、必要に応じて一部を変更します。
変更可能なフィールドは次のとおりです。
新しいコンバージョン アクションを
カスタム フィールド
組み込みフィールドからの動作が不要な場合は、Field
をサブクラス化する必要があります。
一般的な拡張機能
ほとんどのカスタム フィールドは、次の 3 つのタイプのいずれかを拡張します。
- テキスト入力: ユーザーがフィールドに入力できるようにするには、
FieldTextInput
。
- 数値: 数値を保存する場合は、
FieldNumber
を拡張する必要があります。
- プルダウン: プルダウンを作成するものの、別のモデルを格納する場合
デフォルトの文字列または画像モデルよりも高い場合は、
FieldDropdown
を拡張する必要があります。
- 注意:
FieldDropdown
を拡張する前に、プルダウン フィールドの
カスタマイズ オプションではニーズを満たすことができません。
状況によっては、別のフィールド タイプを拡張することが必要な場合があります。対象
例 FieldLabelSerializable
は FieldLabel
を拡張します。
Subclassing
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);
クラスで fromJson
の実装を提供し、
JSON 形式:
static fromJson(options) {
const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
return new MyCustomTextField(value);
}
フィールドの登録の詳細については、JSON と登録をご覧ください。
セクションをご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-20 UTC。
[null,null,["最終更新日 2025-08-20 UTC。"],[[["\u003cp\u003eTo extend an existing Blockly field, subclass a built-in field like \u003ccode\u003eFieldTextInput\u003c/code\u003e or \u003ccode\u003eFieldColour\u003c/code\u003e and modify its editor, on-block display, or displayed text.\u003c/p\u003e\n"],["\u003cp\u003eFor custom fields with unique behaviors, subclass the base \u003ccode\u003eField\u003c/code\u003e class instead of extending an existing field.\u003c/p\u003e\n"],["\u003cp\u003eCommon field extensions involve customizing text input (\u003ccode\u003eFieldTextInput\u003c/code\u003e), numbers (\u003ccode\u003eFieldNumber\u003c/code\u003e), or dropdowns (\u003ccode\u003eFieldDropdown\u003c/code\u003e) to meet specific needs.\u003c/p\u003e\n"],["\u003cp\u003eWhen subclassing, ensure your constructor matches the super-constructor's signature and register the field with \u003ccode\u003eBlockly.fieldRegistry.register\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eImplement the \u003ccode\u003efromJson\u003c/code\u003e method in your custom field class to enable compatibility with the Blockly JSON format for serialization and deserialization.\u003c/p\u003e\n"]]],["To extend an existing field, subclass a built-in field like `FieldTextInput` or `FieldColour`, modifying its editor, on-block display, or text. For unique fields, subclass `Field`. Common extensions include `FieldTextInput`, `FieldNumber`, and `FieldDropdown`. Subclass constructors should mirror the super-constructor's signature. Register the field using `Blockly.fieldRegistry.register()` and implement `fromJson` for JSON compatibility. Extending different fields such as `FieldLabelSerializable` is also possible.\n"],null,["# Extend an existing field\n\nIn order to extend an existing field you must subclass a built in field (e.g\n`FieldTextInput`, `FieldColour`) and then modify part of it to fit your needs.\nSome parts of a field you can modify are:\n\n- Its [editor](/blockly/guides/create-custom-blocks/fields/anatomy-of-a-field#editor_display).\n- Its [on-block display](/blockly/guides/create-custom-blocks/fields/anatomy-of-a-field#on-block_display).\n- The [text](/blockly/guides/create-custom-blocks/fields/anatomy-of-a-field#text) it displays.\n\nIf you want to [create a\ncustom field](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating)\nthat does not need behaviour from any built-in field you should subclass `Field`.\n\nCommon extensions\n-----------------\n\nMost custom fields extend one of these three types:\n\n- [Text Input](/blockly/guides/create-custom-blocks/fields/built-in-fields/text-input): If you want your users to type into your field, you should extend `FieldTextInput`.\n- [Number](/blockly/guides/create-custom-blocks/fields/built-in-fields/number): If you want to store a number, you should extend `FieldNumber`.\n- [Dropdown](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown): If you want to create a dropdown, but you want it to store a different model than the default string or image model, you should extend `FieldDropdown`.\n - Caution: Before extending `FieldDropdown`, check that the dropdown field's [customization options](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown#customization) cannot fulfill your needs.\n\nUnder certain circumstances you may wish to extend a different field type. For\nexample `FieldLabelSerializable` extends `FieldLabel`.\n\nSubclassing\n-----------\n\n import * as Blockly from 'blockly';\n\n export class MyCustomTextField extends Blockly.FieldTextInput {\n\n constructor(value, validator, config) {\n super(value, validator, config);\n }\n }\n\nThe constructor for a field's subclass looks very similar to the [constructor for\na custom field](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#implementing_a_constructor). The signature of the sub-constructor should\ngenerally match the signature of the super-constructor.\n\nJSON and registration\n---------------------\n\nYou should also register the field once: \n\n Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);\n\nand provide an implementation of `fromJson` in the class so that it works with\nthe JSON format: \n\n static fromJson(options) {\n const value = Blockly.utils.parsing.replaceMessageReferences(options.value);\n return new MyCustomTextField(value);\n }\n\nFor more information about registering a field see the [JSON and registration](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#json_and_registration)\nsection in Creating a Custom Field."]]