JamstackͰ ͸͡ΊΔShopify Shopify UC Kansai vol.1 Hidetaka Okamoto #ShopifyUC

Target Developer Agency #ShopifyUC

TL;DR • ShopifyͰͷαΠτߏங͸Liquidه๏͔APIར༻͕ϝΠϯ • APIར༻ͷ৔߹ɺJamstackʹ͢ΔͱJavaScript͚ͩͰ࡞ΕΔ • Liquidه๏Λ֮͑ͯ༗ྉThemeൢചΛΊ͟͢ํ๏΋ • Shopifyύʔτφʔʹͳͬͯ·ͣ͸ಈ͔ͯ͠ΈΑ͏ #ShopifyUC

Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ • What’s your favorite style to make the store? #ShopifyUC

Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ • What’s your favorite style to make the store? #ShopifyUC

ߏஙํ๏1 ςʔϚΛߪೖ͢Δ • ετΞ͔ΒΠϯετʔϧ • ແྉ൛Ͱ΋ͦͦ͜͜ߴػೳ • ΧελϚΠβʔతͳػೳ΋ • ΧελϚΠζͷࣗ༝౓ʹ੍ݶ • αϙʔτ͕ӳޠ཰ߴΊ(༗ྉTheme) • Shopify LiteͰ͸ͦ΋ͦ΋࢖͑ͳ͍ #ShopifyUC

ߏஙํ๏2 ςʔϚΛࣗ࡞͢Δ • Liquidه๏ + JavaScriptͰ࡞ΕΔ • Tutorial΍ίʔυྫ͕ଟ͍ • ༗ྉςʔϚൢച΋໨ࢦͤΔ • Liquidه๏ʹೃછΊΔ͔൱͔͕෼ਫྮ • Sample͸ଟ͍͕ɺݱঢ়ӳޠ཰ߴΊ • Shopify LiteͰ͸ͦ΋ͦ΋࢖͑ͳ͍ #ShopifyUC

ߏஙํ๏3 APIΛ࢖ͬͯ֎෦ߏங • Shopify API(REST / GraphQL)Λར༻ • LiteͰ΋ϑϩϯτΤϯυ͕࡞ΕΔ • JavaScriptͷจ຺ͰߏஙՄೳ • JamstackͰαΠτ͕࡞ΕΔ͔͕෼ਫྮ • Shopifyͷ֎ʹͳΔͷͰࢿྉ͸ΑΓগͳ͍ • ௕ظతʹอकӡ༻͢ΔલఏʹͳΓ͕ͪ

ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • σβΠϯʹ߆Βͳ͍ɾ·ͣ΍Δ͜ͱ͕໨తͳΒແྉςʔϚ • ࣾ಺Ͱ։ൃ͕೉͍͠ͳΒɺ༗ྉςʔϚΛ୳ͯ͠ߪೖ • Liquidه๏ͰͷςʔϚ੍࡞Λ֮͑ͯ༗ྉςʔϚൢചΛ໨ࢦ͢ • Jamstackܥ͕ಘҙͳΒ͹Shopify Liteʹ੾Γସ͑ͯίετμ΢ϯ #ShopifyUC

Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ • What’s your favorite style to make the store? #ShopifyUC

Shopify Perners • ShopifyΞΧ΢ϯτͱ͸ผʹొ࿥ • ແྉͰ։࢝Մೳ • ΞϑΟϦΤΠτͳͲ΋ • Dev༻ͷγϣοϓ͕ແྉͰ࡞ΕΔ https://www.shopify.jp/partners #ShopifyUC

#ShopifyUC

https://YOUR-SHOP-NAME.myshopify.com/admin/apps/private/new

https://YOUR-SHOP-NAME.myshopify.com/admin/apps/private/new αΠτͷAPIܥ͸αΠτͷ[ΞϓϦ؅ཧ]͔Β • ύʔτφʔͷ؅ཧը໘ʹ΋ʮΞϓϦ؅ཧʯ͸͋Δ͕ɺͦΕ͸ShopifyΞϓϦ޲͚ • ετΞϑϩϯτAPIͱಉը໘ʹ͋ΔʮAdmin APIʯ΋ShopifyΞϓϦ޲͚ • ্ه2ͭ͸ShopifyͷΞϓϦΛ࡞Δ࣌ʹ࢖͏APIͷઃఆͱ֤छ৘ใ • ݖݶ͕޿͍ͷͰɺؒҧͬͯ΢ΣϒαΠτߏஙʹ࢖͏ͱɾɾɾ • ʮStoreͷFrontendͷͨΊͷAPIʯ= ʮετΞϑϩϯτAPIʯͱ֮͑Α͏ • ετΞϑϩϯτAPI͸Apple Pay΍Androidͷܾࡁʹ΋ରԠՄೳʢMobile Buy SDKʣ #ShopifyUC

Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ • What’s your favorite style to make the store? #ShopifyUC

https://www.gatsbyjs.com/ #ShopifyUC

https://www.gatsbyjs.com/ Gatsby -> Reactϕʔεͷ੩తαΠτδΣωϨʔλʔ • API΍ϑΝΠϧ͔ΒσʔλΛऔΓࠐΈɺ੩తͳHTMLΛ࡞੒͢Δπʔϧͷ1ͭ • ੩తαΠτͱͯ͠ެ։͢ΔͷͰɺαʔόʔ୅Λ྿Ձʹ͠΍͍͢ • ϑϩϯτΤϯυͷίʔυ͸JavaScript (React)Ͱ࣮૷ • ϓϥάΠϯγεςϜ͕͋Γɺ༗໊Ͳ͜Ζͷσʔλ͸΄΅ϊʔίʔυͰऔΓࠐΊΔ • औΓࠐΜͩσʔλΛར༻͢ΔͷʹɺGraphQL͕ඞཁɻ • ʮWebαΠτΛReactͰ࡞Γ͍ͨʯ࣌ʹߴ֬཰Ͱީิʹग़Δπʔϧͷ1ͭ #ShopifyUC

gatsby-config.jsʹ઀ଓ৘ใΛهड़ module.exports = { siteMetadata: { title: `Gatsby Typescript Starter`, }, plugins: [ `gatsby-plugin-typescript`, { resolve: `gatsby-source-shopify`, options: { // ετΞͷυϝΠϯ shopName: “example.myshopify.com”, // ετΞϑϩϯτAPIͷΞΫηετʔΫϯ accessToken: “xxxxxxxxxxxxxxxxxx”, }, }, ], } #ShopifyUC

GraphQLͰඞཁͳσʔλ͚ͩऔಘ͢Δ const result = await graphql(` query { allShopifyProduct(sort: { fields: [title] }) { edges { node { title images { originalSrc } shopifyId handle priceRange { maxVariantPrice { amount } minVariantPrice { amount } } } } } } `)} #ShopifyUC

ͲΜͳσʔλ͕ͱΕΔ͔ςετͰ͖Δػೳ͖ͭ #ShopifyUC

GraphQLͰϩʔυ ReactͰHTMLԽ import * as React from 'react' import Link from 'gatsby-link' import { graphql } from "gatsby" import DefaultLayout from '../layouts' const Page = ({data}: any) => { return ( ) } • APIΛ௚઀ୟ͔ͳ͍ • ͢΂ͯ͸GraphQLܦ༝ • ෳ਺ͷαʔϏε / APIΛར ༻ͨ͠৔߹ʹศརͳ࢓૊ #ShopifyUC

ྫ͑͹͜Μͳ࢖͍ํ • ͢Ͱʹ͋ΔWordPressαΠτͷσʔ λ΋औΓࠐΜͰ࢖͏ • ग़ళ৘ใͳͲɺ GoogleεϓϨουγʔτͰ؅ཧ͠ ͍ͯΔ৘ใ΋ಡΈࠐΜͰදࣔ • ࠓ࢖͍ͬͯΔπʔϧ΋ͦͷ··׆༻

Χʔτܥͷॲཧ͸shopify-buyΛར༻͢Δ

npm i -S \ shopify-buy import * as React from "react" import {buildClient} from 'shopify-buy' import { Button } from 'antd' … const client = buildClient({ storefrontAccessToken: ‘your_token’, domain: ‘example.myshopify.com', }) const handleCheckout = React.useCallback((variantId: string) => { client.checkout.create() .then(async(checkout) => { const checkoutId = checkout.id await client.checkout.addLineItems( checkoutId, [{ variantId, quantity: 1 }] ) // @ts-expect-error window.open(checkout.webUrl) }) .catch(e => { console.log(e) }) }, [client]) • JavaScriptͰΧʔτૢ࡞ • ௚ײతͳϝιουͰ ShopifyͷAPIΛૢ࡞Մೳ • TypeScriptͳΒ @types/shopify-buyΛ #ShopifyUC

JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯ͸ਖ਼௚ͨͩͷ߻໰ • Jamstack / Next.js / Nuxt.js / Gatsby / GridsomeͳͲʹ׳Ε͍ͯΔਓʹ͸࿕ใ • ʮطଘͷϦιʔεɾϊ΢ϋ΢Λ࢖ͬͯShopifyͷαΠτߏங͕͍͔ͨ͠൱͔ʯͷબ୒ • طଘͷϦιʔεɾϊ΢ϋ΢͕ͳ͍৔߹ʹ͸ݫ͍͠ • σʔλιʔε͕͋ͪͪ͜ʹࢄΒ͹͍ͬͯΔ৔߹ʹ΋༗༻ʢಛʹGatsby / Gridsomeʣ • σʔλऩू૚ͱॲཧ૚͕෼͔ΕΔͷͰɺஈ֊తͳϚΠάϨͳͲ΋ൺֱత༰қʹ #ShopifyUC

Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ • What’s your favorite style to make the store? #ShopifyUC

EC΍Δ͚ͩͳΒ STORES΍BASE΋͋Δ • STORES / BASE͸ແྉ • UI΋αϙʔτ΋೔ຊ޲͚ • ༗ྉϓϥϯͰ΋Shopifyͱಉ౳͔ ͦΕΑΓ྿Ձʹ࢖͑Δ • ͦΕͰ΋ShopifyΛ࢖͏ͷ͸ʁ

ٸ੒௕͢ΔSaaSͷڞ௨߲ɿ APIΤίϊϛʔ

API͕ ։͔Ε͍ͯΔ৔߹ • ίʔυΛॻ͚͹ɺͳΜͰ΋Ͱ͖Δ • ػೳʹΑͬͯαϙʔτઌ͕มΘΔ͜ͱ΋ • ࠨ + ʮͲ͏ศརʹ֦ு͍͔ͯ͘͠ʯ • ࠨ + ֦ுػೳͷ։ൃൢച API͕ ։͔Ε͍ͯͳ͍৔߹ • Ͱ͖Δ͜ͱ = ϕϯμʔͷϦϦʔε಺༰ • ͳʹ͔͋Ε͹ϕϯμʔʹରԠґཔ • ʮγεςϜΛͲ͏ૢ࡞͢Δ͔ʯ • ӡ༻୅ߦ / ઃఆ୅ߦͱͯ͠ͷۀ຿ #ShopifyUC

Share the knowledge ʢࣦഊஊ΋ʂʣ

No content

ॻ͘ / ࿩͢͜ͱͰΑΓਂֶ͍ͼʹͳΔ • ࢼ͢ɾಈ͔͢ஈ֊Ͱ͸ʮͳͥಈ͍͔ͨɾͳࣦͥഊ͔ͨ͠ʯΛߟ͑ʹ͍͘ • ϫʔΫγϣοϓͰ৮ͬͯຬ଍ͯ͠ɺͦͷޙ৮͍ͬͯͳ͍΋ͷɻ͋Γ·ͤΜ͔ʁ • Ξ΢τϓοτ͢ΔͨΊʹ͸ɺʮ΍ͬͨ͜ͱΛݴޠԽ͢Δʯඞཁ͕͋Δ • ॻ͖ग़ͯ͠ΈΔ͜ͱͰɺʮ࣮͸Θ͔͍ͬͯͳ͔ͬͨ͜ͱʯ͕ݟ͑ͯ͘Δ • ʮΈΜͳॻ͔ͳ͍ʯ͚ͩͰɺʮΈΜͳࣦഊ֮ͯ͑ͯ͠Δʯ • ࣦഊΛॻ͘ = ࣦഊͷৼΓฦΓ͕Ͱ͖͍ͯΔ • ͳΜͰ΋͍͍͔Βɺࢼͨ͜͠ͱͷৼΓฦΓΛPublishing͠Α͏ʂ #ShopifyUC

ͦ͏͍͑͹ࠓ೔͸͜Μͳ΋ͷ͕͋Γ·ͨ͠Ͷ #ShopifyUC #ShopifyUC

ͦ͏͍͑͹ࠓ೔͸͜Μͳ΋ͷ͕͋Γ·ͨ͠Ͷ #ShopifyUC #ShopifyUC

ͦΖͦΖ͜Μͳ΋ͷ΋͋Γ·ͨ͠Ͷ #ShopifyUC

JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯ͸ਖ਼௚ͨͩͷ߻໰ • Jamstack / Next.js / Nuxt.js / Gatsby / GridsomeͳͲʹ׳Ε͍ͯΔਓʹ͸࿕ใ • ʮطଘͷϦιʔεɾϊ΢ϋ΢Λ࢖ͬͯShopifyͷαΠτߏங͕͍͔ͨ͠൱͔ʯͷબ୒ • طଘͷϦιʔεɾϊ΢ϋ΢͕ͳ͍৔߹ʹ͸ݫ͍͠ • σʔλιʔε͕͋ͪͪ͜ʹࢄΒ͹͍ͬͯΔ৔߹ʹ΋༗༻ʢಛʹGatsby / Gridsomeʣ • σʔλऩू૚ͱॲཧ૚͕෼͔ΕΔͷͰɺஈ֊తͳϚΠάϨͳͲ΋ൺֱత༰қʹ #ShopifyUC

#ShopifyUC