React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法

https://nodejs.connpass.com/event/203464/

Transcript

1. React + GraphQL Λ࢖ͬͨShopify Appͷ࡞Γํͱ
   ͦͷϚωλΠζํ๏
   2021.2.25 @ NodeֶԂ 35࣌ݶ໨ ΦϯϥΠϯτϥΠΞϧ
   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ΞϓϦ։ൃʹඞཁͳεΩϧ
   01
   ຊ೔ͷ͓୊
   02
   ShopifyͱΞϓϦΤίγεςϜͷ֓ཁ
   03 ShopifyΞϓϦ։ൃͷϚωλΠζ
   04 ShopifyΞϓϦ։ൃͷֶशํ๏
   

   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 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
    ShopifyΞϓϦͷ։ൃʹඞཁͳεΩϧ
    

    View Slide

14. 14
    Ϛϧνςφϯτܕͷ΢Σϒ։ൃͷܦݧ
    ShopifyΞϓ
    Ϧ։ൃʹඞ
    ཁͳεΩϧ
    ਤͷग़యɿεϚΫϥ https://www.smclbms.com/smcl/service_edi/multiTenant
    ShopifyΞϓϦʹΫϥ΢υܕ
    OSSϓϥάΠϯʹ഑෍ܕ
    εέʔϧΞ΢τͷඞཁੑ
    

    View Slide

15. 15
    ϑϩϯτΤϯυͱόοΫΤϯυͷόϥϯεྑ͍஌ࣝ
    ShopifyΞϓ
    Ϧ։ൃʹඞ
    ཁͳεΩϧ
    ϑϩϯτΤϯυʢετΞʣ όοΫΤϯυʢ؅ཧը໘ʣ
    JavaScript/HTML/CSS/Liquid GraphQL/React/REST/Database
    

    View Slide

16. 16
    ShopifyΞϓϦͷΞʔΩςΫνϟ
    ΞϓϦͷ
    ߏ੒
    

    View Slide

17. 17
    ShopifyΞϓϦͷΞʔΩςΫνϟ
    ΞϓϦͷ
    ߏ੒
    EventBridge
    AWS
    

    View Slide

18. 18
    Shopify App CLIͰߴ଎։ൃʂ
    Node+
    React࢖͍
    ͳΒɾɾɾ
    

    View Slide

19. 19
    ShopifyΞϓϦͷ։ൃͷϚωλΠζ
    

    View Slide

20. 20
    ੈքதͰ࢖ΘΕ͍ͯΔΞϓϦͷ޻৔
    ΞϓϦ
    ύʔτφʔ
    ੒ޭࣄྫ
    

    View Slide

21. 21
    • ࣗࣾαʔϏεΛߟ͑ͯىۀɺ·ͨ͸ͦ͏͍ͬͨձࣾͰಇ͘
    • ▶︎ػೳઃܭ΍ސ٬։୓Λશ෦ࣗ෼ୡͰߦ͏ඞཁ͋Γ
    • ▶︎ചΕΔ·Ͱ͠ΜͲ͍ɺ֮ޛͱ͕࣌ؒඞཁ
    • डୗҊ݅Λड஫ͯ͠ೲ඼ɺ·ͨ͸ͦ͏͍ͬͨձࣾͰಇ͘
    • ▶︎ػೳཁ݅Λސ٬͝ͱʹ٧ΊΔඞཁ͕͋Δ
    • ▶︎εέʔϧ͠ʹ͍͘ɺ࢓ࣄ͕ݻఆԽ͕ͪ͠
    ࣗࣾαʔϏε vs डୗ։ൃ
    ΤϯδχΞͷ
    ΩϟϦΞͰΑ
    ͘࿩୊ʹͳΔ
    ͜ͱ
    

    View Slide

22. 22
    • ϓϥοτϑΥʔϜͷجຊػೳ΍طଘސ٬ʹࣗࣾαʔϏεͷఏ
    ڙ΍डୗ։ൃΛఏڙ͢Δ
    • ▶︎ࣗ෼ୡͷఏڙͰ͖ΔόϦϡʔʹಛԽͰ͖Δ
    • ▶︎։ൃίετ͕Լ͕ΔͷͰϦεΫ΍࣌ؒΛ࡟ݮͰ͖Δ
    • ▶︎ػೳཁ݅͸جຊతͳ෦෼͸εΩοϓ
    • ▶︎෭ۀతʹ࢝Ί΍͍͢ͷͰ৽͍͠௅ઓ΋͠΍͍͢
    ϓϥοτϑΥʔϜ্Ͱޮ཰Α͘Ք͙
    ୈ3ͷτϨϯ
    υ
    

    View Slide

23. 23
    ೔ຊಛԽܕͷΞϓϦͷ޻৔
    ೔ຊͰͷ
    ࣄྫ
    डୗҊ݅తχʔζΛҰൠԽ
    

    View Slide

24. 24
    ΫϩεϓϥοτϑΥʔϜͰαʔϏεఏڙ
    ೔ຊͰͷ
    ࣄྫ
    ҰൠతχʔζΛαʔϏεԽ
    

    View Slide

25. 25
    ։ൃऀͱ੍࡞ձࣾͷڠۀʢΪϧυʣ
    ೔ຊͰͷ
    ࣄྫ
    ݸਓͱاۀͰେ͖ͳϏδωε
    

    View Slide

26. 26
    ͜Μͳϒ
    ϩά
    ΋ɾɾɾ
    ※͋͘·Ͱύʔτφʔ͞ΜͷݸਓతͳਪଌͰ͢
    

    View Slide

27. 27
    ShopifyΞϓϦͷ։ൃͷֶश
    

    View Slide

28. 28
    Shopify ύʔτφʔϒϩά
    Shopify ΞϓϦ։ൃ
    ΞϓϦͷ
    ։ൃͱެ
    ։
    

    View Slide

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

    View Slide

30. 30
    Shopify ύʔτφʔFacebookάϧʔϓ
    ύʔτ
    φʔͱͷ
    ڠۀ
    ※ࢀՃʹ͸ύʔτφʔΞΧ΢ϯτ͕ඞཁͰ͢
    

    View Slide

31. View Slide