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. json
Web App Manifest
登録に際してはWeb App Manifest Generatorなどのサービスを利用して作成することをおすすめします。ここで注意が必要なのは,
インストール・ 設定まとめ
以上がインストール・
ページ管理でのAMP HTMLテンプレートの変更
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プラグインは様々なフィードバックを取り込みながら,
多くの皆さまの開発へのご参加をお待ちしています。
バックナンバー
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対応を行った方法や成果を公開