Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Junichi Okamura

October 16, 2021
Tweet

More Decks by Junichi Okamura

Other Decks in Technology

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