Google Developers Japan: EC-CUBE の AMP 対応がプログレッシブに進行中

Local blog for Japanese speaking developers

EC-CUBE の AMP 対応がプログレッシブに進行中

2019年1月9日水曜日

この記事は Google モバイルソリューションコンサルタント、Yusuke Utsunomiya と Google グローバルプロダクトパートナーシップ Monisha Varadan による Accelerated Mobile Pages Project の記事 "Progressively AMPlify EC-CUBE" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。code { background-color: transparent }EC-CUBE が、e コマースストアで AMP を使用するためのベータ版プラグインをリリースしました。このプラグインは、EC-CUBE のパートナーとして知られている株式会社サンデイシステムズが、Google のモバイルソリューションコンサルタントと協力してわずか 1 か月で開発したものです😲。ウェブサイトで EC-CUBE を利用している方は、こちらからプラグインを試してみることができます。

EC-CUBE は PHP ベースの CMS です。180 万回以上ダウンロードされ、3 万以上のマーチャントに利用されていますが、さらにエンドユーザーの UX を向上する機会を探していました。2018 年 10 月には、バックエンドパフォーマンスとアーキテクチャに重点を置いたメジャーアップデート v4.0.0 をリリースしたばかりです。さらに、AMP と主な PWA テクノロジーを活用してフロントエンドも最適化することが決まりました。新しくリリースされた AMP プラグインはまだ試験運用版フェーズですが、いくつかの特筆すべき機能はすでに備わっており、高速で最適化された UX/DX を提供しています。

PHP デベロッパーコミュニティとの親和性を考慮し、既存の EC-CUBE の PHP Twig テンプレートを有効な AMP テンプレートに変換します。AMP 固有の構文に悩まされる必要はありません！

このプラグインは、CMS 管理画面から設定できます。デベロッパーは、プラグインのオン / オフを切り替えたり、レイアウトをカスタマイズしたり、コンポーネントを開発したり、変換した AMP テンプレートを専用の UI から直接編集したりできるようになります。

デベロッパーは、「Paired AMP モード」と「AMP First モード」から選択することができます。Paired AMP モードでは、メインサイトは影響を受けませんが、検索エンジンなどのランディングページとして AMP を使うように最適化されます。AMP First モードでは、サイト上のすべてのページで常に AMP が使用されるようにサイト全体が変更されます。

このプラグインは、PWA としても動作します。プラグインには Service Worker とウェブアプリマニフェストがバンドルされているので、デベロッパーは EC-CUBE ストアをモバイル端末のホーム画面に追加したり、オフラインで使用したりできるようになります。

EC-CUBE はデフォルトテンプレート（アイスクリームショップ🍦）を使ったトライアルを実施し、スピードが大幅に向上し、各機能が正しく AMP に変換されていることを確認しています。たとえば、スライドメニューには「amp-sidebar」、商品オプションの取得には「amp-list」、ユーザーがオプションを選択した際に価格を変更する処理には「amp-bind」が使われています。

WebPageTest の Fast 3G / Moto G4 シミュレーションで、非 AMP ページと事前レンダリングされているペア AMP ページを比較した際のイメージ

レスポンシブな AMP ファーストモード。ストアのトップページ、一覧ページ、商品詳細ページのすべてが AMP 化されている。インタラクティブな UI で AMP ページから AMP ページへのスムーズなナビゲーションを実現していることがわかる。トライアルでは、ホーム画面に追加、オフラインブラウジングなどの PWA 機能の実験も行われました。マーチャントは、ビジネス戦略において、このようなアプリ的機能を活用することも検討できるようになります。

この EC-CUBE のソリューションは、昨年 11 月に開催された Chrome Dev Summit の「Progressive Content Management Systems」というセッションで取り上げられました。また、EC-CUBE とサンデイシステムズ社は、AMP プラグインの詳細とプロジェクトの全体像をこちら（日本語）の記事で公開しています。コードスニペットやアーキテクチャから、その仕組みがわかるはずです。デモページにアクセスしてプラグインを試し、GitHub のコードを確認してみてください。そして、感想をお聞かせください！コメントやフィードバックは大歓迎です。プラグインの GitHub Issue や、Slack チャンネルからお寄せください。
プロジェクト全体について助言してくれた Google デベロッパーアドボケートの Alan Kent、Google グローバルプロダクトパートナーシップの Chris Sater に感謝いたします。Yusuke Utsunomiya - Mobile Solutions Consultant, gTech