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

Transcript

1. Shopify Storefront APIΛ࢖ͬͨ PWA e-commerceͷղઆͱσϞ 2021.10.16 @ PWA Night MATSURI

   Junichi Okamura 


2. • Junichi Okamura, Sr. Technical Partner Manager at Shopify •

   @benzookapi • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?

3. ShopifyͷPWAࣄྫ 01 ຊ೔ͷ಺༰ 02 Shopifyͷ֓ཁ 03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏ 04 PWAͱECͷؔ܎ 05

   Shopify Storefront APIͷσϞ 06 ࢀߟ৘ใͱ͓஌Βͤ

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

5. Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Β େاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $2,9B ऩӹֹ (աڈ12ϱ݄) 6,000+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺

   $277B ࣄۀऀ༷ͷGMV (ྦྷܭ) 4.9 million ళฮͷελοϑΞΧ΢ϯτ਺ 1,700,000+ ళฮ —— 175ϱࠃ~ 7,000+ ࣾһ਺ Shopifyʹ͍ͭͯ ׬શϦϞʔτԽ Digital by defaultͷ΋ͱ2020೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ

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

7. Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ෼ੳ σʔλ ϓϥΠόγʔ ड஫ υϝΠϯ

   ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά

8. ൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳ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

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

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

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

12. 12 ShopifyͷPWAͷࣄྫ

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

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

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

    ग़͔͚͍ͯ͘ ΋ͷ΁ʂ

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

17. 17 ʮϔουϨείϚʔεʯ͸࢖Θͳ͘ͳΓ·ͨ͠ aa ͪͳΈʹɾɾɾ Icons by Twemoji / CC BY

    4.0 ʮΧελϜετΞϑϩϯτʯ Ͱ͓Ͷ͕͍͠·͢ʂ

18. 18 ShopifyͰPWAΛ࣮ݱ͢Δํ๏

19. 19 Shopify Storefront API API Shopify Storefront API ࠷ۙσʔλ͕ ૿͑·ͨ͠ʂ

    ࠃࡍՁ֨༻ͷ Directive΋ ॳରԠʂ

20. 20 Shopify JavaScript Buy SDK SDK Shopify Buy SDK

21. 21 Shopify BuyButton.js JS Shopify Buy Button JS

22. 22 Shopify Hydrogen Framework Shopify Hydrogen Reactϕʔεͷ৽͍͠ ΧελϜετΞϑϩϯτ։ൃ ϑϨʔϜϫʔΫ ݱࡏearly

    accessड෇தʂ

23. 23 API΍SDK͸ϨΠϠʔͰબ୒Մೳ ɹStorefront Server Side Storefront API (GraphQL) Client Side

    Buy SDK (npm/yarn) BuyButton.js (CDN)

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

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

26. 26 PWAͱECͷؔ܎

27. 27 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΢ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ •

    CMSΛ࢖͏ΑΓUXͷࣗ༝౓͕ߴ͘࠷దԽ͠΍͍͢ • ΦϑϥΠϯ࣌ͷػձଛࣦͷϦΧόϦʔʢҠಈதʹߪೖ ͳͲʣ

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

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

30. 30 Shopify Storefront APIͷσϞ

31. 31 σϞ Storefront API full client side demo PWAԽ͢Δ࣌ͷ஫ҙ఺ɿ ɹStorefront

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

32. 32 Storefront APIͷRate Limit ؾΛ͚ͭΔͱ͜Ζ Storefront APIͷݺͼग़੍͠ݶ͸ ݺͼग़͠ݩͷIPΞυϨε୯ҐͰ ੍ݶ͞ΕΔͷͰɺ ΞΫηε͕ଟ͍৔߹͸

    ΫϥΠΞϯτʢϒϥ΢βʣ΍ IP͕͍͔ͭ͘ʹׂΓৼΒΕΔ αʔόʔͰͷར༻͕๬·͍͠ ʢϞόΠϧΞϓϦͷ৔߹͸ SDKΛ࢖ͬͯΞϓϦ಺ͰݺͿʣ

33. 33 ࢀߟ৘ใͱ͓஌Βͤ

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

35. 35 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ ࣭໰ Shopify ϑΥʔϥϜ

36. 36 Πϕϯτ΍Γ·͢ʂ ͓஌Βͤ Shopify Commerce Day

37. 37 ࠾༻ͯ͠·͢ʂ Shopify job ͓஌Βͤ

38. None