EC-CUBE勉強会2019.09 AMP

Transcript

1. EC-CUBE勉強会 2019.09 株式会社サンデイシステムズ 永沼光啓
2. AMPとは ?
3. 概要 ： Accelerated Mobile Pages ： HTMLフレームワーク ： ⾼速に表⽰が可能 正式名称 区分 特徴
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
15. これが所謂 PWAMP WEBサイトのエントリーポイントはAMP化して⾼速表⽰の体験 その後PWA化したサイトのUXを提供する AMP to PWAと⾔われる⼿法
16. <link rel="manifest" href="{{ url('amp_manifest') }}">
17. 管理画⾯でできる事
19. Paired AMP AMP first https://◦◦.com/product/detail https://◦◦.com/amp/product/detail https://◦◦.com/product/detail
23. インタラクション
24. インタラクション • දࣔ͞Ε͍ͯΔ঎඼ֹۚΛมߋ • දࣔ͞Ε͍ͯΔ঎඼ίʔυΛมߋ • ೋͭΊͷηϨΫτϘοΫεͷoptionཁૉͷ஋Λมߋ • ࡏݿ༗ແͷ൑ఆ͓ΑͼϘλϯͷϥϕϧมߋ • ϑΥʔϜૹ৴࣌ͷ஋ͷมߋ
25. AMPコンポーネント amp-list amp-mustache amp-bind
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