Shifter(WordPress)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 - Shifter Meetup Vol.8 / shifter-headlesscms-gridsome-netlify

Shifter(WordPress)を Headless CMSにした自社サイトを GridsomeとNetlifyで作ってる話 - Shifter Meetup Vol.8 / shifter-headlesscms-gridsome-netlify

B89f71d2ede9073a0b424acae9ed6959?s=128

Fumito Abe / necco

February 05, 2020
Tweet

Transcript

  1. Vol.8 Fumito Abe 2020.02.05 at Shibuya, Tokyo Shifter Meetup ShifterʢWordPressʣ

    Λ Headless CMSʹͨࣗࣾ͠αΠτΛ GridsomeͱNetlifyͰ࡞ͬͯΔ࿩
  2. ࣗݾ঺հ About us 1

  3. ΫϦΤΠςΟϒσΟϨΫλʔσβΠϯΤϯδχΞ Ѩ෦จਓ ౦ژ౎ࡏॅ౦ژ౎ग़਎ 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ొஃ ୅දऔక໾
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. About Company ձࣾ঺հ ϒϥϯυͮ͘Γͷ͓ख఻͍Λى఺ʹ σβΠϯɹͱɹ΢ΣϒαΠτɹΛ ͍ͭͬͯ͘·͢

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

    Πϯλʔϯ2໊ʣ 1໊ʢ ΞϧόΠτ1໊ʣ  ߹ܭ໊ ळాΦϑΟε໊౦ژΦϑΟε໊
  12. None
  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. ຊ୊

  27. Έͳ͞ΜͰ΋ ͙͢࡞Ε·͢ʂ ࠓ೔ͷJamstackͳߏ੒͸

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

  29. None
  30. ཧ૝

  31. None
  32. ݱ࣮

  33. None
  34. डୗ੍࡞ձࣾͰ ࣗࣾαΠτͪΌΜͱ ͯ͠Δਓଚܟ

  35. γεςϜߏ੒

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

  37. ېࢭࣄ߲

  38. ͦ΋ͦ΋ 4IJGUFS͚ͩͰ͍͍ΑͶʁ

  39. Gridsome ࢖ͬͯΔਓʙʁ

  40. (SJETPNFͬͯʁ

  41. None
  42. None
  43. Vueϕʔεͷ'8Λ࢖ͬͯΈ͍ͨʂ ৽͍ٕ͠ज़͸ࣗ෼Ͱࢼͯ͠νʔϜʹڞ༗ ੩త͔ͩΒ΍ͬͺΓಡΈࠐΈ଎͍ʂ WordPress + αͰ։ൃͷ෯Λ޿͍͛ͨ GraphQL? ྑ͍ײ͡ʹྑ͍Β͍͠w 1 2

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

    ϑϩϯτ͕(SJETPNFͰ΋
  45. ύϑΥʔϚϯε͸ʁ

  46. None
  47. None
  48. None
  49. None
  50. ͦ΋ͦ΋ 4IJGUFS͚ͩͰ͍͍ΑͶʁ

  51. 4IJGUFSͰ ίϯςϯπΛߋ৽͠ ͨޙͷಈ͖͸ʁ

  52. None
  53. None
  54. None
  55. None
  56. ઃఆ͸ʁ

  57. None
  58. None
  59. None
  60. ৄ͘͠͸

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

  62. ࠷ޙʹʂ 8PSE1SFTTςʔϚͷ ৔߹ͷσϓϩΠͰ ࣭໰͕͋Γ·͢ɻ

  63. None
  64. 81ͷςʔϚ։ൃ࣌ͷ σϓϩΠͷࣗಈԽɾ ؆ུԽͰ͖·͔͢ʁ

  65. None
  66. Webhooks→Import Headless CMS Vue.js Framework Build & Hosting Data Source

  67. TUZMFDTTͷόʔδϣϯΛΠϯΫϦϝϯτʢࣗಈՄʣ ݱࡏͷλάόʔδϣϯΛ֬ೝ (JUUBHMJTU HJUUBHYNBTUFS λά7FSੜ੒ HJUQVTIPSJHJOY ࠷৽λάΛ164) ShifterͷWPμογϡϘʔυ͔ΒςʔϚߋ৽ 1 2

    3 4 5 ݱঢ়ϦϞʔτϦϙδτϦͷ81ςʔϚΛ࠷৽ͰσϓϩΠ͢Δʹ͸
  68. UBHQVTIͨ͠Βͦͷ··ɺࣗಈͰ 4IJGUFS্ཱ͕͕ͪΔ ࢦఆͨ͠όʔδϣϯΛऔಘͯ͠ల։ (FOFSBUF"SUJGBDU͢Δ ੩తϑΝΠϧΛσϓϩΠ͢Δ 1 2 3 4 5

    ͜͏ͳͬͯ΄͍͠
  69. ΋ͬͱ͍͏ͱͰ͖Ε͹

  70. UBHͰ[JQϑΝΠϧͷੜ੒Λ͠ͳ͍Ͱ ΋(JUIVC্Ͱ13Λग़ͯ͠ .BTUFS#SBODIʹϚʔδͨ͠Β ࣗಈͰϚελʔͷ81ςʔϚ͕൓ө ͞Ε(FOFSBUF·ͰͰ͖·ͤΜ͔ʁ

  71. ςʔϚ։ൃऀ͕4IJGUFSʹ ೖΒͳͯ͘΋࠷৽ͷςʔϚʹʂ (FOFSBUF͢Δඞཁ͕ͳ͘ͳΔ

  72. %9%FWFMPQFS&YQFSJFODF͕ ര্͕Γʁ

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