注: このガイドは、新しいカスタム要素 v1 仕様を遵守するように更新されています。仕様についてはこちら、その詳細についてはこちらをご覧ください。
2021 年 7 月現在、古いカスタム コンポーネントは Google Web Designer でサポートが終了します。カスタム コンポーネントを更新する方法については、アップグレード ガイドをご覧ください。
経験を積んだウェブ デベロッパーは、既存のコンポーネントを拡張する、または新しいものをゼロから作り上げるといった方法で、Google Web Designer 用の独自のカスタム コンポーネントを作成できます。他のユーザーは、作成済みのカスタム コンポーネントをインストールすることで、コードを編集することなくプロジェクトに機能を追加できます。
有効なコンポーネント パッケージは、JSON マニフェスト ファイルを含む .zip ファイルで構成されています。パッケージには、カスタム HTML 要素を定義する JavaScript ファイル、その他の必要な JavaScript ファイルや CSS ファイルなど、他のファイルも含まれる場合があります。
1. カスタム要素を定義する
カスタム コンポーネントはカスタム要素として Google Web Designer に実装されます。
カスタム要素は、JavaScript コードで定義してカスタムタグ名を付ける HTML 要素タイプです。定義したカスタム要素は、標準の要素と同じように使用できます。ネイティブの HTML 要素が使用される DOM API では、カスタム要素も使用できます。
カスタム要素の詳細については、WHATWG の HTML 仕様をご覧ください。
Google Web Designer のカスタム要素は、次のガイドラインに沿って処理してください。
- カスタム要素のタグ名には、ハイフン（
-）を使用する必要があります（x-panel、expand-buttonなど）。 gwd-という名前空間は Google Web Designer で予約されているため、カスタム要素には使用できません。
2. 必要な JavaScript ファイルと CSS ファイルを作成して追加する
必要な機能とスタイルを記述した JavaScript と CSS を作成します。
JavaScript や CSS ファイルをパッケージに含める代わりに、外部サーバーから提供することが可能です。その場合、JSON マニフェストに外部ファイルへの参照を含めます。
3. コードを ES5 にトランスパイルする（任意）
ブラウザとの互換性を高めるため、コンポーネントのコードを JavaScript ES5 構文にトランスパイルすることをおすすめします。これにより、古いブラウザでコンポーネントが正しく動作するようになります。
- JavaScript コンパイラ Babel（https://babeljs.io/repl）にアクセスします。
- [PRESETS] セクションで [es2015] をオンにします。
- コンポーネントの JavaScript コードをコピーして、左側のペインに貼り付けます。翻訳されたコードが右側のペインに表示されます。これをコンポーネントで使用します。
4. コンポーネント ファイルの JSON マニフェストを作成する
カスタム コンポーネントには、コンポーネントの情報を Google Web Designer に伝えるための、manifest.json という JSON 形式のマニフェスト ファイルが必要です。下記のスキーマに従ってください。主なプロパティには次のものがあります。
type- 必須。version- 必須。カスタム コンポーネントを更新するたびにバージョン番号を増やします。customElementsVersion- カスタム要素 v1 仕様に準拠した新しいコンポーネントに必要です。files- カスタム コンポーネント パッケージに含まれる他のファイルを一覧表示します。externalScripts- 外部スクリプトの依存関係を指定します。これらのスクリプトは、ドキュメントのの