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

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ొஃ ୅දऔక໾
11. About Company ձࣾ঺հ ϒϥϯυͮ͘Γͷ͓ख఻͍Λى఺ʹ
    σβΠϯɹͱɹ΢ΣϒαΠτɹΛ
    ͍ͭͬͯ͘·͢
12. necco Members ϝϯόʔߏ੒ ɾσΟϨΫλʔˍσβΠϯΤϯδχΞ
    ɾΤσΟλʔˍϑΥτάϥϑΝʔ
    ɾσβΠφʔ
    ɾΤϯδχΞ
    ɾΤϯδχΞࣾ֎ύʔτφʔ 1໊
    1໊
    2໊ʢ
    
    Πϯλʔϯ1໊ʣ
    2໊
    2໊
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
39. Jamstack?
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 →
50. VueϕʔεΛ࢖ͬͯΈ͍ͨʂ GraphQL? ྑ͍ײ͡ʹྑ͍Β͍͠w PWAͱ͔Serverless Appsͱ͔ʹ௅ઓ͍ͨ͠ʂ ·ͩ୭΋࢖ͬͯͳͦ͞͏ʂ ίϛϡχςΟυϦϒϯˍৗʹվળ͕ 1 2 3 4 5
53. 4IJGUFSͷத਎
54. ࣗಈͰWPΛ࠷৽ʹͯ͘͠ΕΔ Media CDNͰը૾Λϗετ Ϣʔβʔ͕ඞཁͳ͚࣌ͩWPىಈˠ҆શ WordPressϓϥάΠϯ΋࢖͑Δ ίϛϡχςΟυϦϒϯˍৗʹվળ͕ 1 2 3 4 5
56. WebhooksͰ81 Shifter)Λσʔλιʔεʹʂ GridsomeΛShifter Webhooks͔ΒࣗಈϏϧυ 1 2
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. ͓ΘΓʹ
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. Ҿ͖ଓ͖ ։ൃָ͠ΜͰ
    ެ։·Ͱ͕Μ͹Γ·͢ʂ
70. Thank you! ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ