ShifterでのShopify Headless Commerceの活用

by benzookapi

Slide 1

Slide 1 text

ShifterͰͷShopify Headless Commerceͷ׆༻ 2020.08.05 @ Shifter Meetup Junichi Okamura 

Slide 2

Slide 2 text

• Junichi Okamura, Sr. Technical Partner Manager at Shopify • @benzookapi • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?

Slide 3

Slide 3 text

ϔουϨείϚʔεͷ֓ཁͱࣄྫ 01 ຊ೔ͷ͓୊ 02 Shopifyͷ֓ཁ 03 ϔουϨείϚʔεͷ࣮ݱํ๏ 04 ShifterΛ࢖ͬͨσϞ 05 ࢀߟ৘ใ

Slide 4

Slide 4 text

4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ

Slide 5

Slide 5 text

Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $1,728M ऩӹֹ (աڈ12ϱ݄) 4,100+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺ $172B ࣄۀऀ༷ͷGMV (ྦྷܭ) 2.9 million ళฮͷελοϑΞΧ΢ϯτ਺ 1,000,000+ ళฮ —— 175ϱࠃ~ 5,000+ ࣾһ਺ Shopifyʹ͍ͭͯ ׬શϦϞʔτԽ Digital by defaultͷ΋ͱ2020೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

7 Shopifyͷಛ௃

Slide 8

Slide 8 text

ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ

Slide 9

Slide 9 text

Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ෼ੳ σʔλ ϓϥΠόγʔ ड஫ υϝΠϯ ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά

Slide 10

Slide 10 text

൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳAPI Access APIs Inventory APIs Product APIs Analytics APIs MarketingEvent Sales channel APIs Billing APIs Metafield Shipping and fulfillment APIs Customer APIs Online store APIs Shopify Payments APIs Discount APIs Order APIs Store property APIs Event APIs Plus APIs TenderTransaction

Slide 11

Slide 11 text

11 ϩʔΧϧσϦόϦʔػೳ ৽ػೳ

Slide 12

Slide 12 text

12 ళ಄डऔػೳ ৽ػೳ

Slide 13

Slide 13 text

13 ϔουϨείϚʔεͱ͸

Slide 14

Slide 14 text

14 όοΫΤϯυͱϑϩϯτΤϯυ͕੾Γ཭͞ΕͨίϚʔε ఆٛ Backend Frontend

Slide 15

Slide 15 text

15 ShopifyϒϩάɿίΞϥϚοτϨε ࣄྫ Shopify ϔουϨείϚʔε

Slide 16

Slide 16 text

16 Shifterͱͷؔ܎ ఆٛ Backend Frontend • ঎඼؅ཧ • ஫จ؅ཧ • ഑ૹ؅ཧ • ܾࡁ • ސ٬؅ཧ …etc • ঎඼లࣔ • ϒϩά • SEO • ϞόΠϧରԠ • σβΠϯ …etc APIɾSDK

Slide 17

Slide 17 text

17 ϝϦοτ • ࢖͍׳ΕͨWordpress templateʢCMSʣΛͦͷ··࢖͑Δ • طଘࢿ࢈ʢSEO ɺϒϩάͳͲʣΛͦͷ··࢖͑Δ • ؆୯ʹ੩తαΠτʹεϐʔυΞοϓͰ͖Δ • Wordpressࣄྫͱݴ͑Δ Shifter (Wordpress) ͱܨ͍ͰԿ͕خ͍͔͠ʁ

Slide 18

Slide 18 text

18 ϔουϨείϚʔεͷ࣮ݱํ๏

Slide 19

Slide 19 text

19 Shopify Storefront API API Shopify Storefront API

Slide 20

Slide 20 text

20 Shopify JavaScript Buy SDK SDK Shopify Buy SDK

Slide 21

Slide 21 text

21 Shopify BuyButton.js JS Shopify Buy Button JS

Slide 22

Slide 22 text

22 Shopify Buy Button Channel APP Shopify Buy Button

Slide 23

Slide 23 text

23 ࣮͸Shifter΋࢖ͬͯΔʂ APP Shifter Shopify

Slide 24

Slide 24 text

24 Shifter Static + BuyButton.js σϞ https://naughty-joliot2216.on.getshifter.io

Slide 25

Slide 25 text

25 ൃలܥʢWordpress+Shifterެ։ΞϓϦʣ σϞ ঎඼ɾίϨΫγϣϯAPI தؒαʔόʔతͳ΋ͷ ίϯςϯπAPI ੩తαΠτԽ Ұൠެ։ Πϯετʔϧ ϞόΠϧΞϓϦ PWA ͞ΒͳΔϔουϨε