Shopifyで実現するPWA EC

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

Transcript

1. ShopifyͰ࣮ݱ͢ΔPWA EC
   2020.06.17 @ PWA Night
   Junichi Okamura

   

   View Slide

2. • Junichi Okamura, Technical Partner Manager at Shopify
   • @benzookapi
   • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker
   • TDD(Talk Driven Development)
   Who am I?
   

   View Slide

3. ShopifyͷPWAࣄྫ
   01
   ຊ೔ͷ͓୊
   02
   Shopifyͷ֓ཁ
   03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏
   04 PWAͱECͷؔ܎
   05 ShopifyͷPWAͷσϞ
   06 ࢀߟ৘ใͱϑΥʔϥϜ׆༻
   

   View Slide

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

   View Slide

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

   View Slide

6. View Slide

7. 4,100+
   ΞϓϦʹΑΔػೳ֦ு աڈ1೥ؒͷΞΫςΟϒύʔτφʔ਺
   24,500
   Apps Agencies & Web Designers
   ShopifyύʔτφʔΤίγεςϜ
   

   View Slide

8. 8
   Shopifyͷಛ௃
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 12
    ϩʔΧϧσϦόϦʔػೳ
    ৽ػೳ
    

    View Slide

13. 13
    ళ಄डऔػೳ
    ৽ػೳ
    

    View Slide

14. 14
    ShopifyͷPWAͷࣄྫ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 20
    Shopify Storefront API
    API
    Shopify Storefront API
    

    View Slide

21. 21
    Shopify JavaScript Buy SDK
    SDK
    Shopify Buy SDK
    

    View Slide

22. 22
    Shopify BuyButton.js
    JS
    Shopify Buy Button JS
    

    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
    Shopify Buy Button Channel
    APP
    Shopify Buy Button
    

    View Slide

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

    View Slide

27. 27
    PWAͱECͷؔ܎
    

    View Slide

28. 28
    ͳͥ
    PWA͔ʁ
    • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬
    ੑ͕ྑ͍
    • ΢ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ
    ͍͍ͱ͜ͲΓ͕Ͱ͖Δ
    • CMSΛ࢖͏ΑΓUXͷࣗ༝౓͕ߴ͘࠷దԽ͠΍͍͢
    

    View Slide

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

    View Slide

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

    View Slide

31. 31
    σϞ
    

    View Slide

32. 32
    σϞ
    • ࣗ࡞ͷShopify Buy SDKͷ௒؆୯ΞϓϦ
    • લड़ͷPWA༻ͷShopifyΞϓϦͷσϞγϣοϓ
    • ShopifyͷΤϯδχΞ͕࡞ͬͨPWAϞδϡʔϧͷσϞ
    γϣοϓ
    

    View Slide

33. 33
    ࢀߟ৘ใͱϑΥʔϥϜ׆༻
    

    View Slide

34. 34
    Shopify ύʔτφʔϒϩά
    ։ൃऀ
    Shopify ΞϓϦ։ൃ
    

    View Slide

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

    View Slide

36. 36
    Shopify Partner Boot Camp
    ຊؾͷਓ޲͚
    

    View Slide

37. View Slide