プラグイン

プラグインは、Blockly に機能を追加する自己完結型のコードです。 たとえば、カスタム フィールドを追加したり、新しいテーマを定義したり、カスタム レンダラを提供したりできます。プラグインは通常、npm を介してパッケージ化され、配布されます。

プラグインの概要については、プラグインの概要 （2021 年）をご覧ください。

独自のプラグインを作成する場合は、プラグインを追加するをご覧ください。

ファーストパーティ プラグインとサードパーティ プラグイン

ファーストパーティ プラグインは、Blockly チームによってサポートされ、npm の @blockly スコープで公開されています。 幅広い Blockly アプリケーションで使用できるように設計されています。

サードパーティ プラグインは、個別に管理、公開されます。 より複雑なもの、試験的なもの、または Blockly アプリケーションの範囲を絞ったものがあります。

プラグインを探す

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

npm や yarn などのパッケージ マネージャーを使用してプラグインをインストールすることをおすすめします。これにより、アップデートを簡単に受け取ることができます。

  • パッケージ マネージャーを使用してプラグインをインストールする

    npm

    npm install @blockly/field-angle

    毛糸

    yarn add @blockly/field-angle

  • パッケージ マネージャーを使用せずにプラグインをインストールする

    unpkg

    <script src="https://unpkg.com/@blockly/field-angle"></script>

    プラグインを含む GitHub リポジトリのクローンを作成することもできます。ファーストパーティ プラグインの場合、これは blockly-samplesです。

プラグインの README を確認して、追加のインストール手順があるかどうかを確認します。

プラグインを使用する

プラグインはそれぞれ異なるため、プラグインの使用方法についてはプラグインの README をご覧ください。次の例は、 @blockly/field-angle プラグインの使用方法を示しています。

  1. プラグインからコードをインポートします。この方法は、プラグインのインストール方法によって異なります。

    npm または yarn

    import Blockly from 'blockly';
import {registerFieldAngle} from '@blockly/field-angle';

    unpkg

    import ステートメントを使用する必要はありません。

    クローン作成されたリポジトリ

    import {registerFieldAngle} from 'path/to/plugin';

  2. 必要に応じてプラグインを初期化します。カスタム フィールドを提供するプラグインでは、フィールドの登録が必要になることがよくあります。

    registerFieldAngle();

  3. プラグインを使用します。

    Blockly.common.defineBlocksWithJsonArray([
  {
    type: "my_angle_block",
    message0: "%1 degrees",
    args0: [
      {
        // Use @blockly/field-angle.
        type: "field_angle",
        name: "FIELDNAME",
        value: 45,
      },
    ],
    output: null,
    style: 'math_blocks'
  },
]);

    360 度のダイヤルから角度を選択するためのフィールド。

プラグインのバージョン

blockly-samples のプラグインは セマンティック バージョニング を使用します。 この場合、互換性を破る変更には新しいメジャー バージョンを使用する必要があります。コアに モンキー パッチを適用する新しいプラグインのメジャー バージョンは 0 になり、初期 開発を示します。

ほとんどのプラグインには、blockly パッケージが peerDependency ではなく dependency として含まれています。これは、Blockly がすでにインストールされていることを前提としているためです。（Blockly を使用せずにプラグインを使用しても意味がありません）。 これにより、Blockly のバージョンを自分で管理できますが、プラグインの package.json を確認して、必要な Blockly の最小バージョンを判断する必要があります。プラグインが更新されて新しいバージョンの Blockly が必要になった場合、これは互換性を破る変更と見なされ、メジャー バージョンが引き上げられます。

アプリケーションの package.json にプラグインを追加する場合、デフォルトではバージョンの前にキャレットが含まれます。

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

これにより、npm はリストされているバージョン以上のマイナー バージョンをインストールできます。したがって、バージョン 5.0.20 または 5.1.0 は機能しますが、6.0.1 などの新しいメジャー バージョンは機能しません。Blockly の新しいバージョンに更新する場合は、プラグインも新しいメジャー バージョンに更新できるかどうかを確認することをおすすめします。