Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Target Developer Agency #ShopifyUC

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

#ShopifyUC

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 (

Products

    {data.allShopifyProduct.edges.map(({ node }: any) => (
  • {node.images[0] && node.images[0].originalSrc ? ( ): null}

    {node.title} {" - "}${node.priceRange.minVariantPrice.amount}

    {node.description}

  • ))}
Go back to the homepage
) } • APIΛ௚઀ୟ͔ͳ͍ • ͢΂ͯ͸GraphQLܦ༝ • ෳ਺ͷαʔϏε / APIΛར ༻ͨ͠৔߹ʹศརͳ࢓૊ #ShopifyUC

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Share the knowledge ʢࣦഊஊ΋ʂʣ

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

#ShopifyUC