JamstackではじめるShopify / shopify-uc-kansai-202011

Transcript

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

2. Target Developer Agency #ShopifyUC

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

4. Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ

   • What’s your favorite style to make the store? #ShopifyUC

5. Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ

   • What’s your favorite style to make the store? #ShopifyUC

6. ߏஙํ๏1 ςʔϚΛߪೖ͢Δ • ετΞ͔ΒΠϯετʔϧ • ແྉ൛Ͱ΋ͦͦ͜͜ߴػೳ • ΧελϚΠβʔతͳػೳ΋ • ΧελϚΠζͷࣗ༝౓ʹ੍ݶ

   • αϙʔτ͕ӳޠ཰ߴΊ(༗ྉTheme) • Shopify LiteͰ͸ͦ΋ͦ΋࢖͑ͳ͍ #ShopifyUC

7. ߏஙํ๏2 ςʔϚΛࣗ࡞͢Δ • Liquidه๏ + JavaScriptͰ࡞ΕΔ • Tutorial΍ίʔυྫ͕ଟ͍ • ༗ྉςʔϚൢച΋໨ࢦͤΔ

   • Liquidه๏ʹೃછΊΔ͔൱͔͕෼ਫྮ • Sample͸ଟ͍͕ɺݱঢ়ӳޠ཰ߴΊ • Shopify LiteͰ͸ͦ΋ͦ΋࢖͑ͳ͍ #ShopifyUC

8. ߏஙํ๏3 APIΛ࢖ͬͯ֎෦ߏங • Shopify API(REST / GraphQL)Λར༻ • LiteͰ΋ϑϩϯτΤϯυ͕࡞ΕΔ •

   JavaScriptͷจ຺ͰߏஙՄೳ • JamstackͰαΠτ͕࡞ΕΔ͔͕෼ਫྮ • Shopifyͷ֎ʹͳΔͷͰࢿྉ͸ΑΓগͳ͍ • ௕ظతʹอकӡ༻͢ΔલఏʹͳΓ͕ͪ

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

   #ShopifyUC

10. Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ

    • What’s your favorite style to make the store? #ShopifyUC

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

    https://www.shopify.jp/partners #ShopifyUC

12. #ShopifyUC

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

14. 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

15. Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ

    • What’s your favorite style to make the store? #ShopifyUC

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

17. https://www.gatsbyjs.com/ Gatsby -> Reactϕʔεͷ੩తαΠτδΣωϨʔλʔ • API΍ϑΝΠϧ͔ΒσʔλΛऔΓࠐΈɺ੩తͳHTMLΛ࡞੒͢Δπʔϧͷ1ͭ • ੩తαΠτͱͯ͠ެ։͢ΔͷͰɺαʔόʔ୅Λ྿Ձʹ͠΍͍͢ • ϑϩϯτΤϯυͷίʔυ͸JavaScript

    (React)Ͱ࣮૷ • ϓϥάΠϯγεςϜ͕͋Γɺ༗໊Ͳ͜Ζͷσʔλ͸΄΅ϊʔίʔυͰऔΓࠐΊΔ • औΓࠐΜͩσʔλΛར༻͢ΔͷʹɺGraphQL͕ඞཁɻ • ʮWebαΠτΛReactͰ࡞Γ͍ͨʯ࣌ʹߴ֬཰Ͱީิʹग़Δπʔϧͷ1ͭ #ShopifyUC

18. 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

19. GraphQLͰඞཁͳσʔλ͚ͩऔಘ͢Δ const result = await graphql(` query { allShopifyProduct(sort: {

    fields: [title] }) { edges { node { title images { originalSrc } shopifyId handle priceRange { maxVariantPrice { amount } minVariantPrice { amount } } } } } } `)} #ShopifyUC

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

21. 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 ( <DefaultLayout> <div> <article> <h1>Products</h1> <ul> {data.allShopifyProduct.edges.map(({ node }: any) => ( <li key={node.shopifyId}> {node.images[0] && node.images[0].originalSrc ? ( <img src={node.images[0].originalSrc} width={400} /> ): null} <h3> <Link to={`/product/${node.handle}`}>{node.title}</Link> {" - "}${node.priceRange.minVariantPrice.amount} </h3> <p>{node.description}</p> </li> ))} </ul> </article> <Link to="/">Go back to the homepage</Link> </div> </DefaultLayout> ) } • APIΛ௚઀ୟ͔ͳ͍ • ͢΂ͯ͸GraphQLܦ༝ • ෳ਺ͷαʔϏε / APIΛར ༻ͨ͠৔߹ʹศརͳ࢓૊ #ShopifyUC

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

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

24. 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

25. JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯ͸ਖ਼௚ͨͩͷ߻໰ • Jamstack / Next.js / Nuxt.js /

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

26. Agenda • ShopifyͰͷϑϩϯτΤϯυͷ࡞Γํ • ։ൃ༻αΠτ / Storefront APIར༻ͷ४උ • Gatsby(React)ͰShopifyͱ࿈ܞͨ͠αΠτΛ࡞Δ

    • What’s your favorite style to make the store? #ShopifyUC

27. EC΍Δ͚ͩͳΒ STORES΍BASE΋͋Δ • STORES / BASE͸ແྉ • UI΋αϙʔτ΋೔ຊ޲͚ • ༗ྉϓϥϯͰ΋Shopifyͱಉ౳͔

    ͦΕΑΓ྿Ձʹ࢖͑Δ • ͦΕͰ΋ShopifyΛ࢖͏ͷ͸ʁ

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

29. API͕ ։͔Ε͍ͯΔ৔߹ • ίʔυΛॻ͚͹ɺͳΜͰ΋Ͱ͖Δ • ػೳʹΑͬͯαϙʔτઌ͕มΘΔ͜ͱ΋ • ࠨ + ʮͲ͏ศརʹ֦ு͍͔ͯ͘͠ʯ

    • ࠨ + ֦ுػೳͷ։ൃൢച API͕ ։͔Ε͍ͯͳ͍৔߹ • Ͱ͖Δ͜ͱ = ϕϯμʔͷϦϦʔε಺༰ • ͳʹ͔͋Ε͹ϕϯμʔʹରԠґཔ • ʮγεςϜΛͲ͏ૢ࡞͢Δ͔ʯ • ӡ༻୅ߦ / ઃఆ୅ߦͱͯ͠ͷۀ຿ #ShopifyUC

30. Share the knowledge ʢࣦഊஊ΋ʂʣ

31. None

32. ॻ͘ / ࿩͢͜ͱͰΑΓਂֶ͍ͼʹͳΔ • ࢼ͢ɾಈ͔͢ஈ֊Ͱ͸ʮͳͥಈ͍͔ͨɾͳࣦͥഊ͔ͨ͠ʯΛߟ͑ʹ͍͘ • ϫʔΫγϣοϓͰ৮ͬͯຬ଍ͯ͠ɺͦͷޙ৮͍ͬͯͳ͍΋ͷɻ͋Γ·ͤΜ͔ʁ • Ξ΢τϓοτ͢ΔͨΊʹ͸ɺʮ΍ͬͨ͜ͱΛݴޠԽ͢Δʯඞཁ͕͋Δ •

    ॻ͖ग़ͯ͠ΈΔ͜ͱͰɺʮ࣮͸Θ͔͍ͬͯͳ͔ͬͨ͜ͱʯ͕ݟ͑ͯ͘Δ • ʮΈΜͳॻ͔ͳ͍ʯ͚ͩͰɺʮΈΜͳࣦഊ֮ͯ͑ͯ͠Δʯ • ࣦഊΛॻ͘ = ࣦഊͷৼΓฦΓ͕Ͱ͖͍ͯΔ • ͳΜͰ΋͍͍͔Βɺࢼͨ͜͠ͱͷৼΓฦΓΛPublishing͠Α͏ʂ #ShopifyUC

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

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

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

36. JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯ͸ਖ਼௚ͨͩͷ߻໰ • Jamstack / Next.js / Nuxt.js /

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

37. #ShopifyUC