$30 off During Our Annual Pro Sale. View Details »

Shopifyで実現するPWA EC

Shopifyで実現するPWA EC

benzookapi

June 17, 2020
Tweet

More Decks by benzookapi

Other Decks in Technology

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