あなたのWordPressサイトをJAMstackにする話 / charity-okinawa-20200621

Transcript

1. ͋ ͳ ͨ ͷ Wo rd P re s s

   αΠ τ Λ J A M s t a c k ʹ ͢ Δ ࿩ C h a r i t y C o n f e re n c e O k i n a w a 2 0 2 0 #

2. C o n c l u s i o n

   • WordPressΛJAMstackͷA(Api)ͱͯ͠ѻ͏ • ʮطଘͷࢿ࢈ʯͱʮू߹஌ʯΛ࠷େݶʹ׆༻͠Α͏ • CMSΛ as a ServiceͳAPIͱͯ͠ӡ༻Ͱ͖Δ͔൱͔ • ʮ͍͍ͱ͜औΓʯͰշదͳDXΛʂ

3. A g e n d a • Why should we

   use WordPress? • How can we use it in JAMstack? • Tips of WordPress with JAMstack

4. A g e n d a • Why should we

   use WordPress? • How can we use it in JAMstack? • Tips of WordPress with JAMstack

5. Wo rd P re s s ͸ J A M

   s t a c k ͷ ର ۃ ͔ ʁ • ✅ Build with a server-side CMS • ✅ A monolithic server-run web app • ❌ A single page app ✅ > 0 => NOT JAMstack

6. Wo rd P re s s ͸ J A M

   s t a c k ͷ ର ۃ ͔ ʁ • ✅ Build with a server-side CMS • ✅ A monolithic server-run web app • ❌ A single page app ✅ > 0 => NOT JAMstack

7. Wo rd P re s s c a n b

   e “ A ” • WordPress has a REST API “WP API” • JavaScript͔ΒWP APIΛར༻ͯ͠ MarkupΛϏϧυ͢Δ • Ϣʔβʔ͸࢖͍׳ΕͨWordPressͰίϯςϯπΛ؅ཧ • ։ൃऀ͸ϑϩϯτΛJAMstackͰ։ൃɾӡ༻

8. J A M s t a c k w i

   t h Wo rd P re s s • ✅ ͢ͰʹWordPressͰ͋Δఔ౓ӡ༻࣮੷ɾܦݧ͕͋Δ • ✅ ϑϩϯτͷ։ൃମ੍͚ͩ࡮৽͍ͨ͠ • ❓ ίϯςϯπΑΓWP΍ϛυϧ΢ΣΞͷอकߋ৽ͷํ͕ଟ͍ • ❌ ࠷୹࣌ؒͰαΠτΛ্ཱ͍ͪ͛ͨ • ❌ JavaScript͕ۤख

9. A g e n d a • Why should we

   use WordPress? • How can we use it in JAMstack? • Tips of WordPress with JAMstack

10. h t t p s : / / w w

    w. g a t s b y j s . o rg /

11. W P A P I Λ σ ʔ λ ι

    ʔε ʹ ͢ Δ ϓ ϥ άΠ ϯ h t t p s : / / w w w. g a t s b y j s . o rg / p a c k a g e s / g a t s b y - s o u rc e - w o rd p re s s /

12. gatsby-config.js module.exports = { plugins: [{ resolve: "gatsby-source-wordpress", options: {

    baseUrl: "demo.wp-api.org", useACF: false, perPage: 100, searchAndReplaceContentUrls: { sourceUrl: "https://demo.wp-api.org", replacementUrl: “https://getshifter.io”, }, includedRoutes: [ "**/posts", "**/pages", ], … • WP઀ଓ৘ใΛఆٛ • ACFʹ΋ରԠ • URLஔ׵΍ೝূ΋OK

13. gatsby-node.js - 1 export const createWPPosts = async ({ page,

    actions, graphql }) => { const { data: { allWordpressPost: { edges: posts } }} = await graphql(` query WP_POSTS { allWordpressPost { edges { node { title slug id } } } }`) • GraphQL ͔Βσʔλऔಘ • εΩʔϚ͸ ϓϥάΠϯ࢓༷ʹै͏ • allWordpressPagesͰ ݻఆϖʔδ

14. gatsby-node.js - 2 posts.forEach(({node: post}) => { const path =

    post.slug console.log(`Post created: ${path}`) actions.createPage({ path, component: resolve("./src/pages/ posts.tsx"), context: Object.assign({}, page, { slug: post.slug, id: post.id }) }) }) • σʔλΛݩʹϖʔδΛ ಈతੜ੒ • contextͰίϯϙʔωϯτ ΁σʔλΛ౉͢

15. src/pages/ posts.jsx const Component = (props) => { return (

    <Layout> <Helmet title={props.data.wordpressPost.title} /> <Jumbotron title={props.data.wordpressPost.title} /> <Main> <h1 dangerouslySetInnerHTML={{__html: props.data.wordpressPost.title}} /> <section dangerouslySetInnerHTML={{__html: props.data.wordpressPost.content}} /> <Link to='/'>Home</Link> </Main> </Layout> ) } export default Component export const pageQuery = graphql` query SinglePost($slug: String) { wordpressPost(slug: { eq: $slug }) { id slug title content } } ` • ϖʔδ༻ͷίϯςϯπΛ GraphQLͰऔಘ • औಘͨ͠σʔλΛݩʹ ReactͰViewΛ࡞Δ

16. J A M s t a c k w i

    t h Wo rd P re s s i s e a s y ? • Ϗϧυ࣌ʹWP APIͷσʔλΛbulk getͯ͠͸ΊࠐΉελΠϧ • ଞͷdata source(CMS / MDͳͲ)ͱ͋·ΓมΘΒͳ͍ • sourceϓϥάΠϯͷઃఆͱGraphQLεΩʔϚʹ׳ΕΕ͹OK • αϯϓϧΛGitHubʹެ։த https://bit.ly/2Bj6B57

17. Another way WordPressΛ ͦͷ··੩తԽ • Shifter Static • WordPressαΠτΛ੩తԽ •

    WPͷϫʔΫϑϩʔͰ Static Siteͱͯ͠ӡ༻Ͱ͖Δ

18. A g e n d a • Why should we

    use WordPress? • How can we use it in JAMstack? • Tips of WordPress with JAMstack

19. J A M s t a c k w i

    t h Wo rd P re s s ͷ ϋϚ Γ Ͳ ͜ Ζ • ೔ຊޠURL͸΄ͱΜͲͷSSG͕ඇରԠͳͷͰɺWPଆͰมߋ͢Δ • WPͷύʔϚϦϯΫ͸σϑΥϧτʢ?p=123ʣʹඞͣมߋ͢Δ • WPςʔϚ͸blankܥਪ঑ʢWPͰͷදࣔ͸֬ೝͤ͞ͳ͍ʣ • هࣄߋ৽ɾެ։࣌ʹϏϧυΛൃՐ͢Δ࢓૊Έ͸ඞਢ

20. W P ͔ Β Ϗ ϧ υ We b h

    o o k Λ ί ʔϧ ͢ Δ ϓ ϥ άΠ ϯ h t t p s : / / j a . w o rd p re s s . o rg / p l u g i n s / w p - j a m s t a c k - d e p l o y m e n t s /

21. Ͱɺ Wo rd P re s s ͷ ؅ ཧ

    ͸ Ͳ ͏ ͢ Δ ͷ ʁ • දࣔܥͷ࣮૷Λ֎͢͜ͱͰ؅ཧର৅͸ҰԠݮΔ • ͱ͸͍͑ϛυϧ΢ΣΞ΍ίΞͷߋ৽͸·ͩ࢒Δ • ཧ૝͸ϑϧϚωʔδυͳWordPressϗεςΟϯάͷར༻ • WordPress.com / Shifter Headless / etc…

22. Shifter Headless • wp-adminͱAPIʹಛԽ • ϑϧϚωʔδυWordPress • GraphQLʹ΋ରԠ

23. [ A p p e n d i x ]

    ඇ ެ ։ ه ࣄ Λ ϓ Ϩ Ϗϡ ʔ ͢ Δ ํ ๏ • SSGͩͱϏϧυ࣌ؒͷΦʔόʔϔου͕ؾʹͳΓ΍͍͢ • SSGͷͱ͖͸ɺgatsby developͳͲͰϩʔΧϧىಈ͕खܰ • Next / NuxtͰNode.jsαʔόʔʹϓϨϏϡʔαΠτΛσϓϩΠ • ϓϨϏϡʔαΠτͷΈWP APIʹBASIC AuthͷϦΫΤετΛ౤͛Δ

24. N e x t s t e p o f

    J A M s t a c k w i t h Wo rd P re s s • ෳ਺ͷσʔλιʔεΛѻ͑ΔϝϦοτΛ࠷େԽ͢Δ • ʮಘҙͳ͜ͱ͸ɺಘҙͳαʔϏεʹʯ • ίϯςϯπ؅ཧɿWordPress / etc.. ݕࡧɾαδΣετɿAlgoria / Elasticsearch / etc.. ϨίϝϯυɾCRMɿGA / Amazon Pinpoint / etc.. • ʮJAMstack or WordPressʯ -> ʮJAMstack AND WP AND …ʯ

25. C o n c l u s i o n

    • WordPressΛJAMstackͷA(Api)ͱͯ͠ѻ͏ • ʮطଘͷࢿ࢈ʯͱʮू߹஌ʯΛ࠷େݶʹ׆༻͠Α͏ • CMSΛ as a ServiceͳAPIͱͯ͠ӡ༻Ͱ͖Δ͔൱͔ • ʮ͍͍ͱ͜औΓʯͰշదͳDXΛʂ