Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

Hidetaka Okamoto

November 19, 2020
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

Transcript

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

    • Liquidه๏ʹೃછΊΔ͔൱͔͕෼ਫྮ • Sample͸ଟ͍͕ɺݱঢ়ӳޠ཰ߴΊ • Shopify LiteͰ͸ͦ΋ͦ΋࢖͑ͳ͍ #ShopifyUC
  2. ߏஙํ๏3 APIΛ࢖ͬͯ֎෦ߏங • Shopify API(REST / GraphQL)Λར༻ • LiteͰ΋ϑϩϯτΤϯυ͕࡞ΕΔ •

    JavaScriptͷจ຺ͰߏஙՄೳ • JamstackͰαΠτ͕࡞ΕΔ͔͕෼ਫྮ • Shopifyͷ֎ʹͳΔͷͰࢿྉ͸ΑΓগͳ͍ • ௕ظతʹอकӡ༻͢ΔલఏʹͳΓ͕ͪ
  3. 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
  4. https://www.gatsbyjs.com/ Gatsby -> Reactϕʔεͷ੩తαΠτδΣωϨʔλʔ • API΍ϑΝΠϧ͔ΒσʔλΛऔΓࠐΈɺ੩తͳHTMLΛ࡞੒͢Δπʔϧͷ1ͭ • ੩తαΠτͱͯ͠ެ։͢ΔͷͰɺαʔόʔ୅Λ྿Ձʹ͠΍͍͢ • ϑϩϯτΤϯυͷίʔυ͸JavaScript

    (React)Ͱ࣮૷ • ϓϥάΠϯγεςϜ͕͋Γɺ༗໊Ͳ͜Ζͷσʔλ͸΄΅ϊʔίʔυͰऔΓࠐΊΔ • औΓࠐΜͩσʔλΛར༻͢ΔͷʹɺGraphQL͕ඞཁɻ • ʮWebαΠτΛReactͰ࡞Γ͍ͨʯ࣌ʹߴ֬཰Ͱީิʹग़Δπʔϧͷ1ͭ #ShopifyUC
  5. 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
  6. GraphQLͰඞཁͳσʔλ͚ͩऔಘ͢Δ const result = await graphql(` query { allShopifyProduct(sort: {

    fields: [title] }) { edges { node { title images { originalSrc } shopifyId handle priceRange { maxVariantPrice { amount } minVariantPrice { amount } } } } } } `)} #ShopifyUC
  7. 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
  8. 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
  9. JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯ͸ਖ਼௚ͨͩͷ߻໰ • Jamstack / Next.js / Nuxt.js /

    Gatsby / GridsomeͳͲʹ׳Ε͍ͯΔਓʹ͸࿕ใ • ʮطଘͷϦιʔεɾϊ΢ϋ΢Λ࢖ͬͯShopifyͷαΠτߏங͕͍͔ͨ͠൱͔ʯͷબ୒ • طଘͷϦιʔεɾϊ΢ϋ΢͕ͳ͍৔߹ʹ͸ݫ͍͠ • σʔλιʔε͕͋ͪͪ͜ʹࢄΒ͹͍ͬͯΔ৔߹ʹ΋༗༻ʢಛʹGatsby / Gridsomeʣ • σʔλऩू૚ͱॲཧ૚͕෼͔ΕΔͷͰɺஈ֊తͳϚΠάϨͳͲ΋ൺֱత༰қʹ #ShopifyUC
  10. API͕ ։͔Ε͍ͯΔ৔߹ • ίʔυΛॻ͚͹ɺͳΜͰ΋Ͱ͖Δ • ػೳʹΑͬͯαϙʔτઌ͕มΘΔ͜ͱ΋ • ࠨ + ʮͲ͏ศརʹ֦ு͍͔ͯ͘͠ʯ

    • ࠨ + ֦ுػೳͷ։ൃൢച API͕ ։͔Ε͍ͯͳ͍৔߹ • Ͱ͖Δ͜ͱ = ϕϯμʔͷϦϦʔε಺༰ • ͳʹ͔͋Ε͹ϕϯμʔʹରԠґཔ • ʮγεςϜΛͲ͏ૢ࡞͢Δ͔ʯ • ӡ༻୅ߦ / ઃఆ୅ߦͱͯ͠ͷۀ຿ #ShopifyUC
  11. ॻ͘ / ࿩͢͜ͱͰΑΓਂֶ͍ͼʹͳΔ • ࢼ͢ɾಈ͔͢ஈ֊Ͱ͸ʮͳͥಈ͍͔ͨɾͳࣦͥഊ͔ͨ͠ʯΛߟ͑ʹ͍͘ • ϫʔΫγϣοϓͰ৮ͬͯຬ଍ͯ͠ɺͦͷޙ৮͍ͬͯͳ͍΋ͷɻ͋Γ·ͤΜ͔ʁ • Ξ΢τϓοτ͢ΔͨΊʹ͸ɺʮ΍ͬͨ͜ͱΛݴޠԽ͢Δʯඞཁ͕͋Δ •

    ॻ͖ग़ͯ͠ΈΔ͜ͱͰɺʮ࣮͸Θ͔͍ͬͯͳ͔ͬͨ͜ͱʯ͕ݟ͑ͯ͘Δ • ʮΈΜͳॻ͔ͳ͍ʯ͚ͩͰɺʮΈΜͳࣦഊ֮ͯ͑ͯ͠Δʯ • ࣦഊΛॻ͘ = ࣦഊͷৼΓฦΓ͕Ͱ͖͍ͯΔ • ͳΜͰ΋͍͍͔Βɺࢼͨ͜͠ͱͷৼΓฦΓΛPublishing͠Α͏ʂ #ShopifyUC
  12. JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯ͸ਖ਼௚ͨͩͷ߻໰ • Jamstack / Next.js / Nuxt.js /

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