調査アンケート: Blockly のご利用体験についてお聞かせください

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

カスタムフィールドのアップグレード

2019 年 7 月（リリース 2.20190722）より体系化されたフィールド API が追加されました。目的下位互換性を維持する必要があります。つまり、以前に作成したカスタムフィールドを使用して、引き続き機能します。カスタムフィールドをアップグレードする必要があるかどうかを決定する前に、 [危険性のあるエリア] で確認し、フィールドで徹底的なテストを行います。

2019 年 7 月までは項目間の標準化がなかったためデベロッパーが行う必要がある変更をすべてカバーするのは困難です。このドキュメントでは、発生する可能性のある変更をすべて網羅するように努めていますが、このドキュメントに関心がある内容については、アップグレードのサポートを利用する。

危険地域

危険エリアは API が変更された既知の場所であり、フィールドがあります。

Blockly.Field.register

フィールドが Blockly.Field.register(); で登録されなくなりました。Google 登録を処理する fieldRegistry 名前空間になりました。

Blockly.Field.register('my_field_name', myFieldClass);

置き換えると次のようになります。

Blockly.fieldRegistry.register('my_field_name', myFieldClass);

setText

setText 関数は Blockly コアによって呼び出されなくなったため、setText 関数にロジックが含まれているので、値の処理関数スイートである getText およびレンダリング関数（setText 関数の動作によって異なります）。

CustomFields.UpgradeField.prototype.setText = function(newText) {
  // Do validation.
  if (typeof newText != 'string' || newText === this.text_) {
    return;
  }

  // Fire event.
  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
    Blockly.events.fire(new Blockly.Events.BlockChange(
        this.sourceBlock_, 'field', this.name, this.text_, newText
    ));
  }

  // Update text value.
  this.text_ = 'prefix' + newText;

  // Rerender.
  this.size_.width = 0;
};

置き換えると次のようになります。

CustomFields.UpgradeField.prototype.doClassValidation_ = function(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

CustomFields.UpgradeField.prototype.getText = function() {
  return  'prefix' + this.value_;
}

Blockly で自動的に処理:

新しい値が古い値と異なるかどうかを確認します。
値を更新しています。
変更イベントを発生させる。
フィールドを再レンダリングしています。

以下に対処する必要があります。

値の検証（doClassValidation_）。
フィールドテキスト（getText）。
フィールド UI

で確認できます。

おすすめのアップグレード

推奨アップグレードとは、フィールド API が変更されたが、変更しない場合、そのフィールドは引き続き機能します。

シリアル化可能

EDITABLE プロパティと SERIALIZABLE プロパティの詳細については、以下をご覧ください。編集可能でシリアル化可能なプロパティ。

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

以下の警告は無視されますが、SERIALIZABLE を定義することで解決できます。プロパティ:

Detected an editable field that was not serializable. Please define
SERIALIZABLE property as true on all editable custom fields. Proceeding
with serialization.

上記の警告が表示された場合、Blockly は（EDITABLE プロパティが true であるため）に、フィールドをシリアル化しますが、 SERIALIZABLE プロパティを定義するまでは確定できません。次のオプションを選択した場合: このまま放置しておくと、すべてが正しく機能し、フィールドがコンソールに警告が表示されます。

size_.width

this.size_.width = 0;

置き換えると次のようになります。

this.isDirty_ = true;

以下の警告は無視されますが、isDirty_ を設定することで解決できます。プロパティを size_.width プロパティに置き換える必要があります。

Deprecated use of setting size_.width to 0 to rerender a field. Set
field.isDirty_ to true instead.

上記の警告は、古い方法を使用してコンテンツを再レンダリングしていることを Blockly が検出したことを意味します。新しいメソッドを使用したいと考えています。

isDirty_ プロパティの詳細については、以下をご覧ください。 isDirty_.

init

init 関数はテンプレートになりました。関数をサブクラス内の重複コードを減らします

CustomFields.UpgradeField.prototype.init = function() {
  if (this.fieldGroup_) {
    // Already initialized once.
    return;
  }

  // Call superclass.
  CustomFields.UpgradeField.superClass_.init.call(this);

  // Create DOM elements.
  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);

  // Bind events.
  this.mouseOverWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);

  // Render.
  this.setValue(this.getValue());
};

置き換えると次のようになります。

CustomFields.UpgradeField.prototype.initView = function() {
  CustomFields.UpgradeField.superClass_.initView.call(this);

  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);
};

CustomFields.UpgradeField.prototype.bindEvents_ = function() {
  CustomFields.UpgradeField.superClass_.bindEvents_.call(this);

  this.mouseOverWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);
};

これにより、blockly では以下が自動的に処理されるようになりました。

フィールドがすでに初期化されているかどうかを確認する。
fieldGroup_ を作成しています。
フィールドをレンダリングする。
バインディングのツールチップとエディタイベントの表示。

以下に対処する必要があります。

さらに DOM 要素（initView）。
さらにイベントバインディング（bindEvents_）。
イベントバインディング（dispose）の破棄。

で確認できます。

onMouseDown_

CustomFields.UpgradeField.prototype.onMouseDown_ = function(e) {
  // ...
};

置き換えると次のようになります。

CustomFields.UpgradeField.prototype.showEditor_ = function() {
  // ...
}

showEditor_ 関数をオーバーライドして、マウスを処理することをおすすめします。入力を渡すことができるため、onMouseDown_ 関数ではなくクリックを使用する操作することもできます。

エディタの詳細については、エディタをご覧ください。

setValue

setValue 関数がテンプレートに関数をサブクラス内の重複コードを減らしますsetValue 関数にロジックが含まれている場合、次のモジュールで説明した値処理パスに適合するようにリファクタリングすることを検討します。値の処理。

text_

サイトの text_ プロパティにアクセスしたり、更新したりすることはおすすめしません。フィールドを直接指定します。代わりに、 getText 関数ユーザーが読むことができるフィールドのテキストと setValue 関数フィールドの格納値を更新します

フィールドの値とテキストの詳細については、以下をご覧ください。フィールドの構造。

アップグレードに関するサポートを利用する

提供内容

サポートを依頼する際は、以下の具体的な質問をすることをおすすめします。

非推奨: 「このフィールドの問題点」

推奨されません: 「このフィールドのアップグレードを手伝って」

推奨: 「フィールドテキストが正しく更新されていません。」

また、組織をサポートする人々にリソースを提供する必要もあります。これらの他のユーザーも簡単に使えるようにする必要があります。

非推奨の方法:

コードのイメージ。
コードが不完全です。

推奨:

テキスト形式のフィールドコードを完成させます。
フィールドの不正な動作を示す GIF 画像。
不正なフィールドの動作を再現する手順。
アップグレード元の Blockly のバージョン。

投稿場所

移行の妨げになるデベロッパーについてアップグレードに関する質問を投稿するフォーラムをご覧ください。

Blockly コアに問題があることがわかっている場合は、問題を投稿する公開されています。問題を投稿する場合は、すべての提供します。

カスタム フィールドのアップグレード

危険地域

Blockly.Field.register

setText

おすすめのアップグレード

シリアル化可能

size_.width

init

onMouseDown_

setValue

text_

アップグレードに関するサポートを利用する

提供内容

投稿場所

カスタムフィールドのアップグレード