AMPでEC-CUBEがさらに便利に快適に！
第4回 実践！EC-CUBEのAMP HTML化［その3：管理画面，インストール，各種設定］
管理機能 詳細
AMPプラグインのインストール/設定
AMPプラグインのインストールは非常に簡単です。
本稿が公開されるタイミングでは，
- EC-CUBEプラグイン導入方法
- http://
doc4. ec-cube. net/ plugin_ install
- AMPプラグイン
（オーナーズストア） - https://
www. ec-cube. net/ products/ detail. php?product_ id=1786
インストールが完了したら，
図 プラグイン設定ページ
AMP TYPE
AMPプラグインでは，
AMP Cache
こちらはEC-CUBE 4で管理するコンテンツに対し，
ページ内に含まれるURL正規化タグ
Canonical AMP
こちらはEC-CUBE 4で管理するコンテンツに対し，
最適化
最適化
最適化処理を行うAPIに関しては，
たとえば，
amp-toolbox-optimizerについて
AMPプラグインでは，
amp-toolbox-optimizerは，
最適化
- AMP設定ページで最適化
「有効」 に設定。 - 登録時にajaxによって，
Twigテンプレートをamp-toolbox-optimizerでの処理が行えるよう， Twigで使用するタグを一時的に変換しておく。 - 変換後の内容を最適化APIに送信する。
- 最適化サービス側でAMP最適化を行いレスポンスを返す。
- プラグイン側がレスポンスを取得し，
一時変換していたTwigタグを元に戻して保存。 - すべての変換が成功した場合は，
最適化されたテンプレートを適用する。
変換処理が失敗した場合
図 最適化
上記の流れは
- プラグインインストール時
- ページ編集でのAMP HTML保存時
- ブロック編集でのAMP HTML保存時
それぞれで動作します。
AMP共通CSS
こちらの設定画面では，
Manifest.
Web App Manifest
登録に際してはWeb App Manifest Generatorなどのサービスを利用して作成することをおすすめします。ここで注意が必要なのは，
インストール・
以上がインストール・
ページ管理でのAMP HTMLテンプレートの変更
AMPプラグインをインストールすると，
図 AMPプラグインをインストールした場合の管理画面
Twigで使用するタグと，
その際，
それを回避するため，
{{ "{{ name }}" }}
以上が，
今後の課題
プラグイン自体の今後の課題と，
amp-next-page
商品一覧で，
AMP HTML整合性チェックAPI
整合性をチェックするWebページはありますが，
Webフォントのローディング
Webフォント，
まとめ
- Lighthouse等でウェブアプリの監査を行い，
高速化を行っていること - AMPの仕様や，
メリット・ デメリットを理解していること
が前提になりますが，
なお，
- GitHub - EC-CUBE/
amp-plugin - https://
github. com/ EC-CUBE/ amp-plugin
AMPプラグインは様々なフィードバックを取り込みながら，
多くの皆さまの開発へのご参加をお待ちしています。
著者プロフィール
株式会社サンデイシステムズ
EC-CUBEインテグレートパートナー，プラチナランク。
自社ECサイト・オンラインショップ構築・運用支援のプロフェッショナル。
バックナンバー
AMPでEC-CUBEがさらに便利に快適に！
- 第5回 海外からも注目。あなたもEC-CUBE×AMPプロジェクトに参加できる？！
- 第4回 実践！EC-CUBEのAMP HTML化［その3：管理画面，インストール，各種設定］
- 第3回 実践！EC-CUBEのAMP HTML化［その2：プラグイン管理機能］
- 第2回 実践！EC-CUBEのAMP HTML化［その1：商品詳細ページ］
- 第1回 いよいよECでもAMP対応が加速！EC-CUBEでAMP対応を行った方法や成果を公開