Shopify Storefront APIを使った PWA e-commerceの解説とデモ

Slide 1

Slide 1 text

Shopify Storefront APIΛ࢖ͬͨ PWA e-commerceͷղઆͱσϞ 2021.10.16 @ PWA Night MATSURI 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

ShopifyͷPWAࣄྫ 01 ຊ೔ͷ಺༰ 02 Shopifyͷ֓ཁ 03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏ 04 PWAͱECͷؔ܎ 05 Shopify Storefront APIͷσϞ 06 ࢀߟ৘ใͱ͓஌Βͤ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 ShopifyΞϓϦετΞͱύʔτφʔϓϩάϥϜ ֦େ͢Δ ΤίγεςϜ

Slide 10

Slide 10 text

10 ೔ຊͰ΋ΞϓϦΤίγεςϜ͸ٸ֦େ ೔ຊಛԽ ֦େ͢Δ ΤίγεςϜ

Slide 11

Slide 11 text

11 ύʔτφʔొ࿥ Shopify ύʔτφʔ ֦େ͢Δ ΤίγεςϜ

Slide 12

Slide 12 text

12 ShopifyͷPWAͷࣄྫ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 ϝϦοτ • ଟ͘ͷͦͯ͠৽͍͠ൢചνϟωϧʹૉૣ͘ରԠͰ͖Δ • ॊೈͳΧελϚΠζ΍ಠࣗੑΛ࣮ݱͰ͖Δ • ଎౓վળ΍εέʔϧΞ΢τͷ௥ٻ͕͠΍͍͢ γϣοϓ͸ དྷͯ΋Β͏ ग़͔͚͍ͯ͘ ΋ͷ΁ʂ

Slide 16

Slide 16 text

16 ϔουϨείϚʔεͷ̍Ԡ༻ྫ PWA ECͱ͸ʁ

Slide 17

Slide 17 text

17 ʮϔουϨείϚʔεʯ͸࢖Θͳ͘ͳΓ·ͨ͠ aa ͪͳΈʹɾɾɾ Icons by Twemoji / CC BY 4.0 ʮΧελϜετΞϑϩϯτʯ Ͱ͓Ͷ͕͍͠·͢ʂ

Slide 18

Slide 18 text

18 ShopifyͰPWAΛ࣮ݱ͢Δํ๏

Slide 19

Slide 19 text

19 Shopify Storefront API API Shopify Storefront API ࠷ۙσʔλ͕ ૿͑·ͨ͠ʂ ࠃࡍՁ֨༻ͷ Directive΋ ॳରԠʂ

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 Hydrogen Framework Shopify Hydrogen Reactϕʔεͷ৽͍͠ ΧελϜετΞϑϩϯτ։ൃ ϑϨʔϜϫʔΫ ݱࡏearly accessड෇தʂ

Slide 23

Slide 23 text

23 API΍SDK͸ϨΠϠʔͰબ୒Մೳ ɹStorefront Server Side Storefront API (GraphQL) Client Side Buy SDK (npm/yarn) BuyButton.js (CDN)

Slide 24

Slide 24 text

24 ࣮͸GatsbyͷSwagαΠτ΋࢖ͬͯΔʂ Ԡ༻ྫ https://store.gatsbyjs.org/

Slide 25

Slide 25 text

25 ͨ͘͞ΜPWAԽ͢ΔΞϓϦ͕ग़ͯΔ APP https://apps.shopify.com/search?locale=ja&q=PWA

Slide 26

Slide 26 text

26 PWAͱECͷؔ܎

Slide 27

Slide 27 text

27 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΢ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ • CMSΛ࢖͏ΑΓUXͷࣗ༝౓͕ߴ͘࠷దԽ͠΍͍͢ • ΦϑϥΠϯ࣌ͷػձଛࣦͷϦΧόϦʔʢҠಈதʹߪೖ ͳͲʣ

Slide 28

Slide 28 text

28 ஫ҙ఺ • ͪΌΜͱPWAΛ։ൃͰ͖ΔΤϯδχΞ͕ඞཁ • ར༻͢ΔECϓϥοτϑΥʔϜ͕PWAʹ଱͑ΕΔ΋ͷͰ ͋Δ͜ͱ͕ඞཁ • PWAͷϝϯςφϯε͸ࣗ෼ୡͰߦ͏͜ͱ͕ඞཁ ※͜ͷϒϩάͷνΣοΫϦετࢀর

Slide 29

Slide 29 text

29 PWAΛ ఏڙͰ͖Δ αʔϏε ͱ͸ʁ • ϔουϨείϚʔεͱͯ͠ػೳ͢Δ๛෋΍API • ৴པੑ͋ΔεέʔϥϒϧͳΫϥ΢υϓϥοτϑΥʔϜ

Slide 30

Slide 30 text

30 Shopify Storefront APIͷσϞ

Slide 31

Slide 31 text

31 σϞ Storefront API full client side demo PWAԽ͢Δ࣌ͷ஫ҙ఺ɿ ɹStorefront API͸ CORSରԠ͍ͯ͠ͳ͍ => ΫϥΠΞϯτ͔Β௚઀ ݺ΂ͳ͍ͷͰ αʔόʔϨΠϠʔඞཁ ΍ͬͯΈͨ͜ͱɿ ShopifyͷCDN͔Βͩͱ CORSΛ௒͑ͯ௚઀ݺ΂Δ => ΞϓϦΠϯετʔϧ࣌ʹ File APIͰϥούʔJSΛ CDNʹొ࿥͠ɺ ΫϥΠΞϯτ͔Β௚઀ ݺ΂ΔΑ͏ʹͯ͠Έͨ ຊ౰͸PWAͷ ϑϧΫϥΠΞϯτ Ͱด͍ͨ͡ͳ͋ ɾɾɾ

Slide 32

Slide 32 text

32 Storefront APIͷRate Limit ؾΛ͚ͭΔͱ͜Ζ Storefront APIͷݺͼग़੍͠ݶ͸ ݺͼग़͠ݩͷIPΞυϨε୯ҐͰ ੍ݶ͞ΕΔͷͰɺ ΞΫηε͕ଟ͍৔߹͸ ΫϥΠΞϯτʢϒϥ΢βʣ΍ IP͕͍͔ͭ͘ʹׂΓৼΒΕΔ αʔόʔͰͷར༻͕๬·͍͠ ʢϞόΠϧΞϓϦͷ৔߹͸ SDKΛ࢖ͬͯΞϓϦ಺ͰݺͿʣ

Slide 33

Slide 33 text

33 ࢀߟ৘ใͱ͓஌Βͤ

Slide 34

Slide 34 text

34 Shopify։ൃऀϒϩάͱ Twitch഑৴ ։ൃऀ Shopify ΞϓϦ։ൃ ShopifyJapanese ϑΥϩʔͯ͠Ͷʂ