$30 off During Our Annual Pro Sale. View Details »

WordPress（Shifter）を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 / WordPress Shifter Gridsome Netlify

Fumito Abe / necco
January 30, 2020
Programming
0
650

WordPress（Shifter）を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 / WordPress Shifter Gridsome Netlify

Fumito Abe / necco

January 30, 2020
Tweet

More Decks by Fumito Abe / necco

See All by Fumito Abe / necco
Shifter（WordPress）を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 - Shifter Meetup Vol.8 / shifter-headlesscms-gridsome-netlify
abefumito
0
570
デザイン制作会社からみたShifter導入事例〜ミキハウスさんに取材に行ってきた話〜
abefumito
2
780
小さな制作会社が小さくはじめるブランドづくり #sacss SaCSS Special25 : BRANDING SPECIAL（SaCSS vol.108）
abefumito
4
840
地方イベントでの 県外集客成功事例
abefumito
0
1.2k
WordPressとWooCommerce+Stripeで作る、グッズ・記事販売ができるECサイトの話 / jp-stripes-connect-2019-0321-abe
abefumito
0
2.3k
neccoチームのタスク管理 / CaT vol.5
abefumito
0
1k

Other Decks in Programming

See All in Programming
Import Maps: The Next Evolution Step for Micro Frontends? @w-jax 2022
manfredsteyer
PRO
1
210
Being On Call Does Not Have to Suck.
charity
0
570
GISとDjango GEOS APIの話
mierune
0
320
Angular Architecture Workshop: Modulith to Micro Frontends
manfredsteyer
PRO
0
170
競技プログラミングことはじめ
e869120
17
9.3k
Gradioを使って機械学習モデルを一瞬でWebアプリ化
os1ma
0
160
Wantedlyのフロントエンド領域の取り組みと課題
chloe463
0
3.4k
FlutterKaigi 2022 Keynote
wasabeef
1
240
GDG DevFest2022 Songdo - KMM(Kotlin Multiplatform Mobile)
taehwandev
0
240
Navigating the Streaming Landscape
dunithd
0
230
How To 脆弱性対応
cmkomuro
0
290
Django REST Framework はじめの一歩 〜 押さえておきたい３つのポイント 〜 / First step of Django REST Framework (stapy#87 2022)
akiyoko
0
780

Featured

See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
405
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
It's Worth the Effort
3n
174
26k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
The Power of CSS Pseudo Elements
geoffreycrofte
51
4.2k
Docker and Python
trallard
28
1.8k
Pencils Down: Stop Designing & Start Developing
hursman
113
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
18k
GraphQLの誤解/rethinking-graphql
sonatard
36
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
23
4.4k
GitHub's CSS Performance
jonrohan
1020
430k

Transcript

  1. #1 Fumito Abe 2020.01.30 at Shibuya, Tokyo JAMSTACK Meetup WordPressʢShifterʣ

    Λ Headless CMSʹͨࣗࣾ͠αΠτΛ GridsomeͱNetlifyͰ࡞ͬͯΔ࿩

  2. NJDSP$.4͞Μओ࠵ͷ.FFUVQͰ 8PSE1SFTTΛ)FBEMFTT $.4ʹͯ͢͠Έ·ͤΜʂ

  3. ࣗݾ঺հ About us 1

  4. ΫϦΤΠςΟϒσΟϨΫλʔσβΠϯΤϯδχΞ Ѩ෦จਓ ౦ژ౎ࡏॅ౦ژ౎ग़਎ 2016೥10݄ʹגࣜձࣾneccoΛ૑ۀɻ 4ظ໨ɺࣾһ5໊ Πϯλʔϯ2໊ɻ 2019೥6݄౦ژΦϑΟεΛ։ઃ ೣ2ඖͱੜ׆ɻ ओʹϒϥϯυσβΠϯ੍࡞શମͷσΟϨΫγϣϯ͔Βઓུɺ 69ɾ৘ใઃܭɺ6*σβΠϯɺϑϩϯτΤϯυ࣮૷Λ୲౰ɻ

    גࣜձࣾnecco @abefumito ɾWordCampͷొஃ2ճ ɾJAWS-UG Tohokuॴଐ ɾJP_Stripes AkitaӡӦ 2ճ໨ͦΖͦΖ  ɾCSS Nite LP 64ొஃ ୅දऔక໾
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None

  11. About Company ձࣾ঺հ ϒϥϯυͮ͘Γͷ͓ख఻͍Λى఺ʹ σβΠϯɹͱɹ΢ΣϒαΠτɹΛ ͍ͭͬͯ͘·͢

  12. necco Members ϝϯόʔߏ੒ ɾσΟϨΫλʔˍσβΠϯΤϯδχΞ ɾΤσΟλʔˍϑΥτάϥϑΝʔ ɾσβΠφʔ ɾΤϯδχΞ ɾΤϯδχΞࣾ֎ύʔτφʔ 1໊ 1໊

    2໊ʢ Πϯλʔϯ1໊ʣ 2໊ 2໊
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None

  30. ͝Γ͝Γͷ ΤϯδχΞͰ͸ͳ͍ͱ ࢥ͍·͢ɻ

  31. https://riotz.works/articles/lulzneko/2019/12/24/first-website- with-shifter-webhooks-and-gridsome-on-netlify/ https://github.com/torounit/gridsome-shifter

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None

  39. Jamstack?

  40. None

  41. େ͖ͳಈ͖Λײ͡Δʂ໘ന΢ΣϒαΠτʹʂ ৽͍ٕ͠ज़͸ࣗ෼Ͱࢼͯ͠νʔϜʹڞ༗ ΍ͬͺΓಡΈࠐΈ଎͍ɺ҆શʁ WordPress + αͰ։ൃͷ෯Λ޿͍͛ͨ ৭ʑ૊Έ߹ΘͤΔͷ͕޷͖ 1 2 3

    4 5

  42. Կ͕ྑ͘ͳΓͦ͏ʁ Jamstackʹ͢Δͱnecco͸

  43. ίϯςϯπͱϑϩϯτ։ൃͷ׬શ෼཭ ϝϯόʔ͕ͲΜͲΜߋ৽ͯ͠΋໰୊ͳ͠ʂ ΤσΟλʔͱͯ͠ͷWordPress͸ͦͷ·· ϩʔΧϧ΋ຊ൪΋ίϯςϯπ͸ৗʹಉظ JS΍SPAͷ։ൃٕज़޲্ʁ 1 2 3 4 5

  44. Gridsome ࢖ͬͯΔਓʙʁ

  45. Shifter ஌ͬͯΔํʙʁ

  46. γεςϜߏ੒

  47. Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source

    →
  48. None
  49. None

  50. VueϕʔεΛ࢖ͬͯΈ͍ͨʂ GraphQL? ྑ͍ײ͡ʹྑ͍Β͍͠w PWAͱ͔Serverless Appsͱ͔ʹ௅ઓ͍ͨ͠ʂ ·ͩ୭΋࢖ͬͯͳͦ͞͏ʂ ίϛϡχςΟυϦϒϯˍৗʹվળ͕ 1 2 3

    4 5
  51. None
  52. None

  53. 4IJGUFSͷத਎

  54. ࣗಈͰWPΛ࠷৽ʹͯ͘͠ΕΔ Media CDNͰը૾Λϗετ Ϣʔβʔ͕ඞཁͳ͚࣌ͩWPىಈˠ҆શ WordPressϓϥάΠϯ΋࢖͑Δ ίϛϡχςΟυϦϒϯˍৗʹվળ͕ 1 2 3 4

    5
  55. None

  56. WebhooksͰ81 Shifter)Λσʔλιʔεʹʂ GridsomeΛShifter Webhooks͔ΒࣗಈϏϧυ 1 2

  57. None

  58. https://www.getshifter.io/build-and-deploy-gatsby-sites-using-wordpress-shifter-netlify-and-github-actions/

  59. ShifterͷWordPressελʔτͯ͠ ͍Ζ͍Ζ63-ͱ͔ௐ੔ͯ͘͠Εͯ 3VO#VJMEͯ͘͠Εͯ ੩తϑΝΠϧΛ/FUMJGZ΁ 8PSE1SFTTΛࢭΊͯ͘ΕΔ 1 2 3 4 5

  60. GitlabͰϚʔδͨ͠Β ShifterΛىͯ͜͠ ݱσʔλιʔεͰ ϏϧυˍσϓϩΠͯ͘͠ΕΔ

  61. Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source

    →

  62. ͓ΘΓʹ

  63. None
  64. None

  65. JAMstack JamstackͱҰ୯ޠʹʁ ˣ

  66. ݴ༿͕ఆண͢Δͱ ͞Βʹ৳ͼΔ͔΋ʁ

  67. https://riotz.works/articles/lulzneko/2019/12/24/first-website- with-shifter-webhooks-and-gridsome-on-netlify/ https://github.com/torounit/gridsome-shifter

  68. Ҿ͖ଓ͖ ։ൃָ͠ΜͰ ެ։·Ͱ͕Μ͹Γ·͢ʂ

  69. None

  70. Thank you! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ