Shifter Headlessと Headless WordPressの紹介

by Hidetaka Okamoto

Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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͕ཉ͍͠”ํ޲͚

Slide 5

Slide 5 text

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ͷεχϖοτ΋ ؅ཧը໘͔Β௥ՃՄೳ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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