App_workshop_20190925.pdf

Slide 1

Slide 1 text

#shopifyjpmeetup ։ൃऀऀ޲͚ ΞϓϦϫʔΫγϣοϓ

Slide 2

Slide 2 text

• Junichi Okamura, 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ͱ͸ʁʢ௒؆୯ʹʣ • ShopifyύʔτφʔϓϩάϥϜͱ͸ʢ௒؆୯ʹʣ • ύʔτφʔΞΧ΢ϯτͱ։ൃετΞͷηοτΞοϓʢ΍΍؆୯ʹʣ • ShopifyΞϓϦͱ͸ʢ؆୯ʹʣ • νϡʔτϦΞϧΛ࢖ͬͨαϯϓϧΞϓϦͷ࡞੒ʢ΍΍ஸೡʹʣ • UI෦඼PolarisͱͦͷଞϥΠϒϥϦɺπʔϧʹ͍ͭͯʢؤுΓ·͢ʣ • ωΫετΞΫγϣϯɺࢀߟࢿྉʢؤு͍ͬͯͩ͘͞ʂʣ • Q&AɺΞϯέʔτɺަྲྀձ ʢWith Beer!ʣ ຊ೔ͷ಺༰ʢॳ৺ऀ޲͚Ͱ͢ʣ ϋογϡλά͸ #shopifyjpmeetup !

Slide 4

Slide 4 text

Make Commerce Better For Everyone

Slide 5

Slide 5 text

Shopify͸Ϋϥ΢υϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ͢ɻ ݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopifyϩʔϯν $1,073M ೥ؒརӹֹ (աڈ12ϱ݄) 2,900+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺ $100B ࣄۀऀ༷ͷ૯ྲྀ௨ֹ (ྦྷܭ) 2.1 million ϢχʔΫͷετΞΞΧ΢ϯτ਺ 820,000+ ళฮ —— ~175ϱࠃ 4,000+ ࣾһ਺ 22,000 աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛ  ϦϦʔεͨ͠ύʔτφʔͷ਺ #shopifyjpmeetup

Slide 6

Slide 6 text

+300% 2017೥͔Βͷళฮ਺੒௕཰ ೔ຊ #shopifyjpmeetup

Slide 7

Slide 7 text

• Ϛϧννϟωϧൢച • όοΫΦϑΟεޮ཰Խػೳ •֦ுੑͷߴ͍ج൫ͱՁ֨ • σβΠϯςϯϓϨʔτͷॆ࣮ • ݎ࿚Ͱ҆৺҆શͳΠϯϑϥج൫ Shopifyͷಛ௕ ύʔτφʔΤίγεςϜ

Slide 8

Slide 8 text

ShopifyύʔτφʔΤίγεςϜ Ϛʔνϟϯτ͕ αʔυύʔςΟʔ ΞϓϦΛར༻ 80%+ ύʔτφʔ͔Βͷ঺հ Ϛʔνϟϯτ 200,000+ Shopifyύʔτφʔ͕ಘͨऩӹ͸ 1,320ԯԁ (2018೥౓) ΞϓϦ։ൃύʔτφʔ͕ ಘͨऩӹ͸ 200ԯԁ (2018೥౓)

Slide 9

Slide 9 text

ύʔτφʔ؅ཧը໘ΑΓετΞߏங ߏஙத͸Shopifyͷར༻ྉ0ԁɻࣾ಺༻σϞετΞ΋͝༻ҙɻ σϕϩούʔϓϨϏϡʔͰඇެ։ͷShopify࠷৽ػೳͷ͓ࢼ͕͠Մೳɻ APIͰΧελϚΠζ΍ΞϓϦɾςʔϚͷൢച ։ൃऀ޲͚υΩϡϝϯτΛ๛෋ʹ͝༻ҙɻ ShopifyΞΧσϛʔͷແྉडߨ Shopifyύʔτφʔʹఏڙ͞ΕΔΦϯϥΠϯτϨʔχϯά͓ΑͼೝఆϓϩάϥϜɻ ShopifyύʔτφʔϓϩάϥϜ

Slide 10

Slide 10 text

ετΞߏஙύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ20%Λຖ݄ಘΔ͜ͱ͕Մೳɻ ঺հύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ͔݄̎෼ΛγϣοτͰಘΔ͜ͱ͕Մೳɻ ςʔϚσβΠϯύʔτφʔ ςʔϚετΞ্ͷച্͛ͷ࠷େ70%ΛಘΔ͜ͱ͕Մೳɻ ΞϓϦ։ൃύʔτφʔ ΞϓϦετΞ্ͷച্͛ͷ80%ΛಘΔ͜ͱ͕Մೳɻ Shopifyύʔτφ޲͚ϨϕχϡʔγΣΞ

Slide 11

Slide 11 text

Bold Commerce - ΞϓϦ։ൃύʔτφʔ 2012೥ʹ༑ਓ4ਓͰShopifyΞϓϦͷ։ൃΛ࢝Ίɺ ࠷ॳʹެ։ͨ͠ΞϓϦʮBold Upsellʯ͕େώοτͨ͜͠ͱΛ͖͔͚ͬʹ ຊ֨తʹShopifyͷΞϓϦΛ։ൃ͠·ͨ͠ɻ ݱࡏɺ20Ҏ্ͷύϒϦοΫΞϓϦͱԿඦ΋ͷϓϥΠϕʔτΞϓϦΛ։ൃ͠ɺ ߹ܭ100,000Ҏ্ͷେखاۀؚΜͩސ٬͕ΞϓϦΛ࢖༻͓ͯ͠Γ·͢ɻ ࠓ͸250ਓͷैۀһΛ๊͑ɺड৆ܦݧͷ͋Δاۀʹ·Ͱ੒௕͠ɺ ஍ݩͷΧφμͷϚχτόभͰ͸࠷΋ૣ͘੒௕Λ਱͛ͨITاۀͱͳΓ·ͨ͠ɻ Shopifyύʔτφʔͷ੒ޭࣄྫ

Slide 12

Slide 12 text

Shopify ςʔϚετΞ 100छྨҎ্ͷσβΠϯςϯϓϨʔτ https://themes.shopify.com

Slide 13

Slide 13 text

2,900+ ެ։͞Ε͍ͯΔAPIͰࣗ༝ʹΧελϚΠζ΍ΞϓϦͷ࡞੒͕Մೳ ച্Ξοϓ ഑ૹ ࡏݿ؅ཧ ސ٬؅ཧ ࡒ຿ɾձܭ ଟݴޠɾଟ௨՟ Ϩϙʔτ ιʔγϟϧ ϚʔέςΟϯά Shopify ΞϓϦετΞ https://apps.shopify.com/?locale=ja

Slide 14

Slide 14 text

͍ͯ͞Α͍ΑϋϯζΦϯʂ #shopifyjpmeetup ʢੵۃతʹG○ogleઌੜͷྗΛआΓ͍͖ͯ·͢ʣ

Slide 15

Slide 15 text

ύʔτφʔΞΧ΢ϯτͷ࡞੒ #shopifyjpmeetup Shopify ύʔτφʔ https://www.shopify.jp/partners

Slide 16

Slide 16 text

։ൃετΞͷ࡞੒ #shopifyjpmeetup

Slide 17

Slide 17 text

։ൃετΞ΁ϩάΠϯ #shopifyjpmeetup

Slide 18

Slide 18 text

ΞϓϦͱ͸ʁ #shopifyjpmeetup Shopify app https://help.shopify.com/ja/partners/making-apps

Slide 19

Slide 19 text

Α͘Θ͔Βͳ͍ͷͰ࡞ͬͯΈΑ͏ #shopifyjpmeetup Shopify app νϡʔτϦΞϧ https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react?locale=ja

Slide 20

Slide 20 text

ΞϓϦ։ൃखॱᶃɿඞཁͳٕज़ɺ༻ޠͷ੔ཧ #shopifyjpmeetup HTMLɺCSSɺJavaScriptɺJSONɺΫΤϦͳͲͷཧղ͸ඞਢͰ͢ɻ ࿅शɿ  ֤༻ޠΛࣗ෼ͷݴ༿Ͱ આ໌ͯ͠ΈΑ͏

Slide 21

Slide 21 text

ΞϓϦ։ൃखॱᶄɿ؀ڥઃఆͱॳظঢ়ଶͷΞϓϦͷ࡞੒ #shopifyjpmeetup ίϚϯυϥΠϯπʔϧ΍ඞཁϥΠϒϥϦͷΠϯετʔϧͱىಈ֬ೝ ࿅शɿ  ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦෼·ͰͨͲΓண͍ ͯΈΑ͏

Slide 22

Slide 22 text

ΞϓϦ։ൃखॱᶅɿAPIೝূͱΞϓϦͷΠϯετʔϧ #shopifyjpmeetup OAuth༻ͷೝূ৘ใͱετΞ΁ͷΞϓϦΠϯετʔϧʢύʔϛογϣϯ෇༩ʣ ࿅शɿ  ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦෼·ͰͨͲΓண͍ ͯΈΑ͏

Slide 23

Slide 23 text

ΞϓϦ։ൃखॱᶆɿPolarisΛ࢖ͬͯUIߏங #shopifyjpmeetup ετΞ؅ཧը໘ʹࣗ෼ࣗ਎ͷShopifyΆ͍ը໘ΛຒΊࠐΈ·͢ ࿅शɿ  Ͱ͖Δͱ͜Ζ·Ͱը໘ Λ࡞ͬͯΈΑ͏ʢ̍ͭ Ͱ΋OK)

Slide 24

Slide 24 text

Polarisʁʁʁ #shopifyjpmeetup https://polaris.shopify.com/ Shopify polaris ʹཁ͸B○otstrap?

Slide 25

Slide 25 text

ΞϓϦ։ൃखॱᶇɿAPIΛ࢖ͬͯσʔλΛૢ࡞ #shopifyjpmeetup GraphQL·ͨ͸REST APIΛ࢖ͬͯShopifyͷ΄΅શͯͷσʔλΛૢ࡞Ͱ͖·͢

Slide 26

Slide 26 text

GraphQLʁʁʁ #shopifyjpmeetup ฏͨ͘ݴ͏ͱSQLͱJSONͷ͍͍ͱ͜औΓͨ͠Α͏ͳAPIͰ͢ ࿅शɿ  GraphQL AppͰΫΤϦ Λ࣮ߦͯ͠ΈΑ͏ ※લϖʔδͷʮGraphQL Explorerʯ ͔ΒભҠͰ͖·͢ GraphQLͱ͸

Slide 27

Slide 27 text

GraphQL > REST #shopifyjpmeetup ࠓޙ͸GraphQL͕ਪ঑ʹͳΓ·͕͢ɺซ༻΋ՄೳͰ͢ > Shopify api

Slide 28

Slide 28 text

Ҏ্͕ΞϓϦ։ൃͷ࠷௿ඞཁखॱͰ͢ #shopifyjpmeetup ࢒Γ͸ͥͻ͓͏ͪʹؼͬͯWebhookͷষ·ͰͨͲΓண͍͍ͯͩ͘͞

Slide 29

Slide 29 text

Webhookʁʁʁ #shopifyjpmeetup Shopifyͷओͳσʔλͷ௥Ճɺߋ৽ɺ࡟আͷΠϕϯτͷ৘ใΛ௨஌ͯ͘͠ΕΔػೳͰ͢ ࿅शɿ  Կ͔̍ͭWebhookΛ௥ Ճͯ͠ΈΑ͏ ※ʮઃఆʯ> ʮ௨஌ʯ > ʮWebhookʯ ͔ΒઃఆͰ͖·͢ Webhookͱ͸

Slide 30

Slide 30 text

ิ଍ᶃɿศརͳίϚϯυπʔϧ Shopify App CLI #shopifyjpmeetup ࠓ೔ख࡞ۀͰ࡞ͬͨϑΝΠϧΛࣗಈੜ੒ɺىಈఀࢭɺHerokuσϓϩΠ·Ͱʂ https://github.com/Shopify/shopify-app-cli Shopify app CLI

Slide 31

Slide 31 text

ิ଍ᶄɿPOSΞϓϦ΋࡞ΕΔΠϯλϑΣʔεApp Bridge #shopifyjpmeetup Shopify؅ཧը໘ٴͼPOSΞϓϦʹϝχϡʔ΍ΠϕϯτΛೖΕΔJSϥΠϒϥϦ https://help.shopify.com/en/api/embedded-apps/app-bridge Shopify app bridge ※Shopify POS App SDKͱShopify Embedded App SDK͸ App Bridgeʹ౷߹͞Ε·ͨ͠

Slide 32

Slide 32 text

ωΫετΞΫγϣϯ #shopifyjpmeetup ΋ͬͱཧղΛਂΊ͍ͨํɿ => ؤுͬͯӳޠͷυΩϡϝϯτΛಡΜͰͲΜͲΜखΛಈ͔ͦ͏ʂ Կ͔࣭໰͕ग़͖ͯͨΒʁɿ => ೔ຊޠͷϑΥʔϥϜͰ೔ຊޠͰ࣭໰ͯ͠ΈΑ͏ʂ https://help.shopify.com/en/api/getting-started https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp

Slide 33

Slide 33 text

Shopify Japan Community #shopifyjpmeetup https://www.facebook.com/groups/218016361970323/ ϢʔβʔओମͷίϛϡχςΟɿ => ଞͷ஥ؒͱͭͳ͕ͬͯ৘ใަ׵ͯ͠ΈΑ͏ʂ

Slide 34

Slide 34 text

Shopify App Store #shopifyjpmeetup https://help.shopify.com/en/api/app-store/listing-in-the-app-store/app-submission ΞϓϦͷਃ੥खॱɿ => ࡞ͬͨΞϓϦΛετΞʹਃ੥ͯ͠ΈΑ͏ʂ