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

B89f71d2ede9073a0b424acae9ed6959?s=47 Fumito Abe / necco
February 05, 2020
Technology
0
200

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

B89f71d2ede9073a0b424acae9ed6959?s=128

Fumito Abe / necco

February 05, 2020
Tweet

More Decks by Fumito Abe / necco

See All by Fumito Abe / necco
B89f71d2ede9073a0b424acae9ed6959?s=48 abefumito
0
400
B89f71d2ede9073a0b424acae9ed6959?s=48 abefumito
2
290
B89f71d2ede9073a0b424acae9ed6959?s=48 abefumito
4
770
B89f71d2ede9073a0b424acae9ed6959?s=48 abefumito
0
890
B89f71d2ede9073a0b424acae9ed6959?s=48 abefumito
0
1.6k
B89f71d2ede9073a0b424acae9ed6959?s=48 abefumito
0
690

Other Decks in Technology

See All in Technology
553784f5490e80cde79ef80ee70b5ed2?s=48 takamii228
1
120
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
240
66a1bb94b08fe5dcd07635a59681626c?s=48 agilesingapore
0
160
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
0
200
D5a8875907107294786ee8cba72c7f4c?s=48 torufuru
0
150
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
260
5b392dc79d5b6d1dab580bf60e26fb7c?s=48 nitya
0
150
8aba6de431668fc8d09977c0e33c63c1?s=48 jaguar_imo
0
130
B2a04c1ec959edba430bcb38ca6ffc81?s=48 corestate55
0
190
380bcd2ab751f5838abd8219df53e5fe?s=48 tomoki10
0
1k
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
1
920
332f89cc697355902a817506b6995f2b?s=48 ytaka23
0
360

Featured

See All Featured
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1019
370k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.3k
245cee81a9c424266e5e401d844ea881?s=48 lara
13
2.4k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
331
29k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
499
36k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
335
16k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.3k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
305
17k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.5k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k

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. ࠓ

  30. None

  31. ཧ૝

  32. None

  33. ݱ࣮

  34. None

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

  36. γεςϜߏ੒

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

    →

  38. ېࢭࣄ߲

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

  40. Gridsome ࢖ͬͯΔਓʙʁ

  41. (SJETPNFͬͯʁ

  42. None
  43. None

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

    3 4 5 ͳͥ8PSE1SFTTςʔϚͰͳ͘(SJETPNF

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

    ϑϩϯτ͕(SJETPNFͰ΋

  46. ύϑΥʔϚϯε͸ʁ

  47. None
  48. None
  49. None
  50. None

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

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

  53. None
  54. None
  55. None
  56. None

  57. ઃఆ͸ʁ

  58. None
  59. None
  60. None

  61. ৄ͘͠͸

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

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

  64. None

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

  66. None

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

    →

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

    3 4 5 ݱঢ়ϦϞʔτϦϙδτϦͷ81ςʔϚΛ࠷৽ͰσϓϩΠ͢Δʹ͸

  69. UBHQVTIͨ͠Βͦͷ··ɺࣗಈͰ 4IJGUFS্ཱ͕͕ͪΔ ࢦఆͨ͠όʔδϣϯΛऔಘͯ͠ల։ (FOFSBUF"SUJGBDU͢Δ ੩తϑΝΠϧΛσϓϩΠ͢Δ 1 2 3 4 5

    ͜͏ͳͬͯ΄͍͠

  70. ΋ͬͱ͍͏ͱͰ͖Ε͹

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

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

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

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