第3回　実践！EC-CUBEのAMP HTML化［その2：プラグイン管理機能］

EC-CUBE 4のAMP HTML化（続き）

今回は前回に引き続き、EC-CUBE 4のAMP HTML化からプラグインの管理機能の概要までを解説します。

amp-bindによるデータバインディング

EC-CUBE 4のデフォルトで商品規格が2つ存在する商品詳細ページの場合、ローディングが完了した初期の段階ではセレクトボックスが2つ並び、1つ目のセレクトボックスには商品に紐付く商品規格1の情報が、option要素のvalue属性、選択肢の項目名としてセットされます。

このとき、2つ目のoption要素には、まだvalue属性も選択肢の項目名もセットされていません（初期表示用の「選択してください」を除く⁠）⁠。

これは1つ目のセレクトボックスで選択する商品規格1のvalue属性の値を元に、それに依存する商品規格2の情報を、2つ目のセレクトボックス内に展開するためです。

この挙動をAMP HTML化したページで実現するには、AMPコンポーネントのamp-bindを使用し、セレクトボックスを操作した際にデータバインドを行う必要があります。

たとえば前述の商品詳細ページにおいて、ブラウザ上で描画されているコンテンツは、まず1つ目のセレクトボックスのタグに以下のようなコードが展開されます。

<select id="classcategory_id1" name="classcategory_id1" class="form-control" on="change: AMP.setState({selectOption: classCategories.items[0].classcategory_1.filter(elm => elm.id == event.value)[0], selectResult: ''})">

ポイントはon属性にセットしたchangeイベントです。

ここで実行されるのはセレクトボックスを変更した際に、AMP.setStateで、selectOption・selectResultといった、1つ目のセレクトボックスの変更を行った後に実施されるインタラクションを行うために必要なJSONデータの定義および更新を行っています。

selectOptionでは、まずページ内で読み込んでいる下記のamp-state要素からclassCategories.jsonのデータを参照し、filter関数を用いてoption要素の値と合致する配列データの絞り込みを行います。

<amp-state id="classCategories" src="https://◯◯◯.com/classCategories.json">

そしてselectOptionの定義および更新が発生したタイミングで、二つ目のamp-list要素の[src]属性値の式が再評価され、データバインドが発生します。

<amp-list class="ec-selectList" layout="flex-item" [src]="selectOption || 'https://◯◯◯.com/classCategories.json'" src="./classCategories.json">

ここでamp-list要素が新たに参照するようになったselectOptionのデータを元に、option要素のレンダリングを実行します。

これで1つ目のセレクトボックスを選択した後、2つ目のセレクトボックスにoption要素のvalue属性、選択肢の項目名を展開する機能が実現できました。

そして今度は、動的に展開された2つ目のセレクトボックスに関しての処理に移っていきます。

1つ目のセレクトボックス変更時に定義した空のデータであるselectResult、こちらは2つ目のセレクトボックス変更の際に、先に定義したselectOptionのデータをさらに絞り込み、最終的なデータselectResultとして更新を行います。

<select id="classcategory_id2" name="classcategory_id2" class="form-control" on="change: AMP.setState({selectResult: selectOption.classcategory_2.filter(elm => elm.id == event.value)[0]})">

これによりユーザが選択した商品の、最終的な商品金額、商品コード、在庫の有無、フォーム送信時の値が決定し、ページ内でamp-bindによるデータバインディングが実行され、デフォルトのEC-CUBE 4と同様のインタラクションを実現できます。

参考までに商品金額、商品コード部分のソースコードは以下の通りとなります。

<amp-list class="ec-productRole__info" height="155" layout="flex-item" src="https://◯◯◯.com/classCategories.json">
  <template type="amp-mustache">
    <div class="ec-productRole__priceRegular">
      <span class="ec-productRole__priceRegularPrice">通常価格：
        <span class="price01-default">{{default_price01}}
      </span>
      <span class="ec-productRole__priceRegularTax">税込
    </div>
    <div class="ec-productRole__price">
      <div class="ec-price">
        <span class="ec-price__price price02-default" [text]="selectResult.price02_inc_tax || classCategories.items[0].default_price02">{{default_price02}}
        <span class="ec-price__tax">税込
      </div>
    </div>
    <div class="ec-productRole__code"> 商品コード：
      <span class="product-code-default" [text]="selectResult.product_code || classCategories.items[0].default_code">{{default_code}}
    </div>
  </template>
</amp-list>

初期状態では、classCategories.jsonのデータ内に含まれるデフォルトの値が反映され、その後ユーザインタラクションによって最終的に決定したselectResultのデータを呼び出すようになっています。

管理機能の概要

EC-CUBE 4をAMP HTML化するにあたり、EC-CUBE 4そのものを改変せずにAMP対応が実現できるよう、手軽にインストール可能な拡張機能を用意しています。

AMPプラグインでは、トップページ、商品一覧ページ、商品詳細ページのAMP HTML化し、PWA（Progressive Web Apps）の機能であるホーム画面へ追加や、リソースの先読みが実現可能となっています。これらの機能は、EC-CUBE 4の管理機能から手軽に変更できるようになっていますので、ご紹介します。

AMPプラグインの追加によって拡張される管理機能

AMPプラグインを導入することによって、EC-CUBE 4の管理機能の内容が一部、変更・追加されます。

プラグイン・AMP設定ページでの、AMP HTMLに関する各種設定
レイアウト管理での、端末種別AMPの追加
ページ管理での、AMP HTMLに関する各種設定
ブロック管理での、AMP HTMLに関する各種設定

今回のプラグインでは、AMPのレイアウトが追加され各ページにAMP HTMLを追加可能になります。その中でもトップページ、商品一覧ページ、商品詳細ページについては、プラグインをインストールするタイミングで、EC-CUBE 4のデフォルトとほぼ同様のAMP HTMLやそれに付随するcss/画像等が設定されるようになっています。

以上が、管理画面の概要となります。

次回は引き続き管理画面の解説を行います。