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

https://pwanight.connpass.com/event/225022/

Transcript

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

   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ
   
   
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 12
    ShopifyͷPWAͷࣄྫ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 20
    Shopify JavaScript Buy SDK
    SDK
    Shopify Buy SDK
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 26
    PWAͱECͷؔ܎
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 30
    Shopify Storefront APIͷσϞ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. View Slide