EC-CUBE勉強会2019.09 AMP

Transcript

1. EC-CUBE勉強会 2019.09 株式会社サンデイシステムズ 永沼光啓

2. AMPとは ?

3. 概要 ： Accelerated Mobile Pages ： HTMLフレームワーク ： ⾼速に表⽰が可能 正式名称

   区分 特徴
4. None

5. “ Googleはアクセスしたウェブページが低速である と「多くのユーザーはそのページの閲覧をやめてし まう」というデータを⽰しており、ページが⾼速で 表⽰される事は、ユーザー体験としてとても有益。 “

6. 制限 CSS HTML JavaScript amp-imgλάͳͲͷ ಠࣗཁૉ 50KB·Ͱ jQuery౳ ېࢭ

7. “ とはいえ、コンポーネントが充実してきてAMPで実 現できる事は増えてきており、それほど不⾃由さは 感じなくなってきている。エンドユーザにとって最 善の体験を提供できる仕組みを使⽤する事は、制作 サイドにとっても⾮常に価値の⾼い事である。 “

8. AMPプラグインについて

9. AMPプラグインがやってくれる事 AMP対応したtwigテンプレートを追加 ⾃⼰最適化処理の連携機能を提供 PWA化の実施

10. Template A Template B Template C EC-CUBE App Server Plugin

    AMP Template A AMP Template B AMP Template C Service Worker Web App Manifest Cloud Functions amp-optimizer
11. None
12. None
13. None
14. None

15. これが所謂 PWAMP WEBサイトのエントリーポイントはAMP化して⾼速表⽰の体験 その後PWA化したサイトのUXを提供する AMP to PWAと⾔われる⼿法

16. <link rel="manifest" href="{{ url('amp_manifest') }}">

17. 管理画⾯でできる事

18. None

19. Paired AMP AMP first https://◦◦.com/product/detail https://◦◦.com/amp/product/detail https://◦◦.com/product/detail

20. None
21. None
22. None

23. インタラクション

24. インタラクション • දࣔ͞Ε͍ͯΔ঎඼ֹۚΛมߋ • දࣔ͞Ε͍ͯΔ঎඼ίʔυΛมߋ • ೋͭΊͷηϨΫτϘοΫεͷoptionཁૉͷ஋Λมߋ • ࡏݿ༗ແͷ൑ఆ͓ΑͼϘλϯͷϥϕϧมߋ •

    ϑΥʔϜૹ৴࣌ͷ஋ͷมߋ

25. AMPコンポーネント amp-list amp-mustache amp-bind

26. None
27. None
28. None
29. None

30. • /Block/cart.twig • /Block/login_sp.twig • /Block/login.twig • /Block/news.twig • /Block/search_product.twig

    • /Product/detail.twig • /Product/list.twig amp-list使⽤箇所

31. サービスワーカー

32. app/Plugin/Amp4/Controller/TopController.php

33. /gulpfile.js

34. None