カスタム コンポーネント アップグレード ガイド

カスタム コンポーネントのアップグレードが必要な理由

2021 年 7 月現在、Google Web Designer は v0 カスタム コンポーネントのサポートを終了しました。古いカスタム コンポーネントはカスタム要素 v1 仕様に合わせてアップグレードする必要があります。

カスタム コンポーネントが古いかどうかの確認方法

Google Web Designer で古いカスタム コンポーネントを含むドキュメントを開くと、警告が表示されます。また [コンポーネント] パネルのコンポーネント名の横に、警告インジケーター がもう 1 つのアイコン （ステージ上の古いカスタム コンポーネントを示します）とともに表示されます。

コンポーネントのソースファイルでチェックすることもできます。以下の例では、古いバージョンの QR code カスタム コンポーネントを使用しています。

manifest.json

新しいカスタム コンポーネントのマニフェストには、customElementsVersion という名前のフィールドがあります。このフィールドには、そのコンポーネントがカスタム要素仕様のどのバージョンを遵守して記述されたかが示されています。

{
  ...
  "customElementsVersion": 1,
  ...
}

古いコンポーネントのマニフェストには、このフィールドがありません。

myqrcode.js

古いコンポーネントでは、登録に document.registerElement() メソッドが使用されています。

古いコンポーネント（カスタム要素 v0）

document.registerElement('my-qrcode', {prototype: proto});

新しいコンポーネントでは、代わりに customElements.define() メソッドが使用されています。

新しいコンポーネント（カスタム要素 v1）

customElements.define('my-qrcode', MyQrcode);

コンポーネント ファイルに「document.registerElement」という文字列が含まれていたら、そのファイルは古いと判断できます。コンポーネントを更新する手順は以下のとおりです。

アップグレード手順

1. コンポーネントのマニフェストを更新する

コンポーネントのマニフェストに、新しく customElementsVersion フィールドを追加します。また、コンポーネントを変更したことを Google Web Designer に伝えるため、バージョン番号を増やします。

manifest.json

{
  "name": "QR Code",
  "type": "my-qrcode",
  "tagName": "my-qrcode",
  "customElementsVersion": 1,
  "version": 2,
  "description": "Generates a QR code image for the specified data.",
  "files": {
    "js": [
      "qr.js",
      "myqrcode.js"
    ]
  },
  "attributes": [
   {
    "name": "data",
    "label": "Data",
    "type": "string",
    "required": true,
    "description": "The data to encode in the QR code image"
   }
  ],
  "events": [
  ],
  "methods": [
  ],
  "nestable": false
}

2. コンポーネントの JavaScript コードを更新する

新しいコンポーネントの JavaScript は、ES2015 クラス構文を使用して記述する必要があります。

カスタム要素 v1 仕様では JavaScript API が変更されましたが、幸いなことに、古い v0 API のメソッドを新しい v1 のメソッドにうまくマッピングできます。

以下に、実際に動作する更新済み my-qrcode コンポーネントの例を示します。

myqrcode.js

/** @fileoverview Implementation of the my-qrcode component. */
if (window.customElements && window.customElements.define) {
  class MyQrcode extends HTMLElement {
    constructor() {
      super();
      this.img = null;
    }

    connectedCallback() {
      this.generateImage();
    }

    static get observedAttributes() {
      return ['data'];
    }

    attributeChangedCallback(attributeName) {
      if (!this.img) {
        return;
      }
      switch (attributeName) {
        case 'data':
          this.generateImage();
          break;
      }
    }

    generateImage() {
      const data = this.getAttribute('data');
      if (data) {
        if (!this.img) {
          this.img = document.createElement('img');
          this.img.style.height = '100%';
          this.appendChild(this.img);
        }
        this.img.setAttribute('src', QRCode.generatePNG(data));
      } 
    }
  }

  customElements.define('my-qrcode', MyQrcode);
}

注意事項:

• 新しいコンポーネントは、HTMLElement を拡張する必要があります。
• super() はコンストラクタ内から呼び出す必要があります。
• 属性が observedAttributes にリストされていない場合は、attributeChangedCallback はトリガーされません。

新しいカスタム要素 v1 仕様とカスタム要素の作成について詳しくはこちらをご覧ください。

3. JavaScript コードを ES5 にトランスパイルする（推奨）

上記の更新済み QR code コンポーネントは、Google Chrome など、ES2015（ES6）クラス構文をサポートするブラウザで動作します。これらよりも古いブラウザはこの新しい JavaScript 構文を認識せず、トランスパイルが必要です。カスタム コンポーネントがすべてのブラウザで正しく動作するように、トランスパイラを使用してセクション 2 の JavaScript コードを ES5 に変換することを強くおすすめします。

babeljs.io の Babel は、広く利用されているトランスパイラで、どのオペレーティング システムでも動作します。ウェブアプリ版も、babeljs.io/repl からオンラインで利用できます。

Babel ウェブアプリを使用する場合は、[PRESETS] の [es2015] をオンにしてください。

コンポーネント パッケージの元の JavaScript コードを、トランスパイルされたコードに置き換えます。

4. 更新済みコンポーネントをインストールする

Google Web Designer の [コンポーネント] パネルで、削除ボタン を使用して古いコンポーネントを削除し、カスタム コンポーネントを追加ボタン を使用して更新版の .zip ファイルをインストールします。