[Shifter Meetup] Shifterのユースケースと最新アップデート

[Shifter]Serverless-Static WordPress Hosting
https://getshifter.io/
Shifter is the WordPress hosting solution that combines static site generation and serverless architecture with the world’s most popular CMS.

-
1. LIXILさんのWebhookを利用した運用事例
2. 多言語サイト対応
3. GatsbyでbuildしてNetlifyへDeploy
4. Formspreeを使って5分でお問合せフォームを実装

Transcript

1. ʮ S H I F T E R ʯ ͬͯ ͳ ʹ ʁ ͱ ࠷ ৽ Ξ ο ϓ σ ʔ τ S H I F T E R M E E T U P # 4 G o ελ ς Ο ο Ϋ ʂ #JP_Getshifter
2. ຊ ೔ ͷ ಺ ༰
3. 1 . L I X I L ͞ Μ ͷ We b h o o k Λ ར ༻ ͠ ͨ ӡ ༻ ࣄ ྫ 2 . ଟ ݴ ޠ αΠ τ ର Ԡ 3 . G a t s b y Ͱ b u i l d ͯ͠ N e t l i f y ΁ D e p l o y 4 . F o r m s p re e Λ ࢖ ͬͯ 5 ෼ Ͱ ͓ ໰ ߹ ͤ ϑ Υ ʔϜ Λ ࣮ ૷ 5 . ඒ ຯ ͠ ͍ Ϋ ϥ ϑ τ Ϗʔϧ ͱ N Z ϫ Π ϯ
4. S H I F T E R ͱ ͸ ʁ
5. S h i f t e r ͸ ɺ 
 ୭ ΋ ͕ ࢖ ͍ ׳ Ε ͨ Wo rd P re s s Ͱ ࡞ ੒ ͠ ͨ We b αΠ τ Λ อ क ෆ ཁ ͳ ε λ ςΟ ο Ϋ αΠ τ ʹ ม ׵ ͠ C D N Ͱ ߴ ଎ ഑ ৴ Ͱ ͖ Δ ϗ ε ςΟ ϯ ά ι Ϧ ϡ ʔ γ ϣ ϯ Ͱ ͢ɻ
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 M a y 2 0 1 9 Usage Change Since 1 May 2019 Market Share Change Since 1 May 2019 1.WordPress 34.0% +0.2% 60.8% +0.2% 2.Joomla 2.8% -0.1% 5.1% -0.1% 3.Drupal 1.9% 2.8% 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 
 ͳ Ͳ ͳ Ͳ …
18. ར ศ ੑ 㱻 ӡ ༻ ί ε τ
19. අ ༻ ର ޮ Ռ ͷ ߴ ͍ બ ୒ ࢶ ͕ ཉ ͠ ͍ ! ར ศ ੑ 㱻 ӡ ༻ ί ε τ
20. 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
21. S H I F T E R ͷ ί ϯ η ϓ τ
22. https://jamstack.org/
23. “ΫϥΠΞϯταΠυͷJavaScriptɺ࠶ར༻ՄೳͳAPIɺ
 ϏϧυࡁΈͷMarkupʹجͮ͘ϞμϯͳWeb։ൃΞʔΩςΫνϟ”
24. JAMstackʹ֘౰͠ͳ͍ύλʔϯ ΫϥΠΞϯτͱαʔό͕ີ݁߹͍ͯ͠Δ͋ΒΏΔϓϩδΣΫτ͸JAMstackͰߏங͞Εͨͱ͸ݴ͑·ͤ ΜɻԼهͷ΋ͷؚ͕·ΕΔ͜ͱ͕ଟ͍Ͱ͢ɻ •WordPressɺDrupalɺJoomlaɺͦͯ͠SquarespaceͷΑ͏ͳαʔόαΠυCMSͰߏங ͞ΕͨαΠτ • RubyɺNode΍ଞͷݴޠʹґଘ͢ΔϞϊϦγοΫͳαʔό͕ಈ࡞͢ΔWebΞϓϦέʔγϣϯ • ࣮ߦ࣌ʹαʔόଆͰϨϯμϦϯάͰϏϡʔΛߏங͢ΔSPA
25. S H I F T E R ͷ ϥ Π ϑ αΠΫϧ ͱ ಛ ௃
26. 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ڌ఺͔Βߴ଎഑৴ • ݎ࿚ͳηΩϡϦςΟ
 SSL, ύεϫʔυϨεϩάΠϯ, WordPress͸ৗ࣌ىಈෆཁ
 ϋοΫ͞ΕΔཁૉ͕ͳ͍ • ͍҆ίετͰ؆୯ʹεέʔϦϯά
 ಥൃతͳεύΠΫ͕དྷͯ΋҆৺ʂαΠτμ΢ϯ͠ͳ͍ɻ • ϢʔβʔϑϨϯυϦʔ
 ࢖͍׳ΕͨWordPressͰ։ൃɾӡ༻͕Մೳ
 OS/ϛυϧ΢ΣΞͷอक࡞ۀɾίετ͕ෆཁ
 ϑϩϯτͱόοΫΤϯυͷ෼཭ɺϏδωεʹूதͰ͖Δ؀ڥ
27. D E M O
28. 1 0 , 0 0 0 ϖʔ δ ͷ Wo rd P re s s Λ G e n e r a t e ͯ͠ 
 ύ ϑ Υ ʔϚ ϯε Λ ଌ ఆ ͠ ͨ ݁ Ռ https://www.digitalcube.jp/information/4564/
29. S H I F T E R ͷ Ϣʔεέ ʔε
41. S h i f t e r ͷ Ϣ ʔεέ ʔε 
 
 Q . S h i f t e r ͸ Wo rd P re s s ͷ ۜ ͷ ஄ ؙ ʹ ͳ Γ · ͢ ͔ʁ 
 A . ࢒ ೦ ͳ ͕ Β ೉ ͠ ͍Ͱ ͢ɻ 
 
 - ࠷ ద ͳ έ ʔε ɿ 
 Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔϙ Ϩ ʔ ταΠ τ ͳ Ͳ - ෆ ޲ ͖ ͳ έ ʔε ɿ ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ ਺ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ
42. ࠷ ৽ ͷ U P D AT E
43. ʮPolylangʯΛ࢖ͬͨଟݴޠԽରԠαΠτͷ੩తԽʹରԠ • 40ϲࠃޠҎ্ʹରԠ • ୯७ͳࣗಈ຋༁Ͱ͸ͳ͘ݴޠ͝ͱʹద ੾ͳจষΛϢʔβʔଆͰઃఆՄೳ • ݴޠεΠονϟʔͳͲଟݴޠԽʹඞཁ ͳػೳΛ؆୯ઃఆ https://wordpress.org/plugins/polylang/
44. FormspreeΛ࢖ͬͯ5෼Ͱ͓໰߹ͤϑΥʔϜΛ࣮૷ Formspree は問合せフォームサービス のプロバイダです。
 「静的サイトと最⾼の相性」という彼ら のキャッチフレーズには、僕らも同意し ます。
 フォームの登録内容が⽬的のあて先に送 信するという点では、他のフォームと同 じではあるものの、Formspree には他 にも多くの機能が備わっています。 https://formspree.io/ https://www.digitalcube.jp/information/4573/
45. GatsbyͰbuildͯ͠Netlify΁Deploy
 - Moving to a static site with Gatsby + Netlify + Shifter - • NetlifyͳͲ֎෦ͷϗεςΟϯά؀ڥ΁ͷܧଓ తͳσϓϩΠΛ࣮ݱͰ͖ΔShifter Webhooks ػೳΛ͞ΒʹਐԽͤͨ͞΋ͷͰ͢ɻ • Ϣʔβʔ͸Shifter্ͷWordPressͰϖʔδΛ ߋ৽ޙɺShifter WebhooksϘλϯΛΫϦοΫ ͢Δ͚ͩͰɺ
 Netlify্ͷGatsbyδΣωϨʔλʔͰWordPess ͷίϯςϯπσʔλΛϏϧυ͠ɺNetlify্΁ ͷσϓϩΠ͕ՄೳʹͳΓ·͢ɻ https://www.gatsbyjs.org/ https://www.netlify.com/ https://www.digitalcube.jp/information/4434/
46. ࠓ ޙ ͷ ϩ ʔ υ Ϛ οϓ
47. • Teamϝϯόʔ΁ͷݖݶ؅ཧػೳڧԽʢUser Roleʣ • ΑΓར༻͠΍͍͢Ձ֨ઃఆͱϓϥϯ΁ͷมߋ • ը૾(Media)ઐ༻ʹCDNΛ෼཭ • Dashboard UI ͷΞοϓσʔτ • ΑΓσΟϕϩούʔϑϨϯυϦʔͳAPI • SearchɺForm౳ͷΠϯςάϨγϣϯڧԽ
48. Don’t waste another minute. Sign up for Shifter and let us do the heavy lifting. https://getshifter.io/ #JP_Getshifter