Save 37% off PRO during our Black Friday Sale! »

Shifter Headlessと Headless WordPressの紹介

Shifter Headlessと Headless WordPressの紹介

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

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto
PRO

September 29, 2021
Tweet

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.
  2. https://www.getshifter.io/ja/

  3. S h i f t e r = Wo rd

    P re s s H o s t i n g
  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͕ཉ͍͠”ํ޲͚
  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ͷεχϖοτ΋ ؅ཧը໘͔Β௥ՃՄೳ
  6. S h i f t e r H e a

    d l e s s ͸ 7 ೔ ؒ ແ ྉ τ ϥ Π Ξϧ ༗ https://go.getshifter.io/register/
  7. Wo rd P re s s Λ H e a

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

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

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

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

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

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

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

    Π τ ͸ গ ͳ ͘ ͳ ͍ • npmjs.com΋Headless WordPress https://humanmade.com/what-we-do/projects/npm/ • NY Times΋Ұ෦Ͱ࠾༻
  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/
  16. H e a d l e s s Wo rd

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

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