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
460
Other Decks in Programming
See All in Programming
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
naoya
16
3.9k
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
akihisaikeda
1
170
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
gotok365
3
2.8k
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
370
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
vivion
0
250
What's New in Android 2026
veronikapj
0
250
生成AIで帳票OCRが「簡単に」作れる時代になった？
kon_shou
0
600
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
550
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
thasu0123
0
220
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
210
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
730
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.6k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
76
5.3k
WENDY [Excerpt]
tessaabrams
11
39k
Accessibility Awareness
sabderemane
1
170
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
45k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
370
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.9k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
250
sira's awesome portfolio website redesign presentation
elsirapls
0
320
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
ラッコキーワード サービス紹介資料
rakko
1
4.3M
Raft: Consensus for Rubyists
vanstee
141
7.6k
Bash Introduction
62gerente
615
220k
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
naoya
akihisaikeda
gotok365
eitsupi
vivion
veronikapj
kon_shou
ivargrimstad
thasu0123
kanaru0928
tomohisa
gotalab555
jonyablonski
tessaabrams
sabderemane
rkaga
tamaranovitovic
bcantrill
stephenakadiri
elsirapls
panda_program
rakko
vanstee
62gerente
![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}
