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

Shifter Headlessと Headless WordPressの紹介

Shifter Headlessと Headless WordPressの紹介

MOONGIFT.dev #1「ヘッドレスCMS」での資料です。

Hidetaka Okamoto

September 29, 2021
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

Transcript

  1. I n t ro d u c t i o n a b o u t
    S h i f t e r H e a d l e s s
    Digitalcube Co. Ltd.

    View full-size slide

  2. https://www.getshifter.io/ja/

    View full-size slide

  3. S h i f t e r
    = Wo rd P re s s H o s t i n g

    View full-size slide

  4. 2 छ ྨ ͷ Wo rd P re s s ϗ ε ς Ο ϯ ά Λ ఏ ڙ
    • WordPressͷ੩తԽϗεςΟϯά
    • WordPressΛͦͷ··੩తԽ
    • ެ։αʔόʔ΍ϏϧυγεςϜ·Ͱ
    All in One Ͱఏڙ
    • “WordPressΛ࢖͍͍ͨ”ํ޲͚
    S h i f t e r S t a t i c S h i f t e r H e a d l e s s
    • ϑϧϚωʔδυϗεςΟϯάWordPress
    • API / ೖߘը໘ͱͯ͠ͷ༻్ʹಛԽ
    • JamstackʹඞཁͳϓϥάΠϯΛ
    ϓϦΠϯετʔϧ & ࣗಈߋ৽
    • “WP API / GraphQL͕ཉ͍͠”ํ޲͚

    View full-size slide

  5. S h i f t e r H e a d l e s s Ͱ
    ར ༻ Մ ೳ ͳ ϓ ϥ άΠ ϯ
    • GitHubͰϦετΛެ։த
    https://github.com/digitalcube/
    shifter-headless-plugins/blob/main/
    PLUGINS.md
    • Ϣʔβʔ͔Βͷཁ๬Ͱɺ
    ϓϥάΠϯΛ௥Ճ͢Δ͜ͱ΋͋Δ
    • PHPͷεχϖοτ΋
    ؅ཧը໘͔Β௥ՃՄೳ

    View full-size slide

  6. S h i f t e r H e a d l e s s ͸
    7 ೔ ؒ ແ ྉ τ ϥ Π Ξϧ ༗
    https://go.getshifter.io/register/

    View full-size slide

  7. Wo rd P re s s Λ H e a d l e s s ʹ ࢖ ͏ ϝ Ϧ ο τ

    View full-size slide

  8. Wo rd P re s s Λ H e a d l e s s ʹ ࢖ ͏ ϝ Ϧ ο τ
    WordPressΛ
    ࢖͏͜ͱ͕Ͱ͖Δ

    View full-size slide

  9. Wo rd P re s s Λ H e a d l e s s ʹ ࢖ ͏ σϝ Ϧ ο τ

    View full-size slide

  10. Wo rd P re s s Λ H e a d l e s s ʹ ࢖ ͏ σϝ Ϧ ο τ
    WordPressΛ
    ࢖Θͳ͍ͱ͍͚ͳ͍

    View full-size slide

  11. Wo rd P re s s Λ H e a d l e s s ʹ ࢖ ͏ ཧ ༝
    • ʮࠓ͋ΔWordPressʯΛ࠷େݶ׆༻Ͱ͖Δ
    • ӡ༻ऀʢϥΠλʔ΍ฤूऀʣͷ௥ՃֶशίετΛݮΒͤΔ
    • େن໛ͳOSSΤίγεςϜͷԸܙΛड͚΍͍͢

    View full-size slide

  12. Wo rd P re s s Λ H e a d l e s s ʹ ࢖ ͏ ΂ ͖ Ͱ ͳ ͍ ཧ ༝
    • ׬શʹ৽نͷίϯςϯπΛ্ཱͪ͛Δ
    • ӡ༻ऀʢϥΠλʔ΍ฤूऀʣ͕WordPressΛ஌Βͳ͍ɾ޷·ͳ͍
    • ܧଓతʹ։ൃɾӡ༻Λߦ͏༧ఆ͕ͳ͍
    ʢҰ౓੩తԽͨ͠Βɺͦͷ··ߋ৽͠ͳ͍Մೳੑ͕ߴ͍ʣ

    View full-size slide

  13. େ ن ໛ ͳ O S S Τ ί γε ςϜ ͱ ͯ͠ ͷ Wo rd P re s s
    • ࠃࡍతͳOpen Source CMSͷ1ͭͰɺϓϨΠϠʔ΋ଟ͍
    • ʢ฼਺͕ଟ͍ͷͰʣHeadless / Jamstackํ໘ͰͷࢀՃऀ΋ଟ਺ଘࡏ
    • ᴈ໌ظ͔Βͷࣄྫ΍φϨοδɺͦΕΛݩʹͨ͠πʔϧ΋ଟ͍
    • ࢀՃऀ͕ଟ͍෼ɺʮ1ຊಓʯͰ͸ͳ͍͜ͱʹ͸ཁ஫ҙ

    View full-size slide

  14. W P A P I Λ ࢖ ͬ ͨ α Π τ ͸ গ ͳ ͘ ͳ ͍
    • npmjs.com΋Headless WordPress
    https://humanmade.com/what-we-do/projects/npm/
    • NY Times΋Ұ෦Ͱ࠾༻

    View full-size slide

  15. J a v a S c r i p t F r a m e w o r k f o r Wo rd P re s s
    • Gatsby: WP Gatsby + WP GraphQL
    https://www.gatsbyjs.com/guides/wordpress/
    • Next.js : Faust.js (using WP GraphQL)
    https://faustjs.org/

    View full-size slide

  16. H e a d l e s s Wo rd P re s s ͷ ஫ ҙ ఺
    • ӡ༻ऀ͕ʮͰ͖Δͱࢥ͍ͬͯΔ͜ͱʯ͕Ͱ͖ͳ͍͜ͱ͕͋Δ
    -> ϓϥάΠϯΛ࢖ͬͨίϯςϯπͷ௥Ճ΍ΧελϚΠζ
    • ʮมΘΒͣ࢖͑ΔʯΏ͑ʹɺ
    ʮͰ͖ͳ͘ͳͬͨ͜ͱʯ΁ͷෆຬ͕ੜ·ΕΔ
    • ࣄલʹʮมΘΒͳ͍͜ͱʯͱʮมΘΔʢͰ͖ͳ͘ͳΔʣ͜ͱʯΛ
    ؔ܎ऀʹઆ໌͠ɺυΩϡϝϯτԽ͢Δඞཁ͕͋Δ

    View full-size slide

  17. C o n c l u s i o n
    • Headless WordPress͸ɺ
    ։ൃऀ΋ӡ༻ऀ΋ࣗ෼ͷख׳ΕͨπʔϧͰͷ࢓ࣄΛՄೳʹ͢Δ
    • πʔϧ΍ϓϥάΠϯɺίϛϡχςΟͰͷࣄྫڞ༗Λ׆͔͠ɺ
    ։ൃ΍ֶशίετΛݮΒ͢͜ͱ͕ૂ͍΍͍͢
    • ʮWordPressΛAPIαʔϏεѻ͍͢ΔʯίϯςΩετεΠον͕
    ӡ༻ޙͷτϥϒϧʹͳΓ΍͍͢ͷͰ஫ҙ͢Δ

    View full-size slide