Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
制約と誓約
Junya
October 29, 2019
Programming
6
2.4k
制約と誓約
Junya
October 29, 2019
Tweet
Share
More Decks by Junya
See All by Junya
AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain
ka2jun8
3
1.7k
SEO のためにエンジニアができること
ka2jun8
2
1k
Chrome Dev Summit 2019振り返り
ka2jun8
0
260
エンジニアになろう
ka2jun8
0
270
Other Decks in Programming
See All in Programming
Hapticをカスタマイズしてみよう / ZOZO Tech Talk #6 Customize Haptic
endoumari
0
360
Named Document って何?
harunakano
0
570
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
190
SRE bridge the gap: Feature development to Core API / 機能開発チームとコアAPIチームの架け橋としてのSRE
kenzan100
1
460
CLI構築のススメ
nyankotaro
1
250
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
140
Git Rebase
bkuhlmann
7
1k
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
850
Better Reliability through Observability (and Experimentation)
ksatirli
PRO
1
370
코드 품질 1% 올리기
pluu
1
1k
You CANt teach an old dog new tricks
michaelbukachi
0
120
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
150
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Done Done
chrislema
174
14k
Designing with Data
zakiwarfel
91
3.9k
Three Pipe Problems
jasonvnalue
89
8.6k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Practical Orchestrator
shlominoach
178
8.6k
Adopting Sorbet at Scale
ufuk
63
7.5k
Why Our Code Smells
bkeepers
PRO
324
54k
A better future with KSS
kneath
225
15k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.6k
The Invisible Side of Design
smashingmag
289
48k
Transcript
੍ͱ Մࣇ ५ @ka2jun8 2019/10/29 Nihonbashi.js ձఏڙLT
ࣗݾհ ## Մࣇ ५ʢKani Junyaʣ - twitterɿ @ka2jun8 ### ܦྺͱॴଐ
- 20144݄ ৽ଔ F ͔Β͡·ΔձࣾʢR&Dʣ - 20184݄ த్ R ͔Β͡·ΔձࣾʢFEʣ ### ͬͯΔ͜ͱ - WebαʔϏεͷ৽ن্ཱͪ͛/ϑϧϦϓϨΠε - ࠷ۙ AMP Λͬͨ։ൃʹணख ### ϚΠϒʔϜ/͖ͳͷ - ೫ࡔ46 / Dead by Daylight / HUNTER x HUNTER ←্࢘
ࡢͷ͓ன͝ΖͷSlack
ಥવͷLT
্࢘ʹԿͰ͍͍ͯ͠ͱݴ ΘΕͨͷͰ
AMP ͷΛ͠·͢
ࠓ͔Β͢ͷશ෦ ྫ͑ ͷͰ͢
Α͠ʂ৽نͰ B to C ͷ WebαʔϏεΛ։ൃΛ͢Δͧ SEO SEO SEO SEO
IEରԠ σβΠϯ BFF ։ൃޮ SEO SEO
͓Ε͕ࢥ͏ݱ࠷ڧͷਞ • AMP • React • next.js • typescript •
styled-components
• AMP • React • next.js • typescript • styled-components
͓Ε͕ࢥ͏ݱ࠷ڧͷਞ
AMPͬͨ͜ͱ͋Δਓʁ
AMP is … https://amp.dev/about/websites/ https://blog.amp.dev/2018/11/20/progressively-amplify-ec-cube/
AMP is … ༷ʑͳݫ੍͍͠ͱͷԼͰ AMP valid ͳWebϖʔδΛ։ൃ ͢Δ͜ͱͰɺGoogle ͷΩϟογϡʹࡌΓɺݕࡧ݁Ռ͔Βߴʹ WebϖʔδΛදࣔՄೳʹ͢Δɻ
੍ͱͷྫ - JavaScript ͕ར༻Ͱ͖ͳ͍ - ಈతͳ෦ AMP ίϯϙʔωϯτΛ͏ - CSS 50KB ҎԼ - ੳ/ࠂλάڐ༰͞ΕͨͷͷΈར༻Մೳ ͳͲͳͲ…..
AMP ͷ։ൃύλʔϯ • Hybrid AMP • Full AMP ( AMP
First )
hybrid ? 8FCϖʔδ ".1ϖʔδ canonical User
Hybrid AMP • ͍͍ͱ͜Ζ ˠ AMP valid ͳϖʔδΛผʹ༻ҙ͢ΔͨΊɺແཧʹAMP ίϯϙʔωϯτΛۦͯ͠ػೳΛ࡞ΓࠐΉඞཁͳ͍ •
ΘΔ͍ͱ͜Ζ ˠ ೋॏ։ൃʹͳΔ
Full AMP ".1POMZ User
Full AMP • ͍͍ͱ͜Ζ ˠ ೋॏ։ൃͷඞཁ͕ͳ͍ • ΘΔ͍ͱ͜Ζ ˠ AMP
valid ͷ੍ͷԼɺͯ͢ͷػೳΛ࡞Γ্͛ Δඞཁ͕͋Δ
ϦϦʔε·Ͱͷεϐʔυ༏ઌ ೋॏ։ൃͤͣʹ Full AMP Ͱ͍͘
߈Ίͷ࢟ • Full AMP • React • next.js • typescript
• styled-components
next.js + AMP • pages/${hoge}.tsx ϖʔδʹ config Λ export ͢Δ͚ͩ
• next.js ෦ͷ _document.tsx ͳͲͰ amp ༻ʹ html ΛՃ ͯ͘͠ΕΔ https://github.com/zeit/next.js/blob/canary/packages/next/pages/_document.tsx headλά htmlλά
AMP + next.js + styled-components https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js _document.tsx Ͱ SSR ࣌ʹ
head λάʹ style Λॻ͖ग़͢ॲཧΛೖΕΔ GlobalStyle _app.tsx Ͱఆٛ͢Δ ※ͳͥ͜͏ॻ͘ͷ͔ɺ ෦ͷॲཧܥ͕݁ߏ͜͠ ͍ͷͰɺ͜Ε·ͨผͰϒ ϩάͱ͔ॻ͔͘ AMP ༻ʹ Style Λ <head> ʹશ෦ॻ͘
ͳͷͰAMPԽָউ
ͱ͍͔ͳ͍
ͭ·ͬͨͱ͜ΖΛڞ༗
ܕ͕ͳ͍ • Typescript + react ͰΔͳΒࣗͰܕ Λॻ͘ඞཁ͕͋Δ ɾ ɾ ɾ
Styled-components ͱ૬ੑ͕ѱ͍ • styled.div`` ͷΑ͏ͳϊϦͰɺ styled[“amp-img”]`` ͕Ͱ͖ͳ͍ɻ • ӈͷ AmpImg
ͷΑ͏ ͳϥούΛ༻ҙͯ͠ styled(AmpImg) ͱ͔͠ͳ͍ͱ͍͚ͳ ͍
Styled-components ͱ૬ੑ͕ѱ͍2 • AMP [class] (data-amp-bind-class) ͱ͍͏ଐੑΛ࣋ͨͤ Δ͜ͱ͕Ͱ͖Δɻ <div
[class]=“ampState.index==1 ? ‘selected’ : ‘’ ”> • ͜ΕΛ styled-components ʹ͋ͯΔͱ class ͷมߋͱಉ࣌ ʹ style ͕શ෦ॻ͖มΘΔͨΊɺ <StyledDiv [class]=“ampState.index==1 ? ‘selected’ : ‘’> ͱ͍͏;͏ʹॻ͚ͳ͍ɻ const StyledDiv = styled.div`style: hogehoge;`
AMP analytics / GTM ͕… • Adobe analytics ͷಈ࡞͕ෆ҆ఆ •
GTM Ͱ AMP ͚ͷίϯςφΛ࡞ΕΔͷ ͷɺಈ࡞อূ͞Εͯͳ͍λάଟ͍ • ͦͦ AMP cache ʢgoogle υϝΠϯʣ ITP 2.3 Ͱ࠶๚ΛऔΔͷյ໓త…
ͦͷ΄͔ʹ • ϦϦʔε͞Εͳ͍ͱ࣮ࡍͷޮՌΘ͔ΒͣɺAMPʹ͔ͨ͠Βͱ͍ͬͯSEO͕ྑ͘ͳΔอূ͕͋ΔΘ ͚Ͱͳ͍ɻ • จࣈྻϕʔεͰAMPಠࣗͷଐੑonΠϕϯτͷεΫϦϓτΛهड़͢ΔͷͭΒEɻ • amp-sidebar Ͱ iOS
ͷͱ͖͚ͩ͋Γ͕ͨ໎ͳۭͷ div ΛೖΕͯ͘Δɻ • debugͣ͠Β͍ɻ • AMPΩϟογϡ͕ޮ͍ͯ͠·͏ͱɺApp Indexing͕͖͔ͳ͍ʢΒ͍͠ʣɻ • Chrome ֦ுͷ AMP validator ͕ϦΫΤετΛૹΓ·ͬͯͭ͘Β͍ɻ • next.js Ͱ͍ͬͯΔ amphtml-validator ͷGoogle ຊՈͷ validator ͕ update ͞ΕɺCDNܦ༝Ͱ ৴͞Ε͍ͯΔ͜ͱʹΑͬͯ next.js ͕ update ͯ͠ͳ͍ͷʹಥવམͪΔࣄ݅ɻ ͳͲͨ͘͞Μ͋ͬͯॻ͖͖Εͳ͍…
AMP Λͬͯ։ൃ͖͔͢ʁ • ͋ΔఔେنͳاۀͷαʔϏε։ൃΛߦ͏࣮ੈքͰ Full AMP ݫ͍͠ɻ • ҰํɺAMPࣗ next.js
͕͍͘͢ͳΓͭͭ͋ΔʢAMP Bento / next v9ʣɻ AMP ίϯϙʔωϯτɺWeb Components ͱͯ͑͠Δͷଟ͍ɻͲͧ͜ ͷΒͳ͍αʔυύʔςΟϥΠϒϥϦΛ͏ΑΓྑ͍ͱࢥ͏ɻ • AMPΛ͍͍ͨຊ࣭తͳతԿཱ͔ͪฦΔɻAMPͱSEOతͳؔੑͳ ͍ɻWebϖʔδ͕ߴʹ͍ͨ͠ͳΒɺύϑΥʔϚϯεόδΣοτlighthouse CI ΛͬͨύϑΥʔϚϯε୲อͰ͍͍͔͠Εͳ͍ɻ • GCP, GA ͳͲͷڥΛͯ͢ Google ʹऔΓғ·Εͨঢ়ଶͰ࡞ΕͯɺAMP cache ͷԸܙ͕ϑϧʹड͚ΒΕΔڥԼʹ͋ΔͳΒ͍͍ͬͯɻ
·ͱΊ • AMP Google ͷ Web ϖʔδߴԽͷͨΊͷఏҊ • Full
AMP Ͱ։ൃΛߦ͏ࡍͷ Tips Λগ͠հ • AMP ʹ͢Δ͖͔Ͳ͏͔αʔϏεঢ়گ࣍ୈ • ͨͩɺΈΜͳͰͬͯෆຬΛFB͠ɺΤίγεςϜΛ վળ͠ଓ͚͍ͯ͘͜ͱͰະདྷ໌Δ͘ͳ͍ͬͯ͘
ΈΜͳ AMP ͬͯ͜͏ͳʂʂʂ @ka2jun8