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

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

B89f71d2ede9073a0b424acae9ed6959?s=128

Fumito Abe / necco

January 30, 2020
Tweet

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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ