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.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
RTSPクライアントを自作してみた話
simotin13
0
560
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
kuranuki
1
750
New "Type" system on PicoRuby
pocke
1
830
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
ternbusty
1
160
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
120
OSもどきOS
arkw
0
510
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
handlename
0
780
Swiftのレキシカルスコープ管理
kntkymt
0
220
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
akiomatic
0
130
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
200
AIとASP.NET Coreで雑Webアプリを作った話
mayuki
0
500
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
j_lee
0
110
Featured
See All Featured
Skip the Path - Find Your Career Trail
mkilby
1
140
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
For a Future-Friendly Web
brad_frost
183
10k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
450
Six Lessons from altMBA
skipperchong
29
4.3k
Odyssey Design
rkendrick25
PRO
2
690
Utilizing Notion as your number one productivity tool
mfonobong
4
320
Everyday Curiosity
cassininazir
0
230
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
250
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
380
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
simotin13
kuranuki
pocke
ternbusty
kishida
arkw
handlename
kntkymt
akiomatic
matsuo_atsushi
mayuki
j_lee
mkilby
eileencodes
brad_frost
aleyda
konakalab
skipperchong
rkendrick25
mfonobong
cassininazir
danielanewman
427marketing
katarinadahlin
![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}
