͋ ͳ ͨ ͷ 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 #

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

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

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

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

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

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

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

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

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

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 /

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

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

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

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

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

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

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

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

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

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 /

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

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

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

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

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