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

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ͷόʔδϣϯΛΠϯΫϦϝϯτʢࣗಈՄʣ ݱࡏͷλάόʔδϣϯΛ֬ೝ
    (JU
    UBH
    MJTU HJU
    UBH
    Y
    NBTUFS
    λά7FSੜ੒ HJU
    QVTI
    PSJHJO
    Y
    ࠷৽λάΛ164) ShifterͷWPμογϡϘʔυ͔ΒςʔϚߋ৽ 1 2

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

69. UBH
    QVTIͨ͠Βͦͷ··ɺࣗಈͰ 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! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ