制約と誓約

੍໿ͱ੤໿ Մࣇ ५໵ @ka2jun8 2019/10/29 Nihonbashi.js ձ৔ఏڙLT

ࣗݾ঺հ ## Մࣇ ५໵ʢKani Junyaʣ  - twitterɿ @ka2jun8 ### ܦྺͱॴଐ 
- 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ  - 2018೥4݄ த్ 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 ϖʔδʹ conﬁg Λ 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

制約と誓約

制約と誓約

Junya

More Decks by Junya

Other Decks in Programming

Featured

Transcript

੍໿ͱ੤໿ Մࣇ ५໵ @ka2jun8 2019/10/29 Nihonbashi.js ձ৔ఏڙLT

ࣗݾ঺հ ## Մࣇ ५໵ʢKani Junyaʣ  - twitterɿ @ka2jun8 ### ܦྺͱॴଐ

ࡢ೔ͷ͓ன͝ΖͷSlack

ಥવͷLT

্࢘ʹԿͰ΋࿩͍͍ͯ͠ͱݴ ΘΕͨͷͰ

AMP ͷ࿩Λ͠·͢

ࠓ͔Β࿩͢ͷ͸શ෦ ྫ͑͹ ͷ࿩Ͱ͢

Α͠ʂ৽نͰ B to C ͷ  WebαʔϏεΛ։ൃΛ͢Δͧ SEO SEO SEO SEO

͓Ε͕ࢥ͏ݱ୅࠷ڧͷ෍ਞ • AMP • React • next.js • typescript •

• 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ϖʔδΛදࣔՄೳʹ͢Δɻ

AMP ͷ։ൃύλʔϯ • Hybrid AMP • Full AMP ( AMP

hybrid ? 8FCϖʔδ ".1ϖʔδ canonical User

Hybrid AMP • ͍͍ͱ͜Ζ  ˠ AMP valid ͳϖʔδΛผʹ༻ҙ͢ΔͨΊɺແཧʹAMP ίϯϙʔωϯτΛۦ࢖ͯ͠ػೳΛ࡞ΓࠐΉඞཁ͸ͳ͍ •

Full AMP ".1POMZ User

Full AMP • ͍͍ͱ͜Ζ  ˠ ೋॏ։ൃͷඞཁ͕ͳ͍ • ΘΔ͍ͱ͜Ζ  ˠ AMP

ϦϦʔε·Ͱͷεϐʔυ༏ઌ ೋॏ։ൃ͸ͤͣʹ Full AMP Ͱ͍͘

߈Ίͷ࢟੎ • Full AMP • React • next.js • typescript

next.js + AMP • pages/${hoge}.tsx ϖʔδʹ conﬁg Λ export ͢Δ͚ͩ

AMP + next.js + styled-components https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js _document.tsx Ͱ SSR ࣌ʹ

ͳͷͰAMPԽ͸ָউ

ͱ͸͍͔ͳ͍

ͭ·ͬͨͱ͜ΖΛڞ༗

ܕ͕ͳ͍ • Typescript + react Ͱ΍ΔͳΒࣗ෼Ͱܕ Λॻ͘ඞཁ͕͋Δ ɾ ɾ ɾ

Styled-components ͱ૬ੑ͕ѱ͍ • styled.div`` ͷΑ͏ͳϊϦͰɺ  styled[“amp-img”]`` ͕Ͱ͖ͳ͍ɻ • ӈͷ AmpImg

Styled-components ͱ૬ੑ͕ѱ͍2 • AMP ͸ [class] (data-amp-bind-class) ͱ͍͏ଐੑΛ࣋ͨͤ Δ͜ͱ͕Ͱ͖Δɻ <div

AMP analytics / GTM ͕… • Adobe analytics ͷಈ࡞͕ෆ҆ఆ •

ͦͷ΄͔ʹ΋ • ϦϦʔε͞Εͳ͍ͱ࣮ࡍͷޮՌ͸Θ͔ΒͣɺAMPʹ͔ͨ͠Βͱ͍ͬͯSEO͕ྑ͘ͳΔอূ͕͋ΔΘ ͚Ͱ͸ͳ͍ɻ • จࣈྻϕʔεͰAMPಠࣗͷଐੑ஋΍onΠϕϯτͷεΫϦϓτΛهड़͢ΔͷͭΒEɻ • amp-sidebar Ͱ iOS

AMP Λ࢖ͬͯ։ൃ͢΂͖͔ʁ • ͋Δఔ౓େن໛ͳاۀͷαʔϏε։ൃΛߦ͏࣮ੈքͰ͸ Full AMP ͸ݫ͍͠ɻ • ҰํɺAMPࣗ਎΍ next.js

·ͱΊ • AMP ͸ Google ͷ Web ϖʔδߴ଎ԽͷͨΊͷఏҊ • Full

ΈΜͳ AMP ࢖ͬͯ͜͏ͳʂʂʂ @ka2jun8