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

Shopifyを使ったヘッドレスコマースの 実現方法と事例

Shopifyを使ったヘッドレスコマースの 実現方法と事例

Junichi Okamura

May 20, 2021
Tweet

More Decks by Junichi Okamura

Other Decks in Technology

Transcript

  1. ShopifyΛ࢖ͬͨϔουϨείϚʔεͷ
    ࣮ݱํ๏ͱࣄྫ
    2021.5.20 @ Shopify UC Kansai #
    3

    Junichi Okamura


    View Slide

  2. • Junichi Okamura, Sr. Technical Partner Manager at Shopif
    y

    • @benzookap
    i

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

    View Slide

  3. ϔουϨείϚʔεͷ֓ཁͱࣄྫ
    01
    ຊ೔ͷ಺༰
    02
    ShopifyͱΞϓϦΤίγεςϜͷ֓ཁ
    03 ϔουϨείϚʔεͷ࣮ݱํ๏
    04 Storefront APIͱൢചνϟωϧͷؔ܎
    05 ೔ຊͷࣄྫͱσϞɺ·ͱΊ
    06 ShopifyΞϓϦ։ൃͷֶशํ๏

    View Slide

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

    View Slide

  5. Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ
    اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ
    200
    6

    Shopify ϩʔϯν
    $2,9B


    ऩӹֹ


    (աڈ12ϱ݄
    )

    6,000
    +

    ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺
    $277B


    ࣄۀऀ༷ͷGMV


    (ྦྷܭ
    )

    4.9 millio
    n

    ళฮͷελοϑΞΧ΢ϯτ਺
    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 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

  9. 9
    ShopifyͷΞϓϦΤίγεςϜ

    View Slide

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

    View Slide

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

    View Slide

  12. 12
    ΞϓϦ։ൃͷୈҰาɿύʔτφʔొ࿥
    ֦େ͢Δ
    ΤίγεςϜ

    View Slide

  13. 13
    ϔουϨείϚʔεͱ͸

    View Slide

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

    View Slide

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

    View Slide

  16. 16
    • ൢ࿏ʢൢചνϟωϧʣ͕޿͕ΔʢϞʔϧग़ళɺళฮʣ
    • ετΞϑϩϯτΛ࠷దԽͰ͖ΔʢPWAɺϞόΠϧΞϓϦʣ
    • طଘࢿ࢈Λྲྀ༻Ͱ͖ΔʢCMSɺࣗࣾ։ൃγεςϜʣ
    ϔουϨείϚʔεͷԿ͕خ͍͔͠ʁ
    ϝϦοτ

    View Slide

  17. 17
    • ։ൃྗͱ౤ࢿ͕ඞཁʢΤϯδχΞɺΠϯϑϥʣ
    • ϓϥοτϑΥʔϜ΁ͷ௥ै͕ඞཁʢAPIͷ࢓༷มߋɺഇࢭʣ
    • ੹೚෼ذ఺ͷޙୀʢো֐΍όάରԠͷ૿Ճʣ
    ϔουϨείϚʔεͷԿ͕ࠔΔ͔ʁ
    σϝϦοτ

    View Slide

  18. 18
    • ϔουίϚʔεͩͱͳΜͰ΋Ͱ͖ΔʢܾࡁΛࣗ༝ʹ͍͡ΕΔ
    ͳͲʣ
    • ϔουϨείϚʔεͩͱૣ͘ͳΔʢඞͣඪ४ςϯϓϨʔτΑ
    Γૣ͘ͳΔͳͲʣ
    • ϔουϨείϚʔεͷํ͕Ṷ͔Δʢඞͣߪങ཰͕͕͋Δͳ
    Ͳʣ
    ϔουϨείϚʔε΁ͷա৒ͳظ଴
    શͯؒҧ͍Ͱ͢ʂ
    Α͋͘Δޡղ

    View Slide

  19. 19
    ಛʹܾࡁ͸ཁ஫ҙʂ
    Shopify͕ఏڙ͢ΔܾࡁػೳҎ֎Λ
    ಠࣗʹ࣮૷͢Δ͜ͱ͸ʢಛผʹڐ
    Մ͞ΕͨҰ෦ͷύʔτφʔΛআ
    ͖ʣن໿Ͱېࢭ͞Ε͍ͯ·͢ɻ
    ʢޙड़ʣ
    ཧ༝ɿ


    ϚʔνϟϯτͷηΩϡϦςΟ


    ΛकΔͨΊ
    ؾΛ͚ͭΔ
    ͜ͱ

    View Slide

  20. 20
    ϔουϨείϚʔεͷ࣮ݱํ๏

    View Slide

  21. 21
    Shopify Storefront API
    Shopify Storefront API
    API

    View Slide

  22. 22
    Shopify JavaScript Buy SDK
    Shopify Buy SDK
    SDK

    View Slide

  23. 23
    Shopify BuyButton.js
    Shopify Buy Button JS
    JavaScript

    View Slide

  24. 24
    Shopify Buy Button Channel
    Shopify Buy Button
    ൢചνϟωϧΞϓϦ
    ΞϓϦ

    View Slide

  25. 25
    Storefront APIͱൢചνϟωϧͷؔ܎

    View Slide

  26. 26
    ൢചνϟωϧͱ͸ʁ
    ඪ४Ͱ͍͍ͭͯΔΦ
    ϯϥΠϯετΞ΋࣮
    ͸ൢചνϟωϧʢফ
    ͨ͠Γ༗ޮʹͨ͠Γ
    ͕Մೳʣ
    Πϯετʔϧͨ͠ޙʹShopifyͷ؅ཧ
    ը໘ͷࠨଆͷϝχϡʔʹग़ͯ͘Δ΋
    ͷ͕ൢചνϟωϧʹStorefront APIΛ
    ࢖͍ͬͯΔՄೳੑ͕͋Δ΋ͷ
    ֓ཁ

    View Slide

  27. 27
    Storefront APIͱͷؔ܎
    ެ։ΞϓϦͰStorefront APIΛ࢖͏ʹ͸
    ඞͣΞϓϦΛൢചνϟωϧʹ͢Δ
    ʢ*1ʣඞཁ͋Γʢ৹͕ࠪೖΓ·͢ʂʣ

    ετΞϑϩϯτΛ࡞Δʹ


    ৽͍͠ൢ࿏։୓ͱͷղऍ
    ֓ཁ
    *1 ൢചνϟωϧʹඞͣStorefront APIΛ࢖͏΋ͷͰ͸ͳ͍

    View Slide

  28. 28
    Payment APIʢܾࡁ࣮૷ʣͱͷؔ܎
    ൢചνϟωϧ͕ڐՄ͞Εͨޙʹ͞Βʹ
    ผͷ৹͕ࠪඞཁͰ͢ʢ௨ৗ͸PCIDSS
    ͳͲΛอ༗͢ΔܾࡁձࣾͳͲ͔͠ڐՄ
    ͞Ε·ͤΜʣ
    ※͜ΕΒͷυΩϡϝϯτΛݟͯࣗ༝ʹ֎
    ෦ܾࡁձࣾͷॲཧΛར༻Ͱ͖Δͱߟ͑Δ
    ํ͕͍·͕͢ɺͦ͏Ͱ͸͋Γ·ͤΜʢܾ
    ࡁॲཧ͸Shopify͕ରԠ͍ͯ͠Δάϩʔό
    ϧͳ΋ͷ͔͠࢖͑·ͤΜʣ
    ֓ཁ

    View Slide

  29. 29
    ΞϓϦͷछྨͱػೳͷؔ܎
    ɹɹɹɹɹΞϓϦͷछྨ


    ػೳ
    ެ։ΞϓϦ ΧελϜΞϓϦ ϓϥΠϕʔτΞϓϦ
    ୭͕࡞Δʁ ύʔτφʔ ύʔτφʔ Ϛʔνϟϯτ
    ୭͕࢖͑Δʁ ΞϓϦετΞ͔ΒશϚʔ
    νϟϯτ
    ύʔτφʔ͕ڐՄͨ̍͠
    ͭͷϚʔνϟϯτʢ*1ʣ
    ΞϓϦΛ࡞ͬͨ̍ͭͷ
    Ϛʔνϟϯτ
    ৹ࠪ͸ඞཁ͔ʁ ඞཁʢެ։ਃ੥͕௨Βͳ
    ͍ͱ࢖͑ͳ͍ʣ
    ෆཁʢͨͩ͠ن໿νΣο
    Ϋ͋Γʣ
    ෆཁʢͨͩ͠ن໿νΣο
    Ϋ͋Γʣ
    ൢചνϟωϧʹͰ͖Δ
    ͔ʁ
    Ͱ͖Δʢެ։ਃ੥Ҏલʹ
    ผͷ৹ࠪඞཁʣ
    Ͱ͖ͳ͍ Ͱ͖ͳ͍
    Storefront API͸࢖͑Δ
    ͔ʁ
    ࢖͑ΔʢൢചνϟωϧԽ
    ඞਢʣ
    ࢖͑ͳ͍ ࢖͑Δʢ؅ཧը໘͔Β
    τʔΫϯੜ੒ʣ
    Payment API͸࢖͑Δ
    ͔ʁ
    ʢ΄ͱΜͲͷ৔߹ʣ࢖͑
    ͳ͍ʢݸผ৹ࠪඞཁʣ
    ࢖͑ͳ͍ ࢖͑ͳ͍
    *1 Shopify PlusͷΈෳ਺ϚʔνϟϯτՄ
    ৄࡉ

    View Slide

  30. 30
    ೔ຊͷࣄྫͱσϞ

    View Slide

  31. 31
    ϞόΠϧΞϓϦδΣωϨʔλʔ͕Strefront API࠾༻
    ೔ຊͷࣄྫ

    View Slide

  32. 32
    Storefront API one pager demo
    σϞ

    View Slide

  33. 33
    • ಄ͷ෦෼Λ։ൃͯ͠ϢʔεέʔεΛ޿͛Δ΋ͷ
    • ϝϦοτɾσϝϦοτ྆ํ͋Δ૒ਕͷ݋
    • ౿ΈࠐΉલʹຊ౰ʹͦΕ͕ϕετ͔ࣗ໰͠Α͏
    ϔουϨείϚʔεͱ͸
    ·ͱΊ

    View Slide

  34. 34
    ShopifyΞϓϦ։ൃͷֶशํ๏

    View Slide

  35. 35
    Shopifyϒϩά
    Shopify ΞϓϦ։ൃ
    ΞϓϦ։ൃͱ
    ެ։

    View Slide

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

    View Slide

  37. 37
    Shopify ύʔτφʔFacebookάϧʔϓ
    ※ࢀՃʹ͸ύʔτφʔΞΧ΢ϯτ͕ඞཁͰ͢
    ύʔτφʔ
    ಉ࢜ͷަྲྀ

    View Slide

  38. View Slide