Slide 1
Slide 1 text
AMP ΩϟογϡΛ͑Δγες
ϜΛࣗࣾυϝΠϯͰ࣮ݱ͢Δํ๏
How to implement a system that goes beyond amp-
caching on your domain
Մࣇ ५ @ka2jun8
2021/11/27 JSConf JP 2021
Slide 2
Slide 2 text
ࣗݾհ
## @ka2jun8 / Juny / ͔ʹ
- Twitter: @ka2jun8
- GitHub: @ka2jun8
### ܦྺͱॴଐ
- 20144݄ ৽ଔ F ͔Β͡·ΔձࣾʢR&Dʣ
- 20184݄ גࣜձࣾϦΫϧʔτʢWeb FEʣ
### ͬͯΔ͜ͱ
ۀ: Web ϝσΟΞαʔϏεͷάϩʔε
ׂ: Web ։ൃνʔϜͷϦʔμʔ
࠷ۙ: େن FE ϦϓϨΠε͕ϗοττϐοΫ
্࢘ˢ
Slide 3
Slide 3 text
࠷ۙ AMP ͬͯͲ͏ͳͷʁ
Slide 4
Slide 4 text
όουχϡʔε͕ଓ͘…
•
https://www.suzukikenichi.com/blog/google-removes-amp-badge-from-search-results/
https://gigazine.net/news/20210519-google-amp-no-longer-preferential-treatment/
https://gigazine.net/news/20211108-google-amp-trust/
https://ameblo.jp/staff/entry-12709589996.html
Slide 5
Slide 5 text
AMP ͬͯ͏
Θͳ͍ํ͕͍͍…ʁ
Slide 6
Slide 6 text
AMP ͬͯ͏
Θͳ͍ํ͕͍͍…ʁ
࣮ࡍͲ͏ͳͷʁʂ
Slide 7
Slide 7 text
࣍
• AMP ͷྺ࢙ΛৼΓฦΔ
• AMP ΛֶͿ
• AMP ͷಋೖ
• AMP ಋೖͷৼΓฦΓ
• AMP ͷ͜Ε͔Β
Slide 8
Slide 8 text
AMP ͷྺ࢙ΛৼΓฦΔ
Slide 9
Slide 9 text
AMP ͱ
• ݩʑ Accelerated Mobile Pages ͷ಄จࣈ
• 2015 ʹొ (6લ!!!)
• WebαʔϏεͷύϑΥʔϚϯε্ͷͨΊͷGoogleओ
ಋͰఏڙ͞Ε͍ͯΔٕज़
https://ja.wikipedia.org/wiki/Accelerated_Mobile_Pages
https://www.suzukikenichi.com/blog/host-speci
fi
c-carousel-for-news/
Slide 10
Slide 10 text
AMP ͷಛ
• AMP ͷ੍
• JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ
• Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον
Slide 11
Slide 11 text
AMP ͳͥྲྀߦ͔ͬͨʁ
Slide 12
Slide 12 text
AMP ͷಛ
• AMP ͷ੍
• JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ
• Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον
Slide 13
Slide 13 text
AMP = SEO Ұ࣌ͷ౸དྷ
• AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰
• Google ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹతͳߴԽ
• ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ
ϥϯΫҐͷαΠτ
΄͛;͕΄͛;͕΄͛;͕΄͛;
͕΄͛;͕ʜ
Google ݕࡧ݁Ռ
".1هࣄ ".1هࣄ
Slide 14
Slide 14 text
AMP = SEO Ұ࣌ͷ౸དྷ
• AMP Ωϟογϡ ʹΑΔڧ͗͢Δ༏۰
• Google ݕࡧ݁Ռը໘ͷϓϦϑΣονʹΑΔѹతͳߴԽ
• ϖʔδϥϯΫΛແࢹͨ͠τοϓετʔϦʔͷΧϧʔηϧදࣔ
• AMP SEO ʹޮ͘ͱ͍͏͕ᷚՃతʹ·ͬͨ
• ։ൃ෦ॺͰͳ͘ϚʔέςΟϯά෦ॺ SEO ୲͔Β
ʮSEO ࢪࡦͱͯ͠ AMP Δͧʂʂʯͱ͍͏ଉר͍ͨཁ͕݅ग़Δ
Slide 15
Slide 15 text
ϋΠϒϦου AMP ʹΑΔಋೖ
• ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͍͠
• ϋΠϒϦου AMP ͷఏҊ
• ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ
Slide 16
Slide 16 text
ϋΠϒϦου AMP
AMP
ΧϊχΧϧ
ΦϦδφϧ
![]()
ͱͱͷ HTML ৽ͨʹ AMP HTML ΛผͰ༻ҙ
Slide 17
Slide 17 text
ϋΠϒϦου AMP ʹΑΔಋೖ
• ΦϦδφϧͷը໘Λ͍͖ͳΓ AMP Խ͢Δͷ͍͠
• ϋΠϒϦου AMP ͷఏҊ
• ಉ͡ը໘Λ AMP Խͯ͠ΧϊχΧϧϖʔδͰ༻ҙ͢Δ
• طଘͷγεςϜΛյ͢͜ͱͳ͘ AMP Խ͕Մೳ
• ݕࡧ݁Ռ͔Βͷ LP ͷΈ AMP ʹͰ͖Δ
• χϡʔε/ϒϩάهࣄܥ͕ͧͬͯ͜ϋΠϒϦου AMP Խ
Slide 18
Slide 18 text
ϋΠϒϦου AMP ͷฐ
• AMP ͷ੍ʹΑΓࣗ༝ʹ JS/CSS ͕ॻ͚ͳ͍
→ Ϧονͳ UI Λ֬อ͢Δͷ͕͍͠
ΦϦδφϧͱൺֱ࣭ͯ͠ૉͳ".1ϖʔδʹ
ྫɿݕࡧػೳͱ
ϙοϓΞοϓɺ
αΠυόʔ
ͳ͠
Slide 19
Slide 19 text
AMP ʹΑΔݕࡧ݁ՌͷԚછ
• େྔͷ࣭ૉͳ AMP ϖʔδ͕ݕࡧ݁ՌΛԚછ
͜Εʹର͠ Google ….
".1εΫϦϓτͷొ
".1ίϯϙʔωϯτͷߋͳΔϦονԽ
Slide 20
Slide 20 text
AMP Ωϟογϡͷహ
• AMP εΫϦϓτʹରԠͤ͞Δ όά͕૿Ճ
• ͦͦ AMP ͦͷͷ͕όά͍ͬͯΔ ͜ͱ
• ϋΠϒϦου AMP 2 ഒͷӡ༻͕͔͔Δ
• AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔੳ͕Ͱ͖ͳ͍ (ޙड़)
• Google ͕ AMP ͷ ༏۰ΛΊΔ ͱݴ͍ग़͢ (࠷ۙ)
Slide 21
Slide 21 text
AMP Ωϟογϡͷహ
• AMP εΫϦϓτʹରԠͤ͞Δ όά͕૿Ճ
• ͦͦ AMP ͦͷͷ͕όά͍ͬͯΔ ͜ͱ
• ϋΠϒϦου AMP 2 ഒͷӡ༻͕͔͔Δ
• AMP Ωϟογϡ ʹͷͤΔͱϢʔβʔੳ͕Ͱ͖ͳ͍ (ޙड़)
• Google ͕ AMP ͷ ༏۰ΛΊΔ ͱݴ͍ग़͢ (࠷ۙ)
".1Ί͍ͨʜ
Slide 22
Slide 22 text
͜Ε͕ AMP ͷ
͓͓ΑͦͷੈؒͷΠϝʔδ
Slide 23
Slide 23 text
AMP ͷ͜ͱΛ
ͳ͔ͬͨ͜ͱʹ͢Δͷ
͍ͬͨͳ͍ʂʂ
Slide 24
Slide 24 text
AMP ΛֶͿ
Slide 25
Slide 25 text
AMP ΛֶͿ
• AMP ͷతΛֶͿ
• AMP ͷٕज़ΛֶͿ
Slide 26
Slide 26 text
AMP ͷతΛֶͿ
Slide 27
Slide 27 text
AMP ͷಛ (࠶ܝ)
• AMP ͷ੍
• JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ
• Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον
Slide 28
Slide 28 text
AMP ͷಛ (࠶ܝ)
• AMP ͷ੍
• JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ
• Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον
Slide 29
Slide 29 text
AMP ͷ੍ͱʁ
• ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍
• CSS 75KB ҎԼʹ͠ͳ͚ΕͳΒͳ͍
• ੳ/ࠂλάڐ༰͞ΕͨͷҎ֎ར༻ෆՄೳ ͳͲͳͲ…
੍ΛΫϦΞͨ͠Β".1ΩϟογϡʹͷΔ
Slide 30
Slide 30 text
AMP ͷతͬͯ
AMP Ωϟογϡʹ
ͷͤΔ͜ͱ͚ͩͬʁʁʁ
Slide 31
Slide 31 text
AMP ͷతͬͯ
AMP Ωϟογϡʹ
ͷͤΔ͜ͱ͚ͩͬʁʁʁ
/0
Slide 32
Slide 32 text
AMP ͷຊདྷͷత
Web ͱ͍͏ϓϥοτϑΥʔϜશମͷߴԽ
https://developers-jp.googleblog.com/2018/03/standardizing-lessons-learned-from-amp.html
Slide 33
Slide 33 text
AMP ͷత
• AMP ͷ੍
• JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ
• Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον
͋͘·Ͱ
͓·͚
ෆཁͳίʔυ ༷
Λ
ؚ·ͤͳ͍
Slide 34
Slide 34 text
AMP ͷత
• AMP ͷ੍
• JavaScript / CSS ͷ੍ݶ
• AMP Ωϟογϡ
• Google ݕࡧ݁Ռը໘ͰͷϓϦϑΣον
ߴͳΣϒϖʔδ͕࡞ΕΔ͜ͱ
͋͘·Ͱ
͓·͚
ෆཁͳίʔυ ༷
Λ
ؚ·ͤͳ͍
Slide 35
Slide 35 text
AMP ͷٕज़ΛֶͿ
Slide 36
Slide 36 text
Web αΠτΛӾཡ͢Δ·Ͱ
ϒϥβ
ΦϦδϯ
(PPHMFCPU
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄΠϯσοΫε
ᶅΦϦδϯΞΫηε
Slide 37
Slide 37 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
(PPHMF
ݕࡧ݁Ռ
AMP Valid
Slide 38
Slide 38 text
AMP Valid
AMP
AMP Valid
AMP Invalid
![]()
͜Ε·Ͱ௨Γͷ HTML ੍ΛΫϦΞͨ͠ AMP HTML
Slide 39
Slide 39 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
(PPHMF
ݕࡧ݁Ռ
Slide 40
Slide 40 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
Slide 41
Slide 41 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
".1
όϦσʔλʔ
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
Slide 42
Slide 42 text
AMP όϦσʔλʔ
• AMP ͷ੍ΛΫϦΞ͍ͯ͠Δ͔֬ೝ
• ύϑΥʔϚϯεόδΣοτ
• JavaScript ར༻ېࢭ / CSS 75KB ҎԼ
• ϨΠΞτ่Εͷةݥੑճආ
• ༷ʑͳܗࣜͰఏڙ͞Ε͍ͯΔ
• Web App, Chrome Extension, CLI etc.
https://validator.ampproject.org/
ߴͳঢ়ଶΛҡ࣋͠ଓ͚ΔͨΊ
ʹ Web ϦιʔεͷαΠζͷ༧ࢉ
ཧΛߦ͍ɺύϑΥʔϚϯεੑೳ
ΛҰఆʹอͪଓ͚ΔࢼΈ
https://developers-jp.googleblog.com/2019/03/blog-post_15.html
Google Developers Blog ͰͷύϑΥʔϚϯεόδΣοτհهࣄ AMP όϦσʔλʔͷ Web App
Slide 43
Slide 43 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
".1
όϦσʔλʔ
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
AMP Valid❤
Slide 44
Slide 44 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
".1
όϦσʔλʔ
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶅΩϟογϡอ 483
AMP
Slide 45
Slide 45 text
Ωϟογϡઓུ SWR
• AMP Ωϟογϡ CDN తͳׂΛແྉͰఏڙͯ͘͠ΕΔ
• Stale-While-Revalidate (SWR) ϞσϧͷΩϟογϡߋ৽
• Ϣʔβʔ͔ΒͷΩϟογϡΞΫηεͷͨͼʹίϯςϯπ͕࠷৽Ͱ͋Δ͔֬ೝ͢Δ
• ϢʔβʔʹʢΩϟογϡ͕࠷৽Ͱͳͯ͘ʣΩϟογϡΛฦ͢
• ίϯςϯπ͕ݹ͔ͬͨΒΦϦδϯαʔόʔʹίϯςϯπͷߋ৽Λ֬ೝͯ͠ΩϟογϡΛ࠷৽Խ͢Δ
• Ϣʔβʔ͕ΞΫηεͯ͘͠ΕΔϖʔδߋ৽ස͕ߴ͘ͳΔ
https://blog.jxck.io/entries/2016-04-16/stale-while-revalidate.html
Stale-While-Revalidate ϔομʹΑΔϒϥβΩϟογϡͷඇಉظߋ৽ - blog.jxck.io
Slide 46
Slide 46 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
".1
όϦσʔλʔ
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶅΩϟογϡอ 483
AMP
Slide 47
Slide 47 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
AMP
".1
όϦσʔλʔ
".1
ΦϓςΟϚΠβʔ
AMP
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶆ)5.-࠷దԽ
ᶅΩϟογϡอ 483
Slide 48
Slide 48 text
AMP ΦϓςΟϚΠβʔ
• AMP valid ͳঢ়ଶͷ HTML ͚ͩͰ·ͩ࠷దԽ͕Γͳ͍
• AMP ΩϟογϡʹͷΔλΠϛϯάͰ͞Βʹ࠷దԽ͞ΕΔ
ɹɹྫ:
• AMPίϯϙʔωϯτͷαʔόʔαΠυϨϯμϦϯά(AMP SSR)
→ϨΠΞτΛࣄલܭࢉʹΑΓσόΠεͰͷॲཧෛՙΛܰݮ
• ώʔϩʔը૾ͷϓϦϩʔυ
→༏ઌతʹϩʔυ͢ΔͷͰॳظද͕ࣔ͘ͳΔ
• ෆཁίʔυͷআɺϑΥϯτ࠷దԽ and more…
→ϕετϓϥΫςΟε͕͍Ζ͍ΖೖͬͯΔ
AMP
".1
ΦϓςΟϚΠβʔ
AMP
ৄղ AMP Optimizer - Qiita
https://qiita.com/sangotaro/items/a85da91164860bd679af
Slide 49
Slide 49 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
AMP
".1
όϦσʔλʔ
".1
ΦϓςΟϚΠβʔ
AMP
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶆ)5.-࠷దԽ
ᶅΩϟογϡอ 483
Slide 50
Slide 50 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
AMP
".1
όϦσʔλʔ
".1
ΦϓςΟϚΠβʔ
AMP
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶆ)5.-࠷దԽ
ᶅΩϟογϡอ 483
Slide 51
Slide 51 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
AMP
".1
όϦσʔλʔ
".1
ΦϓςΟϚΠβʔ
AMP
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶆ)5.-࠷దԽ
ᶇϦιʔεϓϦϑΣον
ᶅΩϟογϡอ 483
Slide 52
Slide 52 text
AMP ϦιʔεϓϦϑΣον
• Google ͳͲͷݕࡧΤϯδϯͰϓϦϑΣον͞ΕΔ
• ݕࡧ݁ՌΛ։͍ͨ࣌Ͱɺ͢ͰʹભҠઌͷ HTML Λ DL
• ΦϦδϯʹΞΫηε͢Δ͜ͱͳ͘ϖʔδΛӾཡͰ͖Δ
→ ेϛϦඵͰભҠ͕ՄೳʹͳΔͷͰΊͪΌͪ͘Ό͍
AMP ϖʔδͷΩϟογϡͷΈ - amp.dev
https://amp.dev/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/
Slide 53
Slide 53 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
AMP
".1
όϦσʔλʔ
".1
ΦϓςΟϚΠβʔ
AMP
(PPHMF
ݕࡧ݁Ռ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶆ)5.-࠷దԽ
ᶇϦιʔεϓϦϑΣον
ᶅΩϟογϡอ 483
Slide 54
Slide 54 text
AMP શମ૾
ϒϥβ
ΦϦδϯ
".1Ωϟογϡ
(PPHMFCPU
AMP
AMP
".1
όϦσʔλʔ
".1
ΦϓςΟϚΠβʔ
AMP
(PPHMF
ݕࡧ݁Ռ
AMP
".1
ίϯϙʔωϯτ
ᶃΫϩʔϦϯά
ᶄ7BMJEJUZ֬ೝ
ᶆ)5.-࠷దԽ
ᶇϦιʔεϓϦϑΣον
ᶅΩϟογϡอ 483
ᶈ".1$43
Slide 55
Slide 55 text
AMP ίϯϙʔωϯτ
• JSαΠζɺ࣮ߦύϑΥʔϚϯεɺΞΫηγϏϦςΟɺCWV Λߟྀ
ͲΜͳ։ൃऀͰ Web ϕετϓϥΫςΟεΛڗडͰ͖Δ
https://amp.dev/ja/documentation/components/amp-img/
ྫ: amp-img Web ʹਫ਼௨͕ͨࣝ͠ͳ͍։ൃऀͰ IE / Safari Ͱ
ɹ lazy load ͕͑ΔΑ͏ʹͳ͍ͬͯΔ͠ɺCLS ൃੜ͠ͳ͍Α͏ʹͳ͍ͬͯΔ
Slide 56
Slide 56 text
AMP ͷ͓͞Β͍
• AMP ͷతΛֶͿ
→ Web શମͷߴԽ͕త
• AMP ͷٕज़ΛֶͿ
→ Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ
Slide 57
Slide 57 text
AMP ͷ͓͞Β͍
• AMP ͷతΛֶͿ
→ Web શମͷߴԽ͕త
• AMP ͷٕज़ΛֶͿ
→ Web ϕετϓϥΫςΟεͷ٧Ί߹Θͤ
ར༻͢ΔϝϦοτ͋Γͦ͏
Slide 58
Slide 58 text
AMP ͷಋೖ
Slide 59
Slide 59 text
ϦΫϧʔτͱ
AMP Ωϟογϡ
Slide 60
Slide 60 text
υϝΠϯ͕ Google ʹͳΔ
• AMP Ωϟογϡ Google ͔Β৴͞ΕΔͷͰυϝΠϯ͕ Google ʹ
• ܭଌλάΛΈࠐΜͩࡍʹ Cookie ͕ Third Party ѻ͍
• ITP2 ܥͷฐ
• iOS Ϣʔβʔͷ࠶๚͕ܭଌͰ͖ͳ͍
ैདྷͷϚʔέςΟϯά͕Ͱ͖ͳ͍
Slide 61
Slide 61 text
AMP ΩϟογϡʹͷͤΒΕͳ͍
Slide 62
Slide 62 text
AMP ͷ࠶࣮
Slide 63
Slide 63 text
AMP Λ࠶࣮͢Δ
Slide 64
Slide 64 text
AMP Λ࠶࣮͢Δ
શ෦ͯ͢·ΔͬͱεϦͬͱΰϦͬͱ
ΤϒϦγϯά࠶࣮ͩʂʂ
Slide 65
Slide 65 text
Next.js
https://github.com/vercel/next.js
Slide 66
Slide 66 text
Next.js ͷ AMP ରԠ
• Next.js 1ߦՃ͢Δ͚ͩͰ AMP Խ͕Մೳ
• Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ
→ ։ൃ͠ͳ͕Β੍ҧΛ֬ೝͰ͖Δ
• Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ
→ AMP Ωϟογϡ૬ͷ࠷దԽ͕Ϗϧυ࣌ʹߦΘΕΔ
export const config = { amp: true };
Slide 67
Slide 67 text
Next.js Ͱͷ AMP Invalid Խ
• AMP Ωϟογϡʹͷͤͳ͍ͨΊʹ AMP Invalid Խ͢Δඞཁ
• _document.tsx Ͱ؆қʹ AMP Invalid Խ͕Մೳ
import { Html } from "next/document";
render() {
return (
{children}
);
}
Ϗϧυ݁Ռ Ϗϧυ݁Ռ
// import { Html } from "next/document";
render() {
return (
{children}
);
}
Slide 68
Slide 68 text
Next.js ͷ AMP όϦσʔλʔ
• Ϗϧυ࣌ʹ AMP όϦσʔλʔ͕ಈ࡞͢Δ
• AMP όϦσʔλʔ AMP Valid ͔Ͳ͏͔Λ֬ೝ͢Δͷ
• ͔͠͠ ࣮ AMP όϦσʔλʔΧελϜͰ͖Δ
→ AMP Invalid Ͱ AMP ૬ͷ੍Λ֬ೝ͢ΔͨΊʹ͑Δ
• next.con
fi
g.jsͰΧελϜϏϧυͨ͠ AMPόϦσʔλʔΛࢦఆ
experimental: {
amp: {
validator: “./custom_validator.js"
}
}
https://github.com/vercel/next.js/blob/canary/docs/advanced-features/amp-support/amp-validation.md
https://github.com/vercel/next.js/tree/canary/test/integration/amphtml-custom-validator
Next.js Ͱ amp-validator ͷΧελϜʹ͍ͭͯͷهड़Օॴ
Slide 69
Slide 69 text
Next.js ͷ AMP ΦϓςΟϚΠβʔ
• Ϗϧυ࣌ʹ AMP ΦϓςΟϚΠβʔ͕ಈ࡞͢Δ
• ຊདྷ AMP Ωϟογϡ্Ͱ AMP ΦϓςΟϚΠβʔಈ࡞͢Δ
• ͜ΕʹΑΓԾʹ AMP Ωϟογϡʹͷͤͳͯ͘
࠷దԽ͞Εͨ HTML ΛαʔϒͰ͖Δ
• Ϗϧυ͕͍࣌ؒͷͰྲྀೖαΠτճ༡Ͱ TTFB ͕͘ͳΔ
• AMP Ωϟογϡ / Vercel ΩϟογϡʹͷΔ͜ͱ͕લఏͳͷͰɺ
ΦϯσϚϯυʹ SSR ͞ΕΔఆͰ࡞ΒΕ͍ͯͳ͍
React AMP AMP
SSR SSR
React
AMP
Optimizer
(40msʙ) (250msʙ)
https://engineer.recruit-lifestyle.co.jp/techblog/2020-09-11-perf-optim/
Slide 70
Slide 70 text
AMP Λ࠶࣮͢Δ
Slide 71
Slide 71 text
Next.js Ͱ AMP πʔϧΛ͏
AMP πʔϧͷར༻ Next.js ͰΧόʔ
Slide 72
Slide 72 text
AMP ࠶࣮ʹΔ՝
SSR͍
Slide 73
Slide 73 text
AMP ΩϟογϡΛ࠶࣮
• Ωϟογϡઓུ (SWR)
• ΫϩʔϦϯά
• ϦιʔεϓϦϑΣον
Slide 74
Slide 74 text
Ωϟογϡઓུ(SWR)
• AMP ͷ SSR ͍ͷͰຖճ SSR ͨ͘͠ͳ͍
• Stale-While-Revalidate ͰΩϟογϡΛ
ߋ৽͍ͨ͠
Γ͍ͨ͜ͱ
→ SWR ʹରԠ͍ͯ͠Δ CDN ͷಋೖ
Slide 75
Slide 75 text
Ωϟογϡઓུ(SWR)
• CDN (Fastly) ͷಋೖ
• Stale-While-Revalidate ʹରԠ͍ͯ͠Δ
• ͞Βʹ Ωϟογϡώοτ ͕ߴ͍
• ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢
ͬͨ͜ͱ
Ұ୭͔͕ΞΫηεͯ͘͠ΕΕߴ৴Մೳʹ
https://docs.fastly.com/ja/guides/shielding
Slide 76
Slide 76 text
Ωϟογϡઓུ(SWR)
• CDN (Fastly) ͷಋೖ
• Stale-While-Revalidate ʹରԠ͍ͯ͠Δ
• ͞Βʹ Ωϟογϡώοτ ͕ߴ͍
• ΦϦδϯγʔϧυ: ಛఆͷΤοδΛඞͣ௨͢
ͬͨ͜ͱ
Ұ୭͔͕ΞΫηεͯ͘͠ΕΕߴ৴Մೳʹ
https://docs.fastly.com/ja/guides/shielding
Ͱ·ͩॳճ๚͍…
Slide 77
Slide 77 text
ΫϩʔϦϯά
• ৗʹΩϟογϡ͕ଘࡏ͠࠷৽Խ͍ͨ͠
• AMP Ωϟογϡͷ߹
• Google ͷ AMP ༻ bot ͕Ϋϩʔϧͯ͠ϖʔδΛΠϯσοΫε
• ΠϯσοΫε͞Εͨϖʔδ͕શͯ AMP ΩϟογϡʹͷΔ
• ΦϦδϯΛ Google AMP bot ͕ͤͬͤͱຖΫϩʔϧͯ͘͠ΕΔ
• ཪΛฦͤɺ Google AMP bot ͕ΩϟογϡΛ͋ͨͨΊͯ͘Ε͍ͯΔ
Γ͍ͨ͜ͱ
→ ΩϟογϡΛ͋ͨͨΊͯ͘ΕΔ͕ͭ΄͍͠
Slide 78
Slide 78 text
ΫϩʔϦϯά
• ΩϟογϡΥʔϚʔͷ࣮
• ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ
• ରͷϖʔδΛߜͬͯޮతʹࣗαΠτʹΞΫηε
• αʔνίϯιʔϧ API ͰΞΫηεͷଟ͍ϖʔδ
• αΠτϚοϓͰ͕ࣗͨͪ৴͍ͨ͠ϖʔδ
ͬͨ͜ͱ
Googlebot Ϣʔβʔ͔Βͷ
ॳճΞΫηεߴ৴Մೳʹ
Slide 79
Slide 79 text
ΫϩʔϦϯά
• ΩϟογϡΥʔϚʔͷ࣮
• ΩϟογϡΛৗʹ࠷৽Խ͢ΔΫϩʔϦϯάπʔϧ
• ରͷϖʔδΛߜͬͯޮతʹࣗαΠτʹΞΫηε
• αʔνίϯιʔϧ API ͰΞΫηεͷଟ͍ϖʔδ
• αΠτϚοϓͰ͕ࣗͨͪ৴͍ͨ͠ϖʔδ
ͬͨ͜ͱ
Googlebot Ϣʔβʔ͔Βͷ
ॳճΞΫηεߴ৴Մೳʹ
Ͱ·ͩ AMP Ωϟογϡͷ࠷େͷಛ͕…
Slide 80
Slide 80 text
ϦιʔεϓϦϑΣον
• CDN ͱΩϟογϡΥʔϚʔͰ͍ͩͿૣ͘ͳ͕ͬͨ…
• Ϣʔβʔ͕ݕࡧ݁Ռը໘ʹདྷͨஈ֊ͰϦιʔεΛϓ
ϦϑΣον͍ͤͨ͞
• υϝΠϯࣗࣾυϝΠϯͷ··ʹ͍ͨ͠
Γ͍ͨ͜ͱ
→ ݕࡧ݁Ռը໘ͰϓϦϑΣον͍ͨ͠ʂʂ
Slide 81
Slide 81 text
ϦιʔεϓϦϑΣον
Chrome ϒϥβͰ͋Ε
ݕࡧ݁Ռը໘͔ΒͷϓϦϑΣον ͕Մೳʹ
https://developers.google.com/search/docs/advanced/experience/signed-exchange?hl=ja
AMP ·ͨඇ AMP ΛΘͣΣϒαΠτ͕ SXG ʹରԠ͍ͯ͠Δ
߹ɺGoogle ݕࡧͨ͠ͱ͖ʹฦ͞ΕΔɺؔ࿈͢Δ݁ՌͷओཁͳϦιʔ
εͷ͍͔ͭ͘ʢHTMLɺJavaScriptɺCSSɺը૾ɺϑΥϯτͳͲʣΛɺ
ϓϥΠόγʔʹྀͨ͠ܗͰϓϦϑΣονͰ͖·͢ɻ
• SXG ΩϟογϡΛ׆༻
ͬͨ͜ͱ
Slide 82
Slide 82 text
SXG Ωϟογϡͷ࣮
※2 https://github.com/google/webpackager
(PPHMFCPU
49(
8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
ᶃ SXG ͷϦΫΤετ
Web Packager Server Λ͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
※1 ྫ͑ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
ͬͨ͜ͱ
Slide 83
Slide 83 text
SXG Ωϟογϡͷ࣮
※2 https://github.com/google/webpackager
(PPHMFCPU
49(
8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
ᶃ SXG ͷϦΫΤετ
Web Packager Server Λ͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
※1 ྫ͑ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
ͬͨ͜ͱ
Slide 84
Slide 84 text
SXG Ωϟογϡͷ࣮
※2 https://github.com/google/webpackager
(PPHMFCPU
49(
8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
ᶄॺ໊͢ΔͨΊʹΦϦδϯͷίϯςϯπΛ DL
Web Packager Server Λ͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
※1 ྫ͑ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
ͬͨ͜ͱ
Slide 85
Slide 85 text
SXG Ωϟογϡͷ࣮
※2 https://github.com/google/webpackager
(PPHMFCPU
49(
8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
Web Packager Server Λ͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
※1 ྫ͑ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
ͬͨ͜ͱ
ᶅSXGͰॺ໊͢Δ
Slide 86
Slide 86 text
SXG Ωϟογϡͷ࣮
※2 https://github.com/google/webpackager
(PPHMFCPU
49(
8FC
1BDLBHFS
4FSWFS
˞
/HJOY
'BTUMZ
ΦϦδϯ
SXG ?
Web Packager Server Λ͍ Googlebot ͔ΒͷಛఆͷϦΫΤετ
ʹର͠ SXG ͷॺ໊͖ͭίϯςϯπΛฦ͢
※1 ྫ͑ Accept header ʹ application/signed-exchange;v=b3,*/*;q=0.1 ͕͋ΔϦΫΤετ
ͬͨ͜ͱ
ᶆSXGॺ໊͖ͭίϯςϯπΛฦ͢
Slide 87
Slide 87 text
SXG Ωϟογϡ
ϝϦοτ
AMP Ωϟογϡͱ
ಉͷޮՌΛ
ಘΔ͜ͱ͕Մೳ
σϝϦοτ
SXG ূ໌ॻ͓͕͔͔ۚΔ
ӡ༻ίετ͕ߴ͍
iPhone Ϣʔβʔର֎
ͬͨ͜ͱ
Slide 88
Slide 88 text
AMP Λ࠶࣮͢Δ
Next.js
ΩϟογϡΥʔϚʔ
fastly
SXG Ωϟογϡ
Next.js
Next.js
Slide 89
Slide 89 text
݁Ռ
• Ұྫͷհ
• CWV ΦʔϧάϦʔϯ ྑ URL 99.7%
• 15 ສϖʔδͷΦʔϧάϦʔϯΛୡ
• ݕࡧ݁Ռ͔ΒͷભҠ࣌
• SXG ΩϟογϡʹΑΔϦιʔε DL
• ίϯςϯπDL 5 ʙ 20 ϛϦඵ
• ΦϦδϯͷυϝΠϯͷΞΫηε(ྲྀೖ/ճ༡࣌/iPhone)
• CDN ͔ΒͷϨεϙϯε(PSI ʹΑΔϑΟʔϧυσʔλ)
• FCP 0.8 ʙ 1.1 ඵ
• ϢʔβʔώΞϦϯάͰʮද͕͍ࣔʯͱ͍͏͕ଟ
※1 ϦϦʔεޙҊ݅ىҊ 100 ݅ఔͷػೳΤϯϋϯε࣮ޙ 11/24 ݱࡏ
※2 Google Search Console Σϒʹؔ͢Δओͳࢦඪʹͯܭଌ
https://pagespeed.web.dev/
※3 Android Chrome ͔ΒͷಛఆͷΠϯσοΫεϖʔδͷΈ
※4 ओཁͳϖʔδ10ը໘ʹͯ֬ೝ
※1
※2
※3
※4
Slide 90
Slide 90 text
AMP ಋೖͷৼΓฦΓ
Slide 91
Slide 91 text
Α͔ͬͨ͜ͱͱ՝
• ߴͳϖʔδΛ࡞Εͨ͜ͱ
• શһͰ༷ʹ͖߹͏จԽΛ࡞Εͨ͜ͱ
Α͔ͬͨ͜ͱ
՝
• ༷ͷڧ੍͍͕͋ͬͨ͜ͱ
Slide 92
Slide 92 text
Α͔ͬͨ͜ͱͱ՝
• ߴͳϖʔδΛ࡞Εͨ͜ͱ
• શһͰ༷ʹ͖߹͏จԽΛ࡞Εͨ͜ͱ
Α͔ͬͨ͜ͱ
՝
• ༷ͷڧ੍͍͕͋ͬͨ͜ͱ
Slide 93
Slide 93 text
࠶ܝ
Slide 94
Slide 94 text
AMP ͷ੍ʹ͍ͭͯཧ
• ҙͷ JavaScript ͕ར༻Ͱ͖ͳ͍
• CSS 75KB ҎԼʹ͠ͳ͚ΕͳΒͳ͍
• ੳ/ࠂλάڐ༰͞ΕͨͷҎ֎ར༻ෆՄೳ
→ AMP ίϯϙʔωϯτ͔͑͠ͳ͍
→ ࣗ༝ʹσβΠϯͷελΠϧΛ༩Ͱ͖ͳ͍
→ ͜Ε·Ͱͷੳ༻λάΛ͍·Θͤͳ͍
Slide 95
Slide 95 text
༷࣮ݱͷ͠͞ͷप
AMP Ͱɺ
ࣄۀతʹ࣮ݱ͍༷ͨ͠Λ
࣮ʹ࣮Ͱ͖ͳ͍͜ͱ͕͋Δ
69اըɾσβΠφʔɾ1.ʹप߹ҙ
Slide 96
Slide 96 text
༷
։ൃ
ϦϦʔε
UX ΰϦΰϦͳ
Γࢁͳ༷ͰΑΖʂ
࡞Δͷ͍͚͠Ͳɺ
༷ʹॻ͍ͯ͋Δ͔Β
͕Μͬͯ࡞Δͧʂ
͜Ε·Ͱ
Slide 97
Slide 97 text
༷
։ൃ
ϦϦʔε
(AMP Ͱ͜ͷ͘Β͍ͷॲཧ
Ͱ͖ͦ͏ͩͳ)
͏গ͠ϦονʹͰ͖·͢ʂ
͍·
(AMP͔ͩΒ UX γϯϓϧ
ʹ͠Α͏)
͜ͷ༷ͰͰ͖·͔͢ʁ
Slide 98
Slide 98 text
༷ΛΈΜͳͰ࡞ΔจԽ
Slide 99
Slide 99 text
Α͔ͬͨ͜ͱͱ՝
• ߴͳϖʔδΛ࡞Εͨ͜ͱ
• શһͰ༷ʹ͖߹͏จԽΛ࡞Εͨ͜ͱ
Α͔ͬͨ͜ͱ
՝
• ༷ͷڧ੍͍͕͋ͬͨ͜ͱ
Slide 100
Slide 100 text
༷࣮ݱͷ͠͞
AMP Ͱɺ
ࣄۀతʹ࣮ݱ͍༷ͨ͠Λ
࣮ʹ࣮Ͱ͖ͳ͍͜ͱ͕͋Δ
ఘΊ͟ΔΛಘͳ͍༷ଟ
Slide 101
Slide 101 text
ύϑΥʔϚϯε͕Α͚Ε
͍͍Μ͡Όͳ͍ͷʁ
Slide 102
Slide 102 text
ͳ༷ͥʹڧ੍͍͕͋Δͱ
ͩͱࢥ͔ͬͨʁ
Slide 103
Slide 103 text
8FCϝσΟΞ
• هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX
• Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ
• UX ༷͕γϯϓϧ
Web ϝσΟΞͱ AMP
Slide 104
Slide 104 text
8FCϝσΟΞ
• هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX
• Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ
• UX ༷͕γϯϓϧ
".1
Web ϝσΟΞͱ AMP
Slide 105
Slide 105 text
8FCΞϓϦ
8FCϝσΟΞ
• هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX
• Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ
• UX ༷͕γϯϓϧ
• ϢʔβʔΠϯλϥΫγϣϯ͕ଟͰߴ͍ UX
• ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ
• UX ༷͕ෳࡶ
".1
Web ΞϓϦͷొ
Web ͷଟ༷Խ
Slide 106
Slide 106 text
8FCΞϓϦ
8FCϝσΟΞ
• هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX
• Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ
• UX ༷͕γϯϓϧ
• ϢʔβʔΠϯλϥΫγϣϯ͕ଟͰߴ͍ UX
• ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ
• UX ༷͕ෳࡶ
".1
AMP Ͱ࡞Γ͖Εͳ͍ UX
3FBDU
Web ͷଟ༷Խ
Slide 107
Slide 107 text
8FCΞϓϦ
8FCϝσΟΞ
• هࣄͳͲͷӾཡػೳͰ࠷ݶͷ UX
• Ϣʔβʔʹ੩తͳใΛಧ͚Δ͜ͱ͕ॏཁ
• UX ༷͕γϯϓϧ
• ϢʔβʔΠϯλϥΫγϣϯ͕ଟͰߴ͍ UX
• ϢʔβʔʹΑΓྑ͍ମݧΛఏڙ͢Δ͜ͱ͕ॏཁ
• UX ༷͕ෳࡶ
".1
AMP Ͱ࡞Γ͖Εͳ͍ UX
3FBDU
UX ͷϢʔβʔχʔζͷߴ·Γ
Slide 108
Slide 108 text
ϑϩϯτΤϯυͷ༷ͷෳࡶԽ
• ༷͕ෳࡶʹͳΕͳΔ΄Ͳɺ
• ༷ͷ࣮ݱ͕͍͠
• ίʔυͷ࣭ͷ୲อ͕͍͠
• ύϑΥʔϚϯεͷ୲อ͕͍͠
Slide 109
Slide 109 text
ϑϩϯτΤϯυͷ༷ͷෳࡶԽ
• ༷͕ෳࡶʹͳΕͳΔ΄Ͳɺ
• ༷ͷ࣮ݱ͕͍͠
• ίʔυͷ࣭ͷ୲อ͕͍͠
• ύϑΥʔϚϯεͷ୲อ͕͍͠
༷ͷෳࡶੑͱٕज़తෛ࠴ͷτϨʔυΦϑ
Slide 110
Slide 110 text
༷ ύϑΥʔϚϯε
༷ͱύϑΥʔϚϯεͷτϨʔυΦϑ
Slide 111
Slide 111 text
༷ ύϑΥʔϚϯε
Web ΞϓϦͷొʹΑΓ่ΕΔۉߧ
Slide 112
Slide 112 text
Web ΞϓϦͷొʹΑΓ่ΕΔۉߧ
ύϑΥʔϚϯε
༷
💦
Slide 113
Slide 113 text
༷ ύϑΥʔϚϯε
AMP ͕ࢦͨ͠ੈք
Slide 114
Slide 114 text
γϯϓϧͳ69༷ ".1
ෳࡶͳ69༷ 3FBDU
UX ΛϦονʹ͍ͨ͠
Slide 115
Slide 115 text
γϯϓϧͳ69༷ ".1
ෳࡶͳ69༷ 3FBDU
".1੍ʹΑΔ͑ΒΕͳ͍น
Slide 116
Slide 116 text
༷ ύϑΥʔϚϯε
AMP ͷཧ
Slide 117
Slide 117 text
AMP ͷݱ࣮
༷
ύϑΥʔϚϯε
💦
Slide 118
Slide 118 text
AMP Λͬͯ
ύϑΥʔϚϯε্͕😄
Slide 119
Slide 119 text
AMP Λͬͯ
ύϑΥʔϚϯε্͕😄
ຊʹͦΕͰ͍͍ͷʁ
Slide 120
Slide 120 text
୭ͷͨΊͷύϑΥʔϚϯεʁ
Slide 121
Slide 121 text
ϢʔβʔͷͨΊͷ
ύϑΥʔϚϯε
Slide 122
Slide 122 text
Ϣʔβʔʹͱͬͯ
ඞཁͳ༷࡞Εͳ͍
Slide 123
Slide 123 text
Ϣʔβʔʹͱͬͯ
ඞཁͳ༷࡞Εͳ͍
ݩࢠͳ͍
Slide 124
Slide 124 text
༷ ύϑΥʔϚϯε
͋Δ͖࢟ʹͨ͢Ίʹʁ
Slide 125
Slide 125 text
ۉߧΛอͭͷ͕͍͜͠ͱΛप
༷ ύϑΥʔϚϯε
ύϑΥʔϚϯεόδΣοτ
69ཁ݅ͷՃ
༷ͷγϯϓϧԽ ػೳՃ
💦 💦
💦
💦
Slide 126
Slide 126 text
༷ ύϑΥʔϚϯε
ΈΜͳͰఱṝͷۉߧΛอͭ
ٕज़తͳௐ
༷ͷௐ
ۉߧΛอͭͨΊͷҙࣝΛશһͰ࣋ͭจԽ
Slide 127
Slide 127 text
AMP ͷ͜Ε͔Β
Slide 128
Slide 128 text
AMP ͬͨํ͕͍͍ͷʁ
Slide 129
Slide 129 text
ͷճ
ʮAMP Ͱ͋Δඞཁੑͳ͍ʯ
Slide 130
Slide 130 text
https://www.suzukikenichi.com/blog/google-begins-to-show-non-amp-articles-on-top-stories/
https://www.suzukikenichi.com/blog/google-removes-amp-badge-from-search-results/
https://gigazine.net/news/20210519-google-amp-no-longer-preferential-treatment/
AMP Λಛผࢹ͠ͳ͍ҙຯ
Slide 131
Slide 131 text
AMP ʹཔΒͳͯ͘
ߴԽ͞ΕΕ
ϥϯΩϯάʹޮՌత
https://web.dev/i18n/ja/vitals/
Slide 132
Slide 132 text
AMP ͬͨํ͕͍͍ͷʁ
Slide 133
Slide 133 text
AMP ͬͨํ͕͍͍ͷʁ
Web ϖʔδ͍͍ͯ͘ͷʁ
Slide 134
Slide 134 text
AMP ͬͨํ͕͍͍ͷʁ
Web ϖʔδ͍͍ͯ͘ͷʁ
ͦΜͳΘ͚ͳ͍
Slide 135
Slide 135 text
AMP ͬͨํ͕͍͍ͷʁ
".1ͷΤοηϯεΛऔΓೖΕͯ
ߴͳ8FCϖʔδΛ࡞Δ
Slide 136
Slide 136 text
ಠࣗ AMP ࣮͔Βߟ͑Δ
AMP ͷΤοηϯε
Slide 137
Slide 137 text
ύϑΥʔϚϯεόδΣοτ
Slide 138
Slide 138 text
ώʔϩʔը૾ͷϓϦϩʔυ
Slide 139
Slide 139 text
BNQJNHͷ-B[Z-PBE
Slide 140
Slide 140 text
49(Ωϟογϡ
Ωϟογϡઓུ483
Slide 141
Slide 141 text
ͨ͘͞Μͷ
8FCϕετϓϥΫςΟε
Slide 142
Slide 142 text
AMP
Ͳ͏͢Ε͞Λҡ࣋Ͱ͖Δͷ͔
ॻ͍ͯ͋Δދͷר
Slide 143
Slide 143 text
https://bentojs.dev/
".1#FOUP
Slide 144
Slide 144 text
https://bentojs.dev/
".1#FOUP
3FBDUίϯϙʔωϯτͰ
".1͑Δ͔ʁ
Slide 145
Slide 145 text
Slide 146
Slide 146 text
·ͣ".1Ͱ
ύϑΥʔϚϯεͷॏཁੑΛೝ͠
ϢʔβʔϑΝʔετͳ
ϓϩμΫτΛ࡞Γ্͛ΔจԽ
Slide 147
Slide 147 text
AMP Λ༷ʑͳܗͰ׆༻͢Δ
".17BMJEͰ".1Ωϟογϡʹͷͤͯ͏
Slide 148
Slide 148 text
AMP Λ༷ʑͳܗͰ׆༻͢Δ
".17BMJEͰ".1Ωϟογϡʹͷͤͯ͏
".1Ͱ8FCϕετϓϥΫςΟεΛֶͿ
".1#FOUPͰ෦తʹऔΓࠐΉ
ڞ௨ೝࣝͷͨΊʹ".1Λ͏
Slide 149
Slide 149 text
·ͱΊ
Slide 150
Slide 150 text
·ͱΊ
• AMP ͷྺ࢙ΛৼΓฦΔ
→ AMP Ωϟογϡͷޭࡑ
• AMP ΛֶͿ
→ AMP ͷత Web શମͷߴԽ
• AMP ͷಋೖ
→ AMP Λ࠶࣮͢Δํ๏Λ͝հ
• AMP ಋೖͷৼΓฦΓ
→ AMP ͷڧ͍༷ͷ੍Λڞ༗
• AMP ͷ͜Ε͔Β
→ Web ͷϕετϓϥΫςΟεΛֶͼ׆༻͢Δ
ɹ ϢʔβʔϑΝʔετͳจԽΛ࡞Δ
Slide 151
Slide 151 text
͝ਗ਼ௌ
͋Γ͕ͱ͏͍͟͝·ͨ͠
https://recruit-saiyo.jp/technology/
We’re hiring!
Slide 152
Slide 152 text
Next.js ͷ Static Generation ػೳ Λ
͍͑ʁ
ʲ݁ʳYES
ɹͨͩ͠...
• ϦΫϧʔτͷΑ͏ͳେنϝσΟΞͰԿඦສ݅ϖʔδΛ࣋ͭϝσΟ
ΞαΠτͰɺSG ͢Δͷݱ࣮తͳ࣌ؒͰऴΘΒͳ͍
• ISR ͩͱॳճ SSR ͱಉ༷
• ͞Βʹ node.js ΛෳߏͰಈ͔͍ͯ͠ΔͱɺΩϟογϡͷ
HTML Λڞ༗Ͱ͖ͳ͍ͷͰɺΉ͠Ζݹ͍ HTML ͕ΔՄೳੑ͋Δ
• ݁ہ͏Ұஈ CDN Λ͔·͢͜ͱʹͳΓɺͦΕͳΒ SSR ͰมΘΒ
ͳ͍
༨ஊ