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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
naganuma-mitsuhiro
September 06, 2019
Programming
460
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
EC-CUBE勉強会2019.09 AMP
naganuma-mitsuhiro
September 06, 2019
Other Decks in Programming
See All in Programming
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
450
Lemonade + Foundry Toolkit でお手軽アプリ開発
seosoft
1
310
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成(CC Night 2026)
wemra
1
110
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
120
Make SRE Operations Easier with Azure SRE Agent
kkamegawa
0
4.8k
Hunting Vulnerabilities in Symfony with LLMs
vinceamstoutz
0
520
技術記事、AIに書かせるか、自分で書くか? 〜それでも私が自分の手で書く理由〜 / #QiitaConference
jnchito
2
1.3k
dRuby over BLE
makicamel
2
330
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
minako__ph
4
1.6k
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
daitasu
0
180
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
tk3fftk
5
680
AIで効率化できた業務・日常
ochtum
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How STYLIGHT went responsive
nonsquared
100
6.2k
GraphQLとの向き合い方2022年版
quramy
50
15k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
190
Scaling GitHub
holman
464
140k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
200
Balancing Empowerment & Direction
lara
6
1.1k
Thoughts on Productivity
jonyablonski
76
5.2k
Why Our Code Smells
bkeepers
PRO
340
58k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
610
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