このページは Cloud Translation API によって翻訳されました。

ブロックファクトリにプラグインフィールドを追加する

Blockly デベロッパーツールでは、ブロックを使用してカスタムブロックを作成できます。コア Blockly に付属しているフィールドに加え、プラグインとして公開されるフィールドがサポートされています。カスタムフィールドを作成した場合は、このガイドに沿ってそのサポートをブロックファクトリに追加できます。カスタムフィールドは、サポートを追加する前に npm で公開されている必要があります。また、Blockly の変更に対応するためにフィールドの更新を確約する必要があります。そうしないと、将来、ブロックファクトリからフィールドを削除する必要が生じる可能性があります。

Block Factory での開発

ブロックファクトリのソースコードは、examples/developer-tools ディレクトリの blockly-samples リポジトリにあります。

ブロックリーサンプルでデベロッパーツールに変更を送信するには、ブロックリーサンプルで開発する際の一般的な手順に従う必要があります。ただし、プラグインを使用する場合とは異なり、npm install はブロックリーサンプルのルートレベルではなく、examples/developer-tools ディレクトリから直接実行する必要があります。

プラグインをインストールする

ブロックファクトリでカスタムフィールドをプレビューに表示するには、カスタムフィールドをインストールする必要があります。フィールドを、developer-tools の npm 依存関係として追加します。次に、その ID を登録するか、developer-tools/src/blocks/index.ts で必要なその他の設定作業を行います。

フィールドのブロックを作成する

ブロックファクトリではブロックを使用してカスタムブロックを作成するため、カスタムフィールドを表すブロックが必要です。

ブロック定義を作成する

フィールドのブロックを設計する必要があります。メタを取得する場合は、Block Factory を使用して設計することもできます。このブロックでは、デフォルト値や名前など、フィールドに必要な設定をユーザーが構成できるようにする必要があります。このブロック定義を developer-tools/src/blocks/fields.ts に追加し、developer-tools/src/blocks/index.ts にインポートします。

ツールボックスにブロックを追加する

次に、このブロックをツールボックスの定義に追加して、ユーザーがアクセスできるようにします。ツールボックスの定義は developer-tools/src/toolbox.ts にあります。ブロックが [項目]カテゴリに追加され

コード生成ツール

ブロックファクトリは、Blockly ですでに使い慣れているコード生成システムを使用して動作します。各ブロックには、ブロックファクトリによって生成された出力のタイプごとにブロックコードジェネレータがあり、親ブロックは子ブロックのコードを正しい出力にアセンブルします。カスタムフィールドのサポートを追加するには、コード生成ツールのクラスごとにブロックコードジェネレータ関数を追加する必要があります。

output-generators/fields ディレクトリにフィールドブロックのファイルを作成します。このファイルに、次の各生成ツールのブロックコードジェネレータを追加します。このファイルを blocks/index.ts ファイルにインポートして、ブロックコードジェネレータ関数がアプリケーションに読み込まれるようにします。

JavaScript の定義

javascriptDefinitionGenerator は、カスタムフィールドを含むブロックの JavaScript 定義に含めるコードを作成します。通常、これはブロックコードジェネレータが .appendField(new YourFieldConstructor(arg1, arg2), 'userSpecifiedName') のようなコード行を返す必要があることを意味します。このコード行にはセミコロンは含まれません。複数のフィールドを含む入力には、appendField への複数の呼び出しが連結されるためです。コンストラクタの引数は、ユーザーがフィールドブロックに設定した値から取得されます。この FieldAngle のブロックコードジェネレータの例を次に示します。

javascriptDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JavascriptDefinitionGenerator,
): string {
  const name = generator.quote_(block.getFieldValue('FIELDNAME'));
  const angle = block.getFieldValue('ANGLE');
  return `.appendField(new FieldAngle(${angle}), ${name})`;
};

ユーザーがブロックファクトリツールボックスの [フィールド] カテゴリからドラッグしたアングルブロックには、次の 2 つのフィールドがあります。

FIELDNAME: ユーザーはカスタムブロックにフィールドの名前を設定できます。
ANGLE: ユーザーはデフォルトの角度値を設定できます。

このブロックコードジェネレータでは、デフォルトの角度値を取得し、それを唯一の引数として FieldAngle コンストラクタに渡します。フィールド名は常に 2 番目の引数として appendField に渡されます。

JSON 定義

jsonDefinitionGenerator も同様ですが、フィールドに対応する JSON ブロック定義の部分が出力されます。通常、このコードは以下を含む JSON オブジェクトです。

type: Blockly フィールドレジストリのフィールド名に対応します。
name: ユーザーはカスタムブロックにフィールドの名前を設定できます。
フィールドの JSON 初期化メソッドで必要なその他のカスタムプロパティ。

ここでもう一度 FieldAngle の例を示します。

jsonDefinitionGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: JsonDefinitionGenerator,
): string {
  const code = {
    type: 'field_angle',
    name: block.getFieldValue('FIELDNAME'),
    angle: block.getFieldValue('ANGLE'),
  };
  return JSON.stringify(code);
};

コードヘッダー

コードヘッダージェネレータは、ブロックファクトリに表示されるコードヘッダー出力を作成します。この出力は、ユーザーのコード読み込み方法に応じて esmodule のインポートとスクリプトタグを切り替えられます。そのため、実際には 2 つの異なるジェネレータインスタンス（ケースごとに 1 つずつ）があります。それぞれにブロックコードジェネレータを追加する必要がありますFieldAngle の例を次に示します。

importHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `import {registerFieldAngle, FieldAngle} from '@blockly/field-angle';`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

scriptHeaderGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: CodeHeaderGenerator,
): string {
  generator.addHeaderLine(
    `<script src="https://unpkg.com/@blockly/field-angle"></script>`,
  );
  generator.addHeaderLine(`registerFieldAngle();`);
  return '';
};

これらのジェネレータには addHeaderLine というメソッドがあり、このフィールドをコードで使用する前に呼び出すコード行を指定できます。一般に、これには、フィールドのインポートやスクリプトタグによるフィールドの読み込み、Blockly のフィールドレジストリにフィールドを登録する関数の呼び出しなどの作業が含まれます。

この 2 つのブロックコードジェネレータでは、すべてのコードを addHeaderLine の呼び出しによって追加する必要があります。この関数により、カスタムフィールドブロックが 1 つのカスタムブロックで複数回使用されている場合でも、各ヘッダー行が 1 回だけ表示されます。ブロックコードジェネレータは空の文字列を返す必要があります。

Generator スタブ

最後は、フィールドの generator スタブを作成するジェネレータです。このブロックコードジェネレータでは、コードを生成するコードを記述します。コード生成は、ユーザーによるコード生成を支援します。ご不明な点がある場合思ったより簡単です！

カスタムブロックのジェネレータスタブには、ブロックのすべてのフィールドを表す既製の変数が含まれています。次に、すべての変数をアセンブルして、カスタムブロックが返す最終的なコード文字列にするために TODO があります。つまり、通常、ブロックコードジェネレータは、このカスタム変数を作成する行を返すだけで済みます。たとえば、キャンバスに太陽光を追加するカスタムブロックを作成するとします。ブロックに angle フィールドを追加し、"SUN_DIRECTION" という名前を付けます。このブロックのジェネレータスタブには、const angle_sun_direction = block.getFieldValue("SUN_DIRECTION"); という行が含まれます。angle フィールドのブロックコードジェネレータは、次のコード行を返す必要があります。

generatorStubGenerator.forBlock['field_angle'] = function (
  block: Blockly.Block,
  generator: GeneratorStubGenerator,
): string {
  const name = block.getFieldValue('FIELDNAME');
  const fieldVar = generator.createVariableName('angle', name);
  return `const ${fieldVar} = block.getFieldValue(${generator.quote_(
    name,
  )});\n`;
};

変数の標準化された名前を取得するには、generator.createVariableName を呼び出して、フィールドの型（angle、number など）とユーザーがフィールドに付けた名前を渡します。

テスト

これらをすべて記述したら、blockly-samples/examples/developer-tools ディレクトリで npm start を実行して、Block Factory を起動できるようになります。フィールドカテゴリからブロックをドラッグしてブロックの入力に追加し、出力の変化を確認できます。ブロックのプレビューが正しく表示されることと、各出力セクションのコードが正しいことを確認します。