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
360
EC-CUBE勉強会2019.09 AMP
naganuma-mitsuhiro
September 06, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Docker ハンズオン / docker-hands-on
suzukihoge
48
15k
OpCode目線で眺める PHPコードのカバレッジ
o0h
PRO
2
470
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
22
12k
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
120
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
TypeScript x GraphQLで2年開発してみて
yutank34
8
4.7k
期限が近づいてきた!Privacy Manifests対応
ryunakayama
5
3.1k
CSC308B Lecture 12
javiergs
PRO
0
110
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
7
5.9k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
160
メール認証とRuby
uvb_76
0
110
「Hono遍歴」と「HonoXでブログ作成」
yasu551
0
170
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Documentation Writing (for coders)
carmenintech
59
3.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Typedesign – Prime Four
hannesfritz
36
2k
Atom: Resistance is Futile
akmur
258
25k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
A better future with KSS
kneath
230
16k
A designer walks into a library…
pauljervisheath
199
23k
Gamification - CAS2011
davidbonilla
76
4.5k
What's in a price? How to price your products and services
michaelherold
236
11k
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