Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

制約と誓約

Avatar for Junya Junya
October 29, 2019
Programming
3.3k
6

 制約と誓約

Avatar for Junya

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
Avatar for Junya ka2jun8
3
3.2k
SEO のためにエンジニアができること
Avatar for Junya ka2jun8
2
1.4k
Chrome Dev Summit 2019振り返り
Avatar for Junya ka2jun8
0
400
エンジニアになろう
Avatar for Junya ka2jun8
0
470

Other Decks in Programming

See All in Programming
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
240
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1k
JPUG勉強会 OSSデータベースの内部構造を理解しよう(第２回)
Avatar for Atsushi Ogawa oga5
0
260
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.5k
選挙速報を多くのユーザーへ 届ける Live Activities 設計
Avatar for kengo saito hamayokokuririn
0
150
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
180
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
990
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
4.8k
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
400
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
420
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.5k
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
250

Featured

See All Featured
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
440
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
910
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
470
Between Models and Reality
Avatar for mayunak mayunak
4
460
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
700
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
940
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
470
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
810

Transcript

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

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


    - 2014೥4݄ ৽ଔ F ͔Β͸͡·ΔձࣾʢR&Dʣ
 - 2018೥4݄ த్ R ͔Β͸͡·ΔձࣾʢFEʣ ### ΍ͬͯΔ͜ͱ
 - WebαʔϏεͷ৽ن্ཱͪ͛/ϑϧϦϓϨΠε
 - ࠷ۙ͸ AMP Λ࢖ͬͨ։ൃʹணख ### ϚΠϒʔϜ/޷͖ͳ΋ͷ
 - ೫໦ࡔ46 / Dead by Daylight / HUNTER x HUNTER ←্࢘

  3. ࡢ೔ͷ͓ன͝ΖͷSlack

  4. ಥવͷLT

  5. ্࢘ʹԿͰ΋࿩͍͍ͯ͠ͱݴ ΘΕͨͷͰ

  6. AMP ͷ࿩Λ͠·͢

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

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

    IEରԠ σβΠϯ BFF ։ൃޮ཰ SEO SEO

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

    styled-components

  10. • AMP • React • next.js • typescript • styled-components

    ͓Ε͕ࢥ͏ݱ୅࠷ڧͷ෍ਞ

  11. AMP࢖ͬͨ͜ͱ͋Δਓʁ

  12. AMP is … https://amp.dev/about/websites/ https://blog.amp.dev/2018/11/20/progressively-amplify-ec-cube/

  13. AMP is … ༷ʑͳݫ੍͍͠໿ͱ੤໿ͷԼͰ AMP valid ͳWebϖʔδΛ։ൃ ͢Δ͜ͱͰɺGoogle ͷΩϟογϡʹࡌΓɺݕࡧ݁Ռ͔Βߴ଎ʹ WebϖʔδΛදࣔՄೳʹ͢Δɻ

    ੍໿ͱ੤໿ͷྫ
 - JavaScript ͕ར༻Ͱ͖ͳ͍
 - ಈతͳ෦෼͸ AMP ίϯϙʔωϯτΛ࢖͏
 - CSS 50KB ҎԼ
 - ෼ੳ/޿ࠂλά͸ڐ༰͞Εͨ΋ͷͷΈར༻Մೳ
 ͳͲͳͲ…..

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

    First )

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

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

    ΘΔ͍ͱ͜Ζ
 ˠ ೋॏ։ൃʹͳΔ

  17. Full AMP ".1POMZ User

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

    valid ͷ੍໿ͷԼɺ͢΂ͯͷػೳΛ࡞Γ্͛ Δඞཁ͕͋Δ

  19. ϦϦʔε·Ͱͷεϐʔυ༏ઌ ೋॏ։ൃ͸ͤͣʹ Full AMP Ͱ͍͘

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

    • styled-components

  21. 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λά

  22. 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> ʹશ෦ॻ͘

  23. ͳͷͰAMPԽ͸ָউ

  24. ͱ͸͍͔ͳ͍

  25. ͭ·ͬͨͱ͜ΖΛڞ༗

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

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

    ͷΑ͏ ͳϥούΛ༻ҙͯ͠ styled(AmpImg) ͱ͔͠ͳ͍ͱ͍͚ͳ ͍

  28. 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;`

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

    GTM Ͱ AMP ޲͚ͷίϯςφΛ࡞ΕΔ΋ͷ ͷɺಈ࡞อূ͞Εͯͳ͍λά΋ଟ͍ • ͦ΋ͦ΋ AMP cache ʢgoogle υϝΠϯʣ͸ ITP 2.3 Ͱ࠶๚ΛऔΔͷ͸յ໓త…

  30. ͦͷ΄͔ʹ΋ • ϦϦʔε͞Εͳ͍ͱ࣮ࡍͷޮՌ͸Θ͔Βͣɺ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 ΋ͯ͠ͳ͍ͷʹಥવམͪΔࣄ݅ɻ ͳͲͨ͘͞Μ͋ͬͯॻ͖͖Εͳ͍…

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

    ͕࢖͍΍͘͢ͳΓͭͭ͋ΔʢAMP Bento / next v9ʣɻ AMP ίϯϙʔωϯτ΋ɺWeb Components ͱͯ͠͸࢖͑Δ΋ͷ΋ଟ͍ɻͲͧ͜ ͷ஌Βͳ͍αʔυύʔςΟϥΠϒϥϦΛ࢖͏ΑΓ͸ྑ͍ͱࢥ͏ɻ • AMPΛ࢖͍͍ͨຊ࣭తͳ໨త͸Կཱ͔ͪฦΔɻAMPͱSEO͸௚઀తͳؔ܎ੑ͸ͳ ͍ɻWebϖʔδ͕ߴ଎ʹ͍ͨ͠ͳΒɺύϑΥʔϚϯεόδΣοτ΍lighthouse CI Λ࢖ͬͨύϑΥʔϚϯε୲อͰ΋͍͍͔΋͠Εͳ͍ɻ • GCP, GA ͳͲͷ؀ڥΛ͢΂ͯ Google ʹऔΓғ·Εͨঢ়ଶͰ࡞ΕͯɺAMP cache ͷԸܙ͕ϑϧʹड͚ΒΕΔ؀ڥԼʹ͋ΔͳΒ΍ͬͯ΋͍͍ɻ

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

    AMP Ͱ։ൃΛߦ͏ࡍͷ Tips Λগ͠঺հ • AMP ʹ͢Δ΂͖͔Ͳ͏͔͸αʔϏε΍ঢ়گ࣍ୈ • ͨͩɺΈΜͳͰ࢖ͬͯෆຬΛFB͠ɺΤίγεςϜΛ վળ͠ଓ͚͍ͯ͘͜ͱͰະདྷ͸໌Δ͘ͳ͍ͬͯ͘

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