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

Slide 1

Slide 1 text

React + GraphQL Λ࢖ͬͨShopify Appͷ࡞Γํͱ ͦͷϚωλΠζํ๏ 2021.2.25 @ NodeֶԂ 35࣌ݶ໨ ΦϯϥΠϯτϥΠΞϧ Junichi Okamura 

Slide 2

Slide 2 text

• Junichi Okamura, Sr. Technical Partner Manager at Shopify • @benzookapi • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?

Slide 3

Slide 3 text

ShopifyΞϓϦ։ൃʹඞཁͳεΩϧ 01 ຊ೔ͷ͓୊ 02 ShopifyͱΞϓϦΤίγεςϜͷ֓ཁ 03 ShopifyΞϓϦ։ൃͷϚωλΠζ 04 ShopifyΞϓϦ։ൃͷֶशํ๏

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 ShopifyΞϓϦͷ։ൃʹඞཁͳεΩϧ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 ShopifyΞϓϦͷ։ൃͷֶश

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content