あなたの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
   #
   

   View Slide

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

   View Slide

3. A g e n d a
   • Why should we use WordPress?
   • How can we use it in JAMstack?
   • Tips of WordPress with JAMstack
   

   View Slide

4. A g e n d a
   • Why should we use WordPress?
   • How can we use it in JAMstack?
   • Tips of WordPress with JAMstack
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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Ͱ։ൃɾӡ༻
   

   View Slide

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

   View Slide

9. A g e n d a
   • Why should we use WordPress?
   • How can we use it in JAMstack?
   • Tips of WordPress with JAMstack
   

   View Slide

10. h t t p s : / / w w w. g a t s b y j s . o rg /
    

    View Slide

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 /
    

    View Slide

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
    

    View Slide

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Ͱ
    ݻఆϖʔδ
    

    View Slide

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Ͱίϯϙʔωϯτ
    ΁σʔλΛ౉͢
    

    View Slide

15. src/pages/
    posts.jsx
    const Component = (props) => {
    return (
    
    
    
    
    props.data.wordpressPost.title}} />
    props.data.wordpressPost.content}} />
    Home
    
    
    )
    }
    export default Component
    export const pageQuery = graphql`
    query SinglePost($slug: String) {
    wordpressPost(slug: { eq: $slug }) {
    id
    slug
    title
    content
    }
    }
    `
    • ϖʔδ༻ͷίϯςϯπΛ
    GraphQLͰऔಘ
    • औಘͨ͠σʔλΛݩʹ
    ReactͰViewΛ࡞Δ
    

    View Slide

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
    

    View Slide

17. Another way
    WordPressΛ
    ͦͷ··੩తԽ
    • Shifter Static
    • WordPressαΠτΛ੩తԽ
    • WPͷϫʔΫϑϩʔͰ
    Static Siteͱͯ͠ӡ༻Ͱ͖Δ
    

    View Slide

18. A g e n d a
    • Why should we use WordPress?
    • How can we use it in JAMstack?
    • Tips of WordPress with JAMstack
    

    View Slide

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Ͱͷදࣔ͸֬ೝͤ͞ͳ͍ʣ
    • هࣄߋ৽ɾެ։࣌ʹϏϧυΛൃՐ͢Δ࢓૊Έ͸ඞਢ
    

    View Slide

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 /
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 …ʯ
    

    View Slide

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

    View Slide