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
制約と誓約
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Junya
October 29, 2019
Programming
3.2k
6
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
制約と誓約
Junya
October 29, 2019
More Decks by Junya
See All by Junya
AMP キャッシュを超えるシステムを自社ドメインで実現する方法 / How to implement a system that goes beyond amp-caching on your domain
ka2jun8
3
3.1k
SEO のためにエンジニアができること
ka2jun8
2
1.4k
Chrome Dev Summit 2019振り返り
ka2jun8
0
400
エンジニアになろう
ka2jun8
0
460
Other Decks in Programming
See All in Programming
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
260
スマートグラスで並列バイブコーディング
hyshu
0
250
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
nrslib
0
290
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
ming_ayami
0
130
OSもどきOS
arkw
0
580
さぁV100、メモリをお食べ・・・
nilpe
0
150
Make SRE Operations Easier with Azure SRE Agent
kkamegawa
0
7.3k
A2UI という光を覗いてみる
satohjohn
1
140
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
270
The ROI of Quarkus for Spring Boot Applications
hollycummins
0
130
ふつうのFeature Flag実践入門
irof
8
4.1k
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
210
Featured
See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
250
Prompt Engineering for Job Search
mfonobong
0
350
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Git: the NoSQL Database
bkeepers
PRO
432
67k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
230
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
180
The agentic SEO stack - context over prompts
schlessera
0
820
A Soul's Torment
seathinner
6
3k
My Coaching Mixtape
mlcsv
0
150
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2k
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
ka2jun8
o0h
hyshu
nrslib
ming_ayami
arkw
nilpe
kkamegawa
satohjohn
k1mu21
hollycummins
irof
oniak3ibm
nikkihalliwell
mfonobong
codingconduct
madoxten
reverentgeek
bkeepers
pwiseman
tmiket
schlessera
seathinner
mlcsv
![Styled-components ͱ૬ੑ͕ѱ͍ • styled.div`` ͷΑ͏ͳϊϦͰɺ styled[“amp-img”]`` ͕Ͱ͖ͳ͍ɻ • ӈͷ AmpImg](https://files.speakerdeck.com/presentations/972646970a854e9c94903bc9ded155db/slide_26.jpg){kind=link}
![Styled-components ͱ૬ੑ͕ѱ͍2 • AMP [class] (data-amp-bind-class) ͱ͍͏ଐੑΛ࣋ͨͤ Δ͜ͱ͕Ͱ͖Δɻ <div](https://files.speakerdeck.com/presentations/972646970a854e9c94903bc9ded155db/slide_27.jpg){kind=link}
