WordPress as a Service – WordPressを使った新しいプロダクト・サービス開発について考える / wct2019

Transcript

1. View Slide

2. H i d e t a k a
   O k a m o t o
   • Digitalcube Co. Ltd.
   • Nishinomiya / Kobe
   • WordPress 4.7 / 5.0 / 5.3 Core
   contributor
   

   View Slide

3. View Slide

4. View Slide

5. ͳ Μ ͷ ͨ Ί ʹ
   Wo rd P re s s Λ ࢖ ͬͯ ͍ · ͢ ͔ ʁ
   

   View Slide

6. Wo rd P re s s Λ ࢖ ͏ ཧ ༝
   • ϒϩά΍χϡʔεαΠτɾECͳͲΛ࡞Γ͍ͨ
   • WebαʔϏεͷج൫ʹ͍ͨ͠
   • ΤΫεςϯγϣϯൢചʢϓϥάΠϯɾςʔϚɾetcʣ
   • ϗεςΟϯά΍ӡ༻อकͰ঎ച͍ͨ͠
   • ্࢘ɾΫϥΠΞϯτʹݴΘΕ͔ͨΒ
   

   View Slide

7. Wo rd P re s s Λ ࢖ ͏ ཧ ༝
   • ൃ৴ʢPublishʣ
   • ։ൃʢDevelopʣ
   • ൢചʢSaleʣ
   • ӡ༻ʢMaintainʣ
   • ্࢘ɾΫϥΠΞϯτʹݴΘΕ͔ͨΒ
   

   View Slide

8. ࣮ ࡍ ͷ ۀ ຿
   • ςʔϚɾϓϥάΠϯͷ։ൃ
   • ίΞ ϝδϟʔΞοϓσʔτͷςετͱຊ൪൓ө
   • ϓϥάΠϯ / ςʔϚͷΞοϓσʔτςετͱຊ൪൓ө
   • PHP / MySQL / Apache / OpenSSLͳͲͷӡ༻อक
   • ʮͳʹ΋ͯ͠ͳ͍ͷʹյΕ·ͨ͠ʯͱ͍͏ి࿩΁ͷରԠ
   

   View Slide

9. ؾ ͕ ͭ ͚ ͹
   ӡ ༻ λ ε Ϋ ͩ Β ͚
   

   View Slide

10. ͳ ʹ ͕ ͓ ͖ ͯ ͍ Δʁ
    • શͯͷ΋ͷ͸࣌ؒͱͱ΋ʹมԽ͢Δ
    • ୭͔͕౿Μͩόά΍੬ऑੑ / ෆศͳ఺Λ୭͔͕मਖ਼͍ͯ͠Δ
    • ʮΑΓྑ͍αΠτΛ࡞ΔͨΊʹαΠτɾهࣄΛߋ৽͢Δʯ
    ʹ> ʮΑΓྑ͍αΠτΛ࡞ΔͨΊʹɺΞοϓσʔτΛϦϦʔε͢Δʯ
    • ӡ༻ΛͪΌΜͱ·Θͤ͹ɺαΠτʢͷཪଆʣ͸ΑΓྑ͘ͳ͍ͬͯ͘
    

    View Slide

11. ͱ ͸ ͍ ͑ ɾ ɾ ɾ
    • Ξοϓσʔτ͸ʮ࢖ͬͨ΋ͷͷ਺ʯʹൺྫ͢Δ
    • αʔόʔ / ϛυϧ΢ΣΞ / CMS / ϓϥάΠϯ / ςʔϚ / npm / etc…
    • ੈքத͔Βू·ΔΧΠθϯΛɺςετ -> σϓϩΠ͢Δ
    • ΧΠθϯͷ෺ྔ࡞ઓ
    

    View Slide

12. ͭ · Δ ͱ ͜ Ζ
    • ӡ༻λεΫ͸ඞཁෆՄܽͱ͍͏͔ͪΌΜͱ΍Ε
    • ͨͩ͠࢖ͬͨ΋ͷͷ਺͚ͩλεΫྔ͕૿͍͑ͯ͘
    • ʮίʔσΟϯάෆཁʯ͸ʮϝϯςෆཁʯͰ͸ͳ͍
    • ʮ΍Βͳ͍ʯͰ͸ͳ͘ʮࣗ෼Ͱ΍Βͣʹࡁ·ͤΔʯ
    

    View Slide

13. ΍ Γ ͨ ͍ ͜ ͱ ʹ ू த ͢ Δ ͨ Ί ʹ ͸ ɺ
    ʮ ࣗ ෼ Ͱ ΍ Β ͳ ͍ ͜ ͱ ʯ Λ ܾ Ί Δ
    

    View Slide

14. ΍ Γ ͨ ͍ ͜ ͱ ͷ ͨ Ί ʹ
    ΍ Ί Δ Λ ܾ Ί Δ
    

    View Slide

15. Ξ ο ϓ σ ʔ τ ର ৅
    Λ ݮ Β ͤ ͹
    ӡ ༻ λ ε Ϋ ͸ ݮ Δ
    

    View Slide

16. ӡ ༻ λ ε Ϋ Λ ޮ ཰ Խ ͢ Δ ͨ Ί ʹ ߟ ͑Δ ͜ ͱ
    • ʮࣗ෼Ͱ΍Δʯ or ʮଞਓʹ΍ͬͯ΋Β͏ʯ or ʮࣙΊΔʯ
    • ࣌ؒΛ࢖͑͹ɺࣗ෼ͰͳΜͱ͔ؤுΕΔ
    • ͓ۚΛग़ͤ͹ɺ୭͔͕Έͯ͘ΕΔ
    • ػೳΛఘΊΕ͹ɺͦ΋ͦ΋ӡ༻͠ͳͯ͘ࡁΉ
    

    View Slide

17. ࣌ ؒ Λ ࢖ ͑ ͹ ɺ ࣗ ෼ Ͱ Ͱ ͖ Δ
    • ஌ࣝΛಘΔͨΊͷ࣌ؒ΋ؚΊͯͷ࿩
    • ؒҧͬͨલఏɾ஌ࣝͰͱΓ͘Ί͹ɺ΋ͪΖΜԕճΓʹͳΔ
    • ݕࡧɾߪೖͯ͠ಘͨ஌ࣝ͸ɺ࠷৽൛͔ʁ
    • ΤϥʔจͱӳޠͷݩυΩϡϝϯτ͕ಡΊΔ͔͕෼ਫྮ
    

    View Slide

18. ͓ ۚ Λ ग़ ͤ ͹ ɺ ୭ ͔ ͕ Έ ͯ͘ Ε Δ
    • ਓΛޏ͏ɺ֎஫͢ΔɺASP / SaaSΛ࢖͏ɺ etc…
    • ࣗ෼Ͱ΍Βͳ͍͜ͱͰɺͦͷ෼ͷ࣌ؒΛු͔ͤΔ
    • Ҡৡ͢ΔͨΊͷ४උίετ͸ඞਢ
    • ਓʹཔΉɹɹɹɿ ϫʔΫϑϩʔͳͲͷೝࣝ߹Θͤ
    • αʔϏεΛ࢖͏ɿ࣮૷Λ࢓༷ʹ߹ΘͤΔ
    

    View Slide

19. ػ ೳ Λ ఘ Ί Ε ͹ ɺ ͦ ΋ ͦ ΋ ӡ ༻ ͠ ͳ ͘ ͯ ྑ ͍
    • ʮͦͷػೳɺຊ౰ʹඞཁͰ͔͢ʁʯ
    • ͋Ε͹͍͍͸͍͍ͩͨ࢖Θͳ͍
    • Only 10% of that extra stuff will ever get used, so you are wasting 90% of your time.
    • ޙͰ࢖͏ͩΖ͏ͱ͍͏༧ଌͷݩʹ࡞ͬͨ΋ͷ͸ɺ࣮ࡍʹ͸10%ఔ౓͔͠࢖ΘΕͳ͍ɻ

    ͕ͨͬͯ͠ɺͦΕʹඅ΍ͨ࣌ؒ͠ͷ90%͸ແବʹͳΔ
    • YAGNI ( You ain’t gonna need it ): ͦΜͳͷඞཁͳ͍ͬͯ
    

    View Slide

20. ʮ ͦ Ε ɺ ຊ ౰ ʹ ඞ ཁ Ͱ ͢ ͔ ʁ ʯ
    • ʮ͋ͬͨΒศར͡Όͳ͍ʯ -> ࣙΊΑ͏
    • ʮཁ๬͸͖ͯΔʯ -> ίʔυΛॻ͔ͣʹ࣮૷ͯ͠ΈΔ
    • Ͳ͏ͯ͠΋ඞཁʹͳͬͨΒɺίʔυΛॻ͍࣮ͯ૷͢Δ
    

    View Slide

21. ʮ S a a S Ͱ ࢼ ͯ͠ ൓ Ԡ Λ ݟ Δ ʯ ͱ ͍ ͏ ͸ ͡ Ί ํ
    • ैྔ՝ۚܥSaaS͸ࣙΊ΍͘͢ɺτϥΠΞϧ͕͋Δ͜ͱ΋ଟ͍
    • ґଘ͠ͳ͍Α͏ʹ૊ΈࠐΊ͹ɺ͙͢ʹࣙΊΔ͜ͱ΋Մೳ
    • ʮ·ͣSaaSͰࢼ͢ʯ -> ʮ෺଍Γͳ͍͔Β࡞Δʯͱ͍͏൑அ
    • ΍Ί΍͍͢ / ࣺͯ΍͍͔͢Βͦ͜ɺΑΓૉૣ͘มԽͰ͖Δ
    

    View Slide

22. Wo rd P re s s Λ Α Γ ศ ར ʹ ͢ Δ
    S a a S / F a a S ׆ ༻ ๏
    

    View Slide

23. Wo rd P re s s ʹ S a a S Λ ͭ ͔ ͏ ϝ Ϧ ο τ
    • WPͷίʔυྔ͕૿͑Δ = ϝϯςφϯεൣғ͕૿͑Δ
    • ίʔυྔͷଟ͍ϓϥάΠϯ / ςʔϚ -> Ξϓσස౓্͕ΔՄೳੑେ
    • SaaSͷAPIΛ࢖͏͜ͱͰɺWPͷதͷίʔυྔΛݮΒ͢
    • APIͷ࢓༷͕มΘΒͳ͚Ε͹ɺWP΁ͷӨڹ͸গͳ͍
    • ϝδϟʔͲ͜Ζ͸͍͍ͩͨϓϥάΠϯ͕͋Δ
    

    View Slide

24. • Χʔυ৘ใͳͲΛStripe͕؅ཧ

    WPʹػີ৘ใΛͳΔ΂࣋ͨͤ͘ͳ͍
    • ఆظࢧ෷͍΍MPͳͲ΋

    APIϕʔεͰ࡞ΕΔ
    • ܾࡁֹʹର͢Δ੥ٻͷΈͷैྔ՝੍ۚ
    ܾࡁγεςϜΛSaaSར༻ʹ͢Δɿ Stripe
    

    View Slide

25. Ϣʔβʔ؅ཧɾೝূܥΛSaaSԽ͢Δɿ Auth0
    • ೝূॲཧΛAuth0Ͱ؅ཧ
    • GoogleͳͲͷγϯάϧαΠϯΦϯ
    • Freeϓϥϯ͋Γͷैྔ՝੍ۚ
    

    View Slide

26. αΠτ಺ݕࡧΛSaaSԽ͢Δɿ Algoria
    • αΠτ಺ݕࡧΛFaaSͰ࣮૷
    • શจݕࡧΛར༻ͨ͠ߴػೳͳݕࡧ
    • Freeϓϥϯ͋Γͷैྔ՝੍ۚ
    

    View Slide

27. AW S / G C P i s n o t “ α ʔ όʔ ԰ ͞ Μ ”
    • ը૾ / ςΩετ / Ի੠ೝࣝAPI
    • ϨίϝϯσʔγϣϯΤϯδϯ / API
    • ϝʔϧ / CDN / ετϨʔδ / Ωϟογϡ
    • ʮཉ͍͠ػೳͷAPIΛఏڙ͢ΔαʔϏεʯͱͯ͠ͷΫϥ΢υϕϯμʔ
    

    View Slide

28. Wo rd P re s s ʹ S a a S Λ ͭ ͔ ͏ σϝ Ϧ ο τ
    • ʮશ͕ͯࢥ͍௨Γʹ͍͘Θ͚Ͱ͸ͳ͍ʯ
    • SaaSଆͷ࢓༷ɾར༻੍ݶɾϓϥϯ੍ݶʹґଘ͢Δ
    • ഁյతมߋ͕ʮશ͘ͳ͍ʯΘ͚Ͱ͸ͳ͍
    • SaaSଆͷো֐ͷר͖ఴ͑Λड͚ΔՄೳੑ
    • ʮαʔϏε͕ऴྃ͢Δʯͱ͍͏Մೳੑ
    

    View Slide

29. S a a S ͱ ͍ ͍ ײ ͡ ʹ ෇ ͖ ߹ ͏
    • ࢼ͚ͩ͢ͳΒ͋·ΓਂೖΓ͠ͳ͍ʢࣙΊΕͳ͘ͳΔʣ
    • ୅ସαʔϏε͕͋Δ͔ɺWP͚ͩͰ΍Δํ๏͕͋Δ͔͸֬ೝ͢Δ
    • ՝ۚ͢Δ
    • ෍ڭͯ͠՝ۚϢʔβʔΛ૿΍͢
    

    View Slide

30. S a a S Λ ࡞ Δ ͨ Ί ʹ
    Wo rd P re s s Λ ར ༻ ͢ Δ
    

    View Slide

31. Wo rd P re s s ͸
    Wo rd P re s s ͱ ͯ͠ ͠ ͔ ࢖ ͑ ͳ ͍ ͷ ͔ ʁ
    

    View Slide

32. G E T / w p - j s o n /
    

    View Slide

33. W P A P I ͱ ͸
    • WordPressͷREST API
    • WordPressͷσʔλʹHTTP APIܦ༝ͰΞΫηεͰ͖Δ
    • Page / PostͳͲͰެ։͞Ε͍ͯΔهࣄ͸ݪଇೝূෆཁ
    • POST / PUT / DELETE΍ඇެ։৘ใ͸ೝূ͕ඞཁ
    • WordPressͷσʔλΛ֎෦͔Βѻ͏͜ͱ͕Ͱ͖Δ
    

    View Slide

34. Wo rd P re s s Λ A P I ͱ ͯ͠ ར ༻ ͢ Δ
    

    View Slide

35. Wo rd P re s s Λ A P I α ʔ όʔ ʹ ͢ Δ
    • HTMLͷඳըΛWordPress֎͔Βߦ͏
    • jQuery / Vue / React / Angular / Ionic / EC Cube / etc…
    • WordPressͷςʔϚɾϓϥάΠϯʹґଘ͠ͳ͍࣮૷͕ՄೳʹͳΔ
    

    View Slide

36. ͳ ͥ Wo rd P re s s Λ A P I α ʔ όʔ ʹ ͢ Δ ͷ ͔
    1. ηΩϡϦςΟڧԽͷͨΊʹWPΛඇެ։ྖҬʹஔ͖͍ͨ
    2. PWA(Progressive Web Application) / SPA(Single Page Application)
    3. ViewͱAppͷαʔόʔΛ෼཭ͯ͠ෛՙΛ෼ࢄ͍ͨ͠
    4. WordPressͷ؅ཧը໘ػೳ͚ͩɺαʔϏεʹར༻͍ͨ͠
    5. etc…
    

    View Slide

37. Static Site Generator(SSG) ͰWordPressΛ࢖͏
    • ϑϩϯτΤϯυք۾Ͱਓؾͷ͋ΔSSG
    • ࣄલʹ੩తԽͯ͠ߴ଎Խ+ෛՙ࡟ݮ
    • ೖߘը໘͸WordPressͷ··
    • Gatsby( React )΍Nuxt( Vue ) ͳͲ
    • ϑϩϯτͱίϯςϯπ؅ཧͷ෼ۀԽ https://www.gatsbyjs.org/packages/gatsby-source-wordpress/
    

    View Slide

38. WordPressΛStatic Site Generatorʹ͢Δ
    • WordPressΛͦͷ··SSGԽ
    • ϑϩϯτΤϯυʹWPςʔϚ͕࢖͑Δ
    • LP / ίʔϙʔϨʔταΠτͳͲ޲͚
    • WordPressͷ؅ཧίετΛ࡟ݮ͢Δ
    • ͨͩ͠ಈతग़ྗʹ͸Ұ޻෉ඞཁ https://www.getshifter.io/japanese/
    

    View Slide

39. Wo rd P re s s Λ 1 S a a S / F a a S ͱ ͯ͠ ݟ Δ
    • REST API͕༻ҙ͞Ε͍ͯΔ
    • Ϣʔβʔ΍ίϯςϯπͷ؅ཧ͕Ͱ͖ΔGUI͕͋Δ
    • ඞཁʹԠͯ͡ϓϥάΠϯ΍ϑοΫ(PHP)Ͱ֦ுͰ͖Δ
    • ʢWPͷʣϚωʔδυαʔϏε΍ӡ༻୅ߦͷબ୒ࢶ͕ଟ͍
    

    View Slide

40. ί ϯ ςϯ π ؅ ཧ ʹ ಛ Խ ͠ ͨ Wo rd P re s s ͱ ͯ͠
    • ࣗࣾαʔϏεͷ͓஌Βͤ΍χϡʔεɾTipsͷ഑৴ج൫ͱͯ͠ͷWP
    • ձһݶఆίϯςϯπͷ഑৴ج൫ͱͯ͠ͷWP
    • Ϣʔβʔ౤ߘΛϨϏϡʔ -> ެ։͢ΔͨΊͷ؅ཧը໘ͱͯ͠ͷWP
    • ίϯςϯπ؅ཧ͚ͩʹϑΥʔΧεͯ͠΋Ϣʔεέʔε͸༷ʑ
    

    View Slide

41. C o n c l u s i o n
    • ӡ༻͸ͪΌΜͱ΍Ζ͏ɻͰ͖ͳ͍ͳΒ՝͔ۚσάϨ͠Α͏
    • SaaS / FaaSΛ࢖͏͜ͱͰɺޮ཰తʹػೳΛ௥Ճ͠Α͏
    • WP APIΛ࢖ͬͯɺWPΛ࢖ͬͨαʔϏεΛߟ͑Α͏
    • WordPressΛ࢖ͬͯɺΈΜͳͰPublishing͠Α͏
    

    View Slide

42. N e e d m o re a b o u t
    W P + W P A P I ?
    

    View Slide

43. 1 5 : 4 5 ~ R o o m A B
    https://2019.tokyo.wordcamp.org/session/diamond05/
    

    View Slide

44. 1 2 / 7 Wo rd C a m p O s a k a 2 0 1 9
    https://2019.osaka.wordcamp.org/
    

    View Slide

45. 1 2 / 7 Wo rd C a m p O s a k a 2 0 1 9
    https://2019.osaka.wordcamp.org/
    

    View Slide

46. #wctokyo #GetShifter
    https://getshifter.io/
    

    View Slide