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