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

Transcript

1. 1.

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

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

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

3. 3.

   ࣗݾ঺հ About us 1

4. 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. 5.

   None
6. 6.

   None
7. 7.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

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

12. 12.

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

    2໊ʢ
    
    Πϯλʔϯ1໊ʣ
    2໊
    2໊
13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    None
22. 22.

    None
23. 23.

    None
24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    None
28. 28.

    None
29. 29.

    None
30. 30.

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

31. 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. 32.

    None
33. 33.

    None
34. 34.

    None
35. 35.

    None
36. 36.

    None
37. 37.

    None
38. 38.

    None
39. 39.

    Jamstack?

40. 40.

    None
41. 41.

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

    4 5
42. 42.

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

43. 43.

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

44. 44.

    Gridsome ࢖ͬͯΔਓʙʁ

45. 45.

    Shifter ஌ͬͯΔํʙʁ

46. 46.

    γεςϜߏ੒

47. 47.

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

    →
48. 48.

    None
49. 49.

    None
50. 50.

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

    4 5
51. 51.

    None
52. 52.

    None
53. 53.

    4IJGUFSͷத਎

54. 54.

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

    5
55. 55.

    None
56. 56.

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

57. 57.

    None
58. 58.

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

59. 59.

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

60. 60.

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

61. 61.

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

    →
62. 62.

    ͓ΘΓʹ

63. 63.

    None
64. 64.

    None
65. 65.

    JAMstack JamstackͱҰ୯ޠʹʁ ˣ

66. 66.

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

67. 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. 68.

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

69. 69.

    None
70. 70.

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