Shifter Meetup east #5 WordPressとJAMstackの夕べ

#JP_GetShifter

Transcript

1. ʮ S H I F T E R ʯ ͬͯ ͳ ʹ ʁ ͱ ࠷ ৽ Ξ ο ϓ σ ʔ τ S H I F T E R M E E T U P E A S T # 5 Wo rd P re s s ͱ J A M s t a c k ͷ ༦ ΂ #JP_Getshifter
2. ຊ ೔ ͷ ಺ ༰
3. S H I F T E R ͱ ͸ ʁ
4. ୭΋͕࢖͍׳ΕͨWordPressα ΠτΛอकෆཁͳελςΟοΫ αΠτʹม׵͠CDNͰߴ଎഑ ৴/ެ։Ͱ͖ΔʮSaaSʯͰ͢ɻ Shifter ͱ͸ʁ
5. L I F E C Y C L E • WordPressͷϩάΠϯ࣌ʹDockerΛىಈ
 (Editorʣ • AWS ͷϦιʔεͰ੩తHTMLʹม׵
 (Generator) • CDN͔ΒίϯςϯπΛ഑৴
 (Contents Delivery) F E AT U R E • ߴ଎
 HTTP2ରԠ, ࣄલʹϏϧυ͞Εͨ੩తϑΝΠϧΛ
 ੈք100ΧॴҎ্ͷCDNڌ఺͔Βߴ଎഑৴ • ݎ࿚ͳηΩϡϦςΟ
 WordPress͸ৗ࣌ىಈෆཁɺϋοΫ͞ΕΔཁૉ͕ͳ͍ɻ • ͍҆ίετͰ؆୯ʹεέʔϦϯά
 ಥൃతͳεύΠΫ͕དྷͯ΋҆৺ʂαΠτμ΢ϯ͠ͳ͍ɻ • ϢʔβʔϑϨϯυϦʔ
 ࢖͍׳ΕͨWordPressͰ։ൃɾӡ༻͕Մೳ
 OS/ϛυϧ΢ΣΞͷอक࡞ۀɾίετ͕ෆཁ
 ϏδωεʹूதͰ͖Δ؀ڥ
6. W O R D P R E S S ͱ ͸ ?
7. M o s t p o p u l a r c o n t e n t m a n a g e m e n t s y s t e m s h t t p s : / / w 3 t e c h s . c o m / 
 s i n c e 1 J u l y 2 0 1 9 Usage Change Since 1 July 2019 Market Share Change Since 1 July 2019 1.WordPress 34.4% 0.3% 61.1% 0.3% 2.Joomla 2.8% 5% 3.Drupal 1.8% 3.2% -0.1%
8. – ๭ α Π τ ੍ ࡞ ୅ ཧ ళ ͷ ੠ “ϝϯςφϯε΍ηΩϡϦςΟ͕໰୊ࢹ͞ΕΔ͕….
 ։ൃऀͷϦιʔε΍ϊ΢ϋ΢ɺΤϯυ͔Βͷೲظ΍ίετΛߟ͑Δͱ….”
9. – ๭ ৘ ใ γε ςϜ ୲ ౰ ऀ ͷ ੠ “৘γεࢹ఺Ͱ͸ӡ༻͕ͭΒ͍ͷ͚ͩͲ…..
 શ͘ར༻͠ͳ͍Θ͚ʹ΋͍͔ͳ͍ͷ͕…ݱ࣮”
10. – ๭ ϑ ϩ ϯ τ Τ ϯ δχ Ξ ͷ ੠ “WordPressҊ݅͸࢓ࣄͱͯ͠͸҆ఆ͍ͯ͠Δ͚Ͳ SPA΍JAMstackͷΑ͏ͳϞμϯͳίϯηϓτͷWeb։ൃ΋͍ͨ͠ͳ͊”
11. 㱻 ར ศ ੑ ӡ ༻ ɾ ί ε τ
12. W O R D P R E S S ͷ ӡ ༻ ɾ η Ω ϡ Ϧ ςΟ
13. Wo rd P re s s αΠ τ ͷ վ ͟ Μ ඃ ֐ ͸ 1 5 0 ສ ݅ ௒ ʹ 
 ʮ ࠷ ѱ ڃ ͷ ੬ ऑ ੑ ʯ
14. Wo rd P re s s ͸ ࠜ ຊ త ʹ ӡ ༻ ΍ η Ω ϡ Ϧ ςΟ ʹ ໰ ୊ ͕ ͋ Δ ͷ ͔ʁ
15. ɾ Wo rd P re s s C o re ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ͢ ͗ Δʁ 
 ɾ Wo rd P re s s P l u g i n ͕ ੬ ऑ ʁ 
 ɾ Wo rd P re s s T h e m e ͕ ෳ ࡶ Ͱ ϝ ϯ ς ෆ ೳ ʁ 
 ɾ ͦ ΋ ͦ ΋ … P H P ΍ M y S Q L ͳ Ͳͷ ϛ υϧ ΢ Σ Ξ ʹ ໰ ୊ ʁ
16. “ ݸ ਓ త ͳ ܦ ݧ ͔ Β ݴ ͏ ͱ ܧ ଓ త ͳ ϝ ϯ ς φ ϯε Λ ߦ ͬͯ ͍ Ε ͹ க ໋ త ͳ ໰ ୊ ʹ ͳ ͬ ͨ ͜ ͱ ͸ ͳ ͍ ” – Զ
17. ɾ ౾ ஌ ࣝ Wo rd P re s s ઐ ໳ ͷ Ϛ ω ʔ δ υ ϗ ε ςΟ ϯ ά Λ ར ༻ ͢ Δ ͜ ͱ Ͱ 
 ϝ ϯ ς φ ϯε ί ε τ ΍ φ Ϩ ο δ Λ ڞ ༗ Ͱ ͖ Δ ͷ Ͱ ؅ ཧ Ϧ ι ʔε Λ 
 ܰ ݮ Ͱ ͖ · ͢ɻ 
 ୅ ද త ͳ α ʔ Ϗ ε - Wo rd P re s s V I P 
 - W P E n g i n e - A M I M O T O 
 ͳ Ͳ ͳ Ͳ …
19. ར ศ ੑ 㱻 ӡ ༻ ɾ ί ε τ
20. අ ༻ ର ޮ Ռ ͷ ߴ ͍ બ ୒ ࢶ ͕ ཉ ͠ ͍ ! ར ศ ੑ 㱻 ӡ ༻ ɾ ί ε τ
21. S H I F T W O R D P R E S S T O S E R V E R L E S S
22. Ϣ ʔ β ʔ ମ ݧ Λ Ձ ஋ ʹ ม ͑Δ ʮ G e t S h i f t e r ʯ
24. Ͳͷ͙Β͍Ϣʔβʔମݧ͕มΘΔͷ͔ʁ
25. S H I F T E R 1.αΠϯΞοϓ/ϩάΠϯ 2.WordPress ฤूɾίϯςϯπ౤ߘ 3.GENERATEʢ੩తϑΝΠϧʹม׵ʣ 4.Webެ։ W O R D P R E S S 1.αʔό४උ 2.ϛυϧ΢ΣΞ (PHP,Nginx,MySQL) ͷΠϯετʔϧ 3.WordPress Πϯετʔϧ 4.WordPress ฤूɾίϯςϯπ౤ߘ 5.Webެ։ 6.OS / ϛυϧ΢ΣΞͷܧଓతϝϯςφϯε 7.WordPress ͷܧଓతΞοϓσʔτ 8.WordPress Plugin ͷܧଓతΞοϓσʔτ 9.ύϑΥʔϚϯεͷܧଓతͳ࠷దԽ 10.αʔϏε؂ࢹɾӡ༻อकɾαϙʔτ
26. S H I F T E R ͷ ί ϯ η ϓ τ
27. https://jamstack.org/
28. “ΫϥΠΞϯταΠυͷJavaScriptɺ࠶ར༻ՄೳͳAPIɺ
 ϏϧυࡁΈͷMarkupʹجͮ͘ϞμϯͳWeb։ൃΞʔΩςΫνϟ”
29. JAMstackʹ֘౰͠ͳ͍ύλʔϯ ΫϥΠΞϯτͱαʔό͕ີ݁߹͍ͯ͠Δ͋ΒΏΔϓϩδΣΫτ͸JAMstackͰߏங͞Εͨͱ͸ݴ͑·ͤ ΜɻԼهͷ΋ͷؚ͕·ΕΔ͜ͱ͕ଟ͍Ͱ͢ɻ •WordPressɺDrupalɺJoomlaɺͦͯ͠SquarespaceͷΑ͏ͳαʔόαΠυCMSͰߏங ͞ΕͨαΠτ • RubyɺNode΍ଞͷݴޠʹґଘ͢ΔϞϊϦγοΫͳαʔό͕ಈ࡞͢ΔWebΞϓϦέʔγϣϯ • ࣮ߦ࣌ʹαʔόଆͰϨϯμϦϯάͰϏϡʔΛߏங͢ΔSPA
30. WordPress͸ίϯςϯπͷΦʔαϦ ϯάΛ༰қʹ͢Δֵ໋ͱͳΓ·ͨ͠ ͕ɺτϥϑΟοΫͷଟ͍WordPress αΠτΛ֦େ͍ͯ͠ΔਓͳΒ୭Ͱ ΋ɺͦΕ͕ύϑΥʔϚϯεͱηΩϡ ϦςΟʹ৽ͨͳ՝୊Λ΋ͨΒ͠· ͢ɻ HTMLϑΝΠϧͷγϯϓϧ͞Λσʔ λϕʔεΛ׆༻ͨ͠ίϯςϯπͱަ ׵͢Δ͜ͱ͸ɺαΠτ͕ਓؾΛത͠ ͨΓɺ୭΋஫ҙਂ͘ݟ͍ͯͳ͍ͱ͖ ʹϋοΩϯά͞ΕͨΓ͢Δͱ͍͏ඇ ৗʹݱ࣮తͳڴҖʹ௚໘͢Δ͜ͱΛ ҙຯ͠·͢ɻ
31. S H I F T E R ͷ Ϣʔεέ ʔε
42. – J O H N M A E D A σβΠϯͱςΫϊϩδʔͷ༥߹Λ௥ٻ͢ΔୈҰਓऀʹ΋ ධՁ͍͖ͨͩ·ͨ͠!
 “@GetShifter — this is a v cool system.”
43. S h i f t e r ͷ Ϣ ʔεέ ʔε 
 
 Q . S h i f t e r ͸ Wo rd P re s s ͷ ۜ ͷ ஄ ؙ ʹ ͳ Γ · ͢ ͔ʁ 
 A . ࢒ ೦ ͳ ͕ Β ೉ ͠ ͍Ͱ ͢ɻ 
 
 - ࠷ ద ͳ έ ʔε ɿ 
 Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔϙ Ϩ ʔ ταΠ τ ͳ Ͳ - ෆ ޲ ͖ ͳ έ ʔε ɿ ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ ਺ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ
44. ࣄ ྫ ͔ Β ֶ Ϳ ϕ ε τϓ ϥ Ϋ ςΟε
45. Case1 ϛΩϋ΢ε༷ ίΞϒϥϯυΛGetShifter
46. ՝୊ͱվળ಺༰ • ಉࣾͷίΞϒϥϯυͷΧλϩάαΠτ • αΠτͷߋ৽͸قઅ͝ͱͷ೥਺ճ • ෳ਺αΠτ×ෳ਺ݴޠΛݸผʹϗεςΟϯά • ՝୊ • ϒϥϯυɾݴޠ͝ͱʹWordPress͕ଘࡏ͢ΔͨΊߋ৽ʹ๲େͳख͕͔͔ؒΔ • ϒϥϯυɾݴޠ͝ͱͷWordPressͷΞοϓσʔτ • վળ • URLͷ੔ཧ΍αΠτӡ༻ͷվળ • ϓϥάΠϯΛ׆༻ͨ͠WordPressͷଟݴޠαΠτԽ • ShifterΛ׆༻ͨ͠WordPressอकͷࣗಈԽͱ੩త഑৴
47. Case2 ΢ϑϧ༷ ৘ใηΩϡϦςΟڧԽͷͨΊʹશͯͷαΠτΛ੩తԽ
48. ՝୊ͱվળ಺༰ • อ༗͢Δશͯͷ΢ΣϒαΠτ • ίʔϙϨʔταΠτɾϓϩμΫταΠτɾϥϯσΟϯάϖʔδɾΤϯδχΞϒϩά • Ұ෦WordPressʴ੩తԽϓϥάΠϯͰӡ༻ɺҰ෦͸੩తαΠτ • ՝୊ • αΠτ؅ཧ͕ෳ਺ύλʔϯଘࡏ • WordPressͷϗεςΟϯάίετ • WordPressͷϝϯςφϯεʹ͔͔Δखؒ • վળ • ϛʔτΞοϓͰ৘ใऩरͱ՝୊ղܾ • ແྉτϥΠΞϧΛ׆༻ͨ͠ϚΠάϨʔγϣϯͷݕূ • WordPressͷϗεςΟϯάͱ੩తԽΛShifterʹҰຊԽ • WebhooksػೳΛ࢖ͬͯNetlifyͰͷ഑৴؅ཧ
49. ShifterϫʔΫγϣοϓ - Step-by-StepͷυΩϡϝϯτ https://github.com/getshifter/workshop/blob/master/step-by-step/netlify/README.md
50. ࠓ ޙ ͷ ϩ ʔ υ Ϛ οϓ
51. • ΑΓར༻͠΍͍͢Ձ֨ઃఆͱϓϥϯ΁ͷมߋ [΋͏͙͢] • Teamϝϯόʔ΁ͷݖݶ؅ཧػೳڧԽʢUser Roleʣ • ը૾(Media)ઐ༻ʹCDNΛ෼཭ • Dashboard UI ͷΞοϓσʔτ [ਵ࣌ߋ৽த] • ΑΓσΟϕϩούʔϑϨϯυϦʔͳAPI • SearchɺForm౳ͷΠϯςάϨʔγϣϯڧԽ
52. ࣗ ෼ ͷ Ϗδ ω ε ʹ ू த ͠ Α ͏
53. Ϗʔϧձࣾɺৢ଄ॴ ʢॴ༗͔Βར༻΁ʣ “Ϗʔϧձࣾͷϛογϣϯɺ
 ίΞɾίϯϐλϯεͱ͍͏ͷ͸ɺ͍ ͔ʹඒຯ͍͠ϏʔϧΛ͍͔ʹ଎͓͘ ٬༷ʹಧ͚Δ͔Ͱ͢ɻ
 
 ൃిॴͱૹిઢ͕੔උ͞Εͨ࣌୅ʹ ࣗલͷൃిػΛ࣋ͭͱ͍͏͜ͱ͸ɺ ຊདྷ·ͬͨ͘ίΞɾίϯϐλϯεʹ ͳΒͳ͍Θ͚Ͱ͢ɻ”
54. Don’t waste another minute. Sign up for Shifter and let us do the heavy lifting. https://getshifter.io/ #JP_Getshifter