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
Junya
October 29, 2019
Programming
3.3k
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.2k
SEO のためにエンジニアができること
ka2jun8
2
1.4k
Chrome Dev Summit 2019振り返り
ka2jun8
0
400
エンジニアになろう
ka2jun8
0
470
Other Decks in Programming
See All in Programming
React本体のコードリーディング
high_g_engineer
1
160
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
hond0413
0
270
T3DD26: From RAGs to Riches
martinhelmich
0
120
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
220
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
3l4l5
2
260
in-process GraphQL のすすめ #ginzajs
izumin5210
4
1.5k
typoなんかねぇよ
raspython3
0
620
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
mfunaki
0
550
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
contour_gara
0
680
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
shorty5121
0
230
初めての模倣学習とVLA
natsutan
0
330
Pythonの実行はどこまで賢くなったのか？ CPythonとPyPyから見る最適化のしくみ
curekoshimizu
4
2.3k
Featured
See All Featured
HDC tutorial
michielstock
2
830
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
450
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
350
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
590
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
430
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
1
390
Are puppies a ranking factor?
jonoalderson
2
3.8k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
750
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Claude Code のすすめ
schroneko
67
230k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
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
high_g_engineer
%20(2)%20(1).png){kind=avatar}
hond0413
martinhelmich
pkshadeck
3l4l5
izumin5210
raspython3
mfunaki
contour_gara
shorty5121
natsutan
curekoshimizu
michielstock
reverentgeek
marktimemedia
techseoconnect
uxyall
jonoalderson
chikuwait
garrettdimon
schroneko
keavy
scottboms
![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}
