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

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

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

Hidetaka Okamoto
PRO

November 02, 2019
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

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