Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EC-CUBE勉強会2019.09 AMP
Search
naganuma-mitsuhiro
September 06, 2019
Programming
1
370
EC-CUBE勉強会2019.09 AMP
naganuma-mitsuhiro
September 06, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
310
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Milestoner
bkuhlmann
1
410
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
230
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
510
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Elm 0.19.0 Changes
bkuhlmann
0
490
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
28
6.3k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Happy Clients
brianwarren
92
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Gamification - CAS2011
davidbonilla
76
4.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Optimizing for Happiness
mojombo
370
69k
Documentation Writing (for coders)
carmenintech
60
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Being A Developer After 40
akosma
57
580k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Transcript
EC-CUBE勉強会 2019.09 株式会社サンデイシステムズ 永沼光啓
AMPとは ?
概要 : Accelerated Mobile Pages : HTMLフレームワーク : ⾼速に表⽰が可能 正式名称
区分 特徴
None
“ Googleはアクセスしたウェブページが低速である と「多くのユーザーはそのページの閲覧をやめてし まう」というデータを⽰しており、ページが⾼速で 表⽰される事は、ユーザー体験としてとても有益。 “
制限 CSS HTML JavaScript amp-imgλάͳͲͷ ಠࣗཁૉ 50KB·Ͱ jQuery ېࢭ
“ とはいえ、コンポーネントが充実してきてAMPで実 現できる事は増えてきており、それほど不⾃由さは 感じなくなってきている。エンドユーザにとって最 善の体験を提供できる仕組みを使⽤する事は、制作 サイドにとっても⾮常に価値の⾼い事である。 “
AMPプラグインについて
AMPプラグインがやってくれる事 AMP対応したtwigテンプレートを追加 ⾃⼰最適化処理の連携機能を提供 PWA化の実施
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
None
None
None
None
これが所謂 PWAMP WEBサイトのエントリーポイントはAMP化して⾼速表⽰の体験 その後PWA化したサイトのUXを提供する AMP to PWAと⾔われる⼿法
<link rel="manifest" href="{{ url('amp_manifest') }}">
管理画⾯でできる事
None
Paired AMP AMP first https://◦◦.com/product/detail https://◦◦.com/amp/product/detail https://◦◦.com/product/detail
None
None
None
インタラクション
インタラクション • දࣔ͞Ε͍ͯΔֹۚΛมߋ • දࣔ͞Ε͍ͯΔίʔυΛมߋ • ೋͭΊͷηϨΫτϘοΫεͷoptionཁૉͷΛมߋ • ࡏݿ༗ແͷఆ͓ΑͼϘλϯͷϥϕϧมߋ •
ϑΥʔϜૹ৴࣌ͷͷมߋ
AMPコンポーネント amp-list amp-mustache amp-bind
None
None
None
None
• /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使⽤箇所
サービスワーカー
app/Plugin/Amp4/Controller/TopController.php
/gulpfile.js
None