Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EC-CUBE勉強会2019.09 AMP

EC-CUBE勉強会2019.09 AMP

43e1b78a5aebc341bf717405c22573be?s=128

naganuma-mitsuhiro

September 06, 2019
Tweet

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