Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[OkayamaWordPressMeetup#5]みんなのオススメWordPressを知りたい - Developing with WordPress The Jamstack way

[OkayamaWordPressMeetup#5]みんなのオススメWordPressを知りたい - Developing with WordPress The Jamstack way

#JP_GetShifter
#okayamawpmeetup
[参考]
WordPress、Shifter、Netlify、そしてGitHub Actionsを利用したGatsbyサイトのビルドとデプロイ
https://www.getshifter.io/ja/build-and-deploy-gatsby-sites-using-wordpress-shifter-netlify-and-github-actions/

DigitalCube Inc.

February 01, 2020
Tweet

More Decks by DigitalCube Inc.

Other Decks in Technology

Transcript

  1. O K A Y A M A W O R D P R E S S M E E T U P # 5 Έ Μ ͳ ͷ Φ ε ε ϝ W O R D P R E S S Λ ஌ Γ ͨ ͍ ʂ
    D e v e l o p i n g w i t h W o r d P r e s s ,
    T h e J A M s t a c k w a y .
    #JP_Getshifter
    - WordPressͱJAMstackͰ޿͕ΔϑϩϯτΤϯυΤϯδχΞͷՄೳੑʹ͍ͭͯ -

    View Slide

  2. ձ ৔ ʹ དྷ Ε ͳ ͔ ͬ ͨ ํ ʹ ΋ ڞ ༗ Λ
    #JP_Getshifter
    #JP_GetShifter

    #okayamawpmeetup

    View Slide

  3. View Slide

  4. View Slide

  5. #JP_Getshifter
    Shifter ͱ͸?

    View Slide

  6. ୭΋͕࢖͍׳ΕͨWordPressαΠτΛ
    อकෆཁͳελςΟοΫαΠτʹม׵͠

    CDNͰެ։Ͱ͖ΔʮSaaSʯͰ͢
    Shifter ͱ͸ʁ
    #JP_Getshifter

    View Slide

  7. #JP_Getshifter

    View Slide

  8. #JP_Getshifter
    WordPress ͱ͸?

    View Slide

  9. 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

    s i n c e 1 D e c e m b e r 2 0 1 9
    Usage
    Change Since
    1 December 2019
    Market
    Share
    Change Since
    1 December 2019
    1.WordPress 35.4% 0.3% 62.2% 0.4%
    2.Joomla 2.6% -0.1% 4.6% -0.1%
    3.Shopify 1.9% 0.1% 3.4% -0.2%
    #JP_Getshifter
    https://w3techs.com/

    View Slide

  10. – ๭ α Π τ ੍ ࡞ ୅ ཧ ళ ͷ ੠
    “ϝϯςφϯε΍ηΩϡϦςΟ͕໰୊ࢹ͞ΕΔ͕…

    ։ൃऀͷϦιʔε΍ϊ΢ϋ΢ɺΤϯυ͔Βͷೲظ΍ίετΛߟ͑Δͱ…
    #JP_Getshifter

    View Slide

  11. – ๭ ৘ ใ γε ςϜ ୲ ౰ ऀ ͷ ੠
    “৘ใγε෦໳ͷࢹ఺Ͱ͸ϝϯςφϯε/ӡ༻͕ͭΒ͍͚Ͳ…

    ୭Ͱ΋ίϯςϯπͷߋ৽͕Ͱ͖Δπʔϧ͸ඞཁ
    #JP_Getshifter

    View Slide

  12. D X 

    ʢ D e v e l o p e r E x p e r i e n c e ʣ
    U X 

    ʢ U s e r E x p e r i e n c e ʣ
    #JP_Getshifter

    View Slide

  13. – ๭ ϑ ϩ ϯ τ Τ ϯ δχ Ξ ͷ ੠
    “WordPressҊ݅͸࢓ࣄͱͯ͠͸҆ఆ͍ͯ͠Δ͚Ͳ
    Ϟμϯͳٕज़Λ͔ͭͬͨWeb։ൃ΋͍ͨ͠ͳ͊
    #JP_Getshifter

    View Slide

  14. W o r d P r e s s α Π τ ͷ վ ͟Μ ඃ ֐ ͸ 1 5 0 ສ ݅ ௒ ʹ 

    ʮ ࠷ ѱ ڃ ͷ ੬ ऑ ੑ ʯ
    #JP_Getshifter

    View Slide

  15. ɾ W o r d P r e s s C o r e ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ͢ ͗ ͯ େ ม 

    ɾ W o r d P r e s s P l u g i n ͷ ੬ ऑ ੑ ͕ ා ͍ 

    ɾ W o r d P r e s s T h e m e s ͕ ෳ ࡶ Ͱ ࡞ ੒ ऀ ͠ ͔ ϝ ϯ ς ෆ ೳ ʹ ͳ Δ
    ɾ ί ϯ ς ϯ π ؅ ཧ ऀ ͱ W e b ։ ൃ ऀ ͷ ϫ ʔ Ϋ ϑ ϩ ʔ Λ ͖ Ε ͍ ʹ ෼ ཭ Ͱ ͖ ͳ ͍ 

    ɾ ͦ ΋ ͦ ΋ … α ʔό ؅ ཧ ΍ P H P ΍ M y S Q L ͳ Ͳͷ ϛ υϧ ΢ Σ Ξ ͷ ؅ ཧ ͕ ͠ Μ Ͳ ͍
    #JP_Getshifter

    View Slide

  16. U X 

    ʢ U s e r E x p e r i e n c e ʣ
    D X 

    ʢ D e v e l o p e r E x p e r i e n c e ʣ
    #JP_Getshifter

    View Slide

  17. ό ϥ ϯε ͷ ྑ ͍ બ ୒ ࢶ ͕ ཉ ͠ ͍ !
    U X 

    ʢ U s e r E x p e r i e n c e ʣ
    D X 

    ʢ D e v e l o p e r E x p e r i e n c e ʣ
    #JP_Getshifter

    View Slide

  18. #JP_Getshifter

    View Slide

  19. #JP_Getshifter
    Rise of the JAMstack

    View Slide

  20. #JP_Getshifter

    View Slide

  21. #JP_Getshifter
    [ M i c r o S e r v i c e s ]
    [ M o n o l i t h i c ]

    View Slide

  22. #JP_Getshifter

    View Slide

  23. #JP_Getshifter

    View Slide

  24. #JP_Getshifter

    View Slide

  25. #JP_Getshifter

    View Slide

  26. What’s the difference?
    Dynamic WordPress
    !
    #JP_Getshifter

    View Slide

  27. What’s the difference?
    Static WordPress
    !
    #JP_Getshifter

    View Slide

  28. #JP_Getshifter

    View Slide

  29. 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

    View Slide

  30. W o r d P r e s s ͷ ։ ൃ ͱ ӡ ༻ ମ ݧ Λ
    J A M s t a c k ϥ ΠΫ ʹ S h i f t ͢ Δ ɻ
    #JP_Getshifter

    View Slide

  31. M a n a g e d
    H o s t i n g
    C D N
    B u i l d T o o l 

    ( S S G )


    S a a S
    #JP_Getshifter

    View Slide

  32. 1.ϑϧϚωʔδυͷ WordPress ϗεςΟϯά

    αʔόͷܖ໿ɾOS/ϛυϧ΢ΣΞͷઃఆ࡞ۀ͕ෆཁ

    αʔόɾOS/ϛυϧ΢ΣΞͷϝϯςφϯεɾ؅ཧ͕ෆཁ

    WordPressͷΠϯετʔϧ࡞ۀ͕ෆཁ

    WordPressͷΞοϓσʔτ࡞ۀ͕ෆཁ
    2.WordPress ʹಛԽͨ͠ SSGʢελςΟοΫαΠτδΣωϨʔλʔʣ

    ୭΋͕࢖͍׳ΕͨWordPressμογϡϘʔυͰهࣄͷฤू͕Մೳ

    WordPress Themes Ͱ։ൃ͕Մೳ

    WordPress Plugins Λར༻Մೳ ※Ұ෦৚݅͋Γ
    3.CDN ʹΑΔίϯςϯπ഑৴

    ௒ߴ଎Ͱͷίϯςϯπ഑৴

    ηΩϡΞ

    ແݶͷεέʔϦϯά

    ߴධՁͷSEOείΞʢWeb Performanceʣ
    #JP_Getshifter

    View Slide

  33. #JP_Getshifter
    Shifter Showcase

    View Slide

  34. #JP_Getshifter
    https://mikihouse-baby.mikihouse.com/

    View Slide

  35. ShifterΛ࢖ͬͨଟݴޠαΠτԽ
    Ͱ࡞ۀͷ࣌ؒͱख͕ؒ൒෼ҎԼʹ


    https://www.digitalcube.jp/
    shiftercase/10626/
    #JP_Getshifter

    View Slide

  36. #JP_Getshifter
    https://event.businessinsider.jp/

    View Slide

  37. #JP_Getshifter
    https://conference.mashingup.jp/

    View Slide

  38. ShifterʹΑΔ՝୊ղܾʹΑΓɺ
    ຊདྷͷۀ຿ʹ஫ྗ͠ʮຊ࣭తͳΫϦ
    ΤΠςΟϒΛݟ௚ͤΔʯମ੍ʹ


    https://www.digitalcube.jp/
    shiftercase/10978/
    #JP_Getshifter

    View Slide

  39. #JP_Getshifter
    https://soracom.jp/

    View Slide

  40. #JP_Getshifter
    https://smarthr.co.jp/

    View Slide

  41. S h i f t e r ͷ Ϣ ʔεέ ʔε 


    Q . S h i f t e r ͸ W o r d P r e s s ͷ ۜ ͷ ஄ ؙ ʹ ͳ Γ · ͢ ͔ʁ 

    A . ࢒ ೦ ͳ ͕ Β ೉ ͠ ͍Ͱ ͢ɻ 


    - ࠷ ద ͳ έ ʔε ɿ 

    Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔ ϙ Ϩ ʔ ταΠ τ ͳ Ͳ
    - ෆ ޲ ͖ ͳ έ ʔε ɿ
    ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ ਺ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ
    #JP_Getshifter

    View Slide

  42. https://smarthr.co.jp/ #JP_Getshifter
    https://showcase.getshifter.io/

    View Slide

  43. W o r d P r e s s T h e m e s ͬͯ 

    P H P Ͱ ։ ൃ ͳ Μ ͩ Α Ͷ …
    #JP_Getshifter

    View Slide

  44. H e a d l e s s W o r d P r e s s w i t h J A M s t a c k
    #JP_Getshifter

    View Slide

  45. H o w i t w o r k s ?
    #JP_Getshifter

    View Slide

  46. View Slide

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

    View Slide

  48. #JP_Getshifter
    https://www.wpgraphql.com/

    View Slide

  49. #JP_Getshifter

    View Slide

  50. #JP_Getshifter
    https://github.com/wp-graphql/gatsby-wpgraphql-blog-example

    View Slide

  51. /gatsby-config.js
    #JP_Getshifter

    View Slide

  52. /.github/workflows/main.yml
    #JP_Getshifter

    View Slide

  53. #JP_Getshifter

    View Slide

  54. #JP_Getshifter

    View Slide

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

    View Slide

  56. https://getshifter.io/
    Don’t waste another minute.
    Sign up for Shifter and let us do the heavy lifting.

    View Slide

  57. #JP_Getshifter
    https://eventregist.com/p/JP_Getshifter/status/live

    View Slide