Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
JamstackではじめるShopify / shopify-uc-kansai-202011
Hidetaka Okamoto
November 19, 2020
Programming
0
20
JamstackではじめるShopify / shopify-uc-kansai-202011
Hidetaka Okamoto
November 19, 2020
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
hideokamoto
1
640
hideokamoto
1
1.7k
hideokamoto
2
210
hideokamoto
0
210
hideokamoto
1
350
hideokamoto
0
35
hideokamoto
1
84
hideokamoto
0
48
hideokamoto
0
2.2k
Other Decks in Programming
See All in Programming
martysuzuki
1
300
grapecity_dev
0
170
dqneo
3
290
rarous
0
170
pyama86
4
410
tourismgeek
1
130
osyo
0
280
grapecity_dev
0
160
morimorihoge
1
140
ryosukes
0
1.2k
oleindesign
1
200
mitohato14
0
110
Featured
See All Featured
addyosmani
1347
190k
matthewcrist
73
7.5k
mojombo
358
62k
jonrohan
1022
380k
holman
461
280k
mthomps
39
2.3k
smashingmag
283
47k
reverentgeek
168
7.2k
yeseniaperezcruz
302
31k
mongodb
23
3.9k
stephaniewalter
260
11k
ddemaree
273
31k
Transcript
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ʯͱ֮͑Α͏ • ετΞϑϩϯτAPIApple PayAndroidͷܾࡁʹରԠՄೳʢ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 ( <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
ྫ͑͜Μͳ͍ํ • ͢Ͱʹ͋Δ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Δ͚ͩͳΒ STORESBASE͋Δ • STORES / BASEແྉ • UIαϙʔτຊ͚ • ༗ྉϓϥϯͰShopifyͱಉ͔
ͦΕΑΓ྿Ձʹ͑Δ • ͦΕͰShopifyΛ͏ͷʁ
ٸ͢ΔSaaSͷڞ௨߲ɿ APIΤίϊϛʔ
API͕ ։͔Ε͍ͯΔ߹ • ίʔυΛॻ͚ɺͳΜͰͰ͖Δ • ػೳʹΑͬͯαϙʔτઌ͕มΘΔ͜ͱ • ࠨ + ʮͲ͏ศརʹ֦ு͍͔ͯ͘͠ʯ
• ࠨ + ֦ுػೳͷ։ൃൢച API͕ ։͔Ε͍ͯͳ͍߹ • Ͱ͖Δ͜ͱ = ϕϯμʔͷϦϦʔε༰ • ͳʹ͔͋ΕϕϯμʔʹରԠґཔ • ʮγεςϜΛͲ͏ૢ࡞͢Δ͔ʯ • ӡ༻ߦ / ઃఆߦͱͯ͠ͷۀ #ShopifyUC
Share the knowledge ʢࣦഊஊʂʣ
None
ॻ͘ / ͢͜ͱͰΑΓਂֶ͍ͼʹͳΔ • ࢼ͢ɾಈ͔͢ஈ֊Ͱʮͳͥಈ͍͔ͨɾͳࣦͥഊ͔ͨ͠ʯΛߟ͑ʹ͍͘ • ϫʔΫγϣοϓͰ৮ͬͯຬͯ͠ɺͦͷޙ৮͍ͬͯͳ͍ͷɻ͋Γ·ͤΜ͔ʁ • Ξτϓοτ͢ΔͨΊʹɺʮͬͨ͜ͱΛݴޠԽ͢Δʯඞཁ͕͋Δ •
ॻ͖ग़ͯ͠ΈΔ͜ͱͰɺʮ࣮Θ͔͍ͬͯͳ͔ͬͨ͜ͱʯ͕ݟ͑ͯ͘Δ • ʮΈΜͳॻ͔ͳ͍ʯ͚ͩͰɺʮΈΜͳࣦഊ֮ͯ͑ͯ͠Δʯ • ࣦഊΛॻ͘ = ࣦഊͷৼΓฦΓ͕Ͱ͖͍ͯΔ • ͳΜͰ͍͍͔Βɺࢼͨ͜͠ͱͷৼΓฦΓΛPublishing͠Α͏ʂ #ShopifyUC
ͦ͏͍͑ࠓ͜Μͳͷ͕͋Γ·ͨ͠Ͷ #ShopifyUC #ShopifyUC
ͦ͏͍͑ࠓ͜Μͳͷ͕͋Γ·ͨ͠Ͷ #ShopifyUC #ShopifyUC
ͦΖͦΖ͜Μͳͷ͋Γ·ͨ͠Ͷ #ShopifyUC
JamstackͳShopifyϑϩϯτΤϯυߏங • ׳Εͯͳ͍ਓʹͱͬͯਖ਼ͨͩͷ • Jamstack / Next.js / Nuxt.js /
Gatsby / GridsomeͳͲʹ׳Ε͍ͯΔਓʹ࿕ใ • ʮطଘͷϦιʔεɾϊϋΛͬͯShopifyͷαΠτߏங͕͍͔ͨ͠൱͔ʯͷબ • طଘͷϦιʔεɾϊϋ͕ͳ͍߹ʹݫ͍͠ • σʔλιʔε͕͋ͪͪ͜ʹࢄΒ͍ͬͯΔ߹ʹ༗༻ʢಛʹGatsby / Gridsomeʣ • σʔλऩूͱॲཧ͕͔ΕΔͷͰɺஈ֊తͳϚΠάϨͳͲൺֱత༰қʹ #ShopifyUC
#ShopifyUC