Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
App_workshop_20190925.pdf
Search
benzookapi
September 19, 2019
0
230
App_workshop_20190925.pdf
benzookapi
September 19, 2019
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
440
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
130
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
170
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.1k
Tech. Blog TIPS
benzookapi
0
260
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
260
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
344
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Transcript
#shopifyjpmeetup ։ൃऀऀ͚ ΞϓϦϫʔΫγϣοϓ
• Junichi Okamura, Technical Partner Manager at Shopify • @benzookapi
• API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
• Shopifyͱʁʢ؆୯ʹʣ • ShopifyύʔτφʔϓϩάϥϜͱʢ؆୯ʹʣ • ύʔτφʔΞΧϯτͱ։ൃετΞͷηοτΞοϓʢ؆୯ʹʣ • ShopifyΞϓϦͱʢ؆୯ʹʣ • νϡʔτϦΞϧΛͬͨαϯϓϧΞϓϦͷ࡞ʢஸೡʹʣ
• UI෦PolarisͱͦͷଞϥΠϒϥϦɺπʔϧʹ͍ͭͯʢؤுΓ·͢ʣ • ωΫετΞΫγϣϯɺࢀߟࢿྉʢؤு͍ͬͯͩ͘͞ʂʣ • Q&AɺΞϯέʔτɺަྲྀձ ʢWith Beer!ʣ ຊͷ༰ʢॳ৺ऀ͚Ͱ͢ʣ ϋογϡλά #shopifyjpmeetup !
Make Commerce Better For Everyone
ShopifyΫϥυϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ͢ɻ ݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopifyϩʔϯν $1,073M ؒརӹֹ (աڈ12ϱ݄) 2,900+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ $100B
ࣄۀऀ༷ͷ૯ྲྀ௨ֹ (ྦྷܭ) 2.1 million ϢχʔΫͷετΞΞΧϯτ 820,000+ ళฮ —— ~175ϱࠃ 4,000+ ࣾһ 22,000 աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛ ϦϦʔεͨ͠ύʔτφʔͷ #shopifyjpmeetup
+300% 2017͔Βͷళฮ ຊ #shopifyjpmeetup
• Ϛϧννϟωϧൢച • όοΫΦϑΟεޮԽػೳ •֦ுੑͷߴ͍ج൫ͱՁ֨ • σβΠϯςϯϓϨʔτͷॆ࣮ • ݎ࿚Ͱ҆৺҆શͳΠϯϑϥج൫ Shopifyͷಛ
ύʔτφʔΤίγεςϜ
ShopifyύʔτφʔΤίγεςϜ Ϛʔνϟϯτ͕ αʔυύʔςΟʔ ΞϓϦΛར༻ 80%+ ύʔτφʔ͔Βͷհ Ϛʔνϟϯτ 200,000+ Shopifyύʔτφʔ͕ಘͨऩӹ 1,320ԯԁ
(2018) ΞϓϦ։ൃύʔτφʔ͕ ಘͨऩӹ 200ԯԁ (2018)
ύʔτφʔཧը໘ΑΓετΞߏங ߏஙதShopifyͷར༻ྉ0ԁɻࣾ༻σϞετΞ͝༻ҙɻ σϕϩούʔϓϨϏϡʔͰඇެ։ͷShopify࠷৽ػೳͷ͓ࢼ͕͠Մೳɻ APIͰΧελϚΠζΞϓϦɾςʔϚͷൢച ։ൃऀ͚υΩϡϝϯτΛ๛ʹ͝༻ҙɻ ShopifyΞΧσϛʔͷແྉडߨ Shopifyύʔτφʔʹఏڙ͞ΕΔΦϯϥΠϯτϨʔχϯά͓ΑͼೝఆϓϩάϥϜɻ ShopifyύʔτφʔϓϩάϥϜ
ετΞߏஙύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ20%Λຖ݄ಘΔ͜ͱ͕Մೳɻ հύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ͔݄̎ΛγϣοτͰಘΔ͜ͱ͕Մೳɻ ςʔϚσβΠϯύʔτφʔ ςʔϚετΞ্ͷച্͛ͷ࠷େ70%ΛಘΔ͜ͱ͕Մೳɻ ΞϓϦ։ൃύʔτφʔ ΞϓϦετΞ্ͷച্͛ͷ80%ΛಘΔ͜ͱ͕Մೳɻ Shopifyύʔτφ͚ϨϕχϡʔγΣΞ
Bold Commerce - ΞϓϦ։ൃύʔτφʔ 2012ʹ༑ਓ4ਓͰShopifyΞϓϦͷ։ൃΛ࢝Ίɺ ࠷ॳʹެ։ͨ͠ΞϓϦʮBold Upsellʯ͕େώοτͨ͜͠ͱΛ͖͔͚ͬʹ ຊ֨తʹShopifyͷΞϓϦΛ։ൃ͠·ͨ͠ɻ ݱࡏɺ20Ҏ্ͷύϒϦοΫΞϓϦͱԿඦͷϓϥΠϕʔτΞϓϦΛ։ൃ͠ɺ ߹ܭ100,000Ҏ্ͷେखاۀؚΜͩސ٬͕ΞϓϦΛ༻͓ͯ͠Γ·͢ɻ
ࠓ250ਓͷैۀһΛ๊͑ɺडܦݧͷ͋Δاۀʹ·Ͱ͠ɺ ݩͷΧφμͷϚχτόभͰ࠷ૣ͘Λ͛ͨITاۀͱͳΓ·ͨ͠ɻ Shopifyύʔτφʔͷޭࣄྫ
Shopify ςʔϚετΞ 100छྨҎ্ͷσβΠϯςϯϓϨʔτ https://themes.shopify.com
2,900+ ެ։͞Ε͍ͯΔAPIͰࣗ༝ʹΧελϚΠζΞϓϦͷ࡞͕Մೳ ച্Ξοϓ ૹ ࡏݿཧ ސ٬ཧ ࡒɾձܭ ଟݴޠɾଟ௨՟ Ϩϙʔτ ιʔγϟϧ
ϚʔέςΟϯά Shopify ΞϓϦετΞ https://apps.shopify.com/?locale=ja
͍ͯ͞Α͍ΑϋϯζΦϯʂ #shopifyjpmeetup ʢੵۃతʹG◦ogleઌੜͷྗΛआΓ͍͖ͯ·͢ʣ
ύʔτφʔΞΧϯτͷ࡞ #shopifyjpmeetup Shopify ύʔτφʔ https://www.shopify.jp/partners
։ൃετΞͷ࡞ #shopifyjpmeetup
։ൃετΞϩάΠϯ #shopifyjpmeetup
ΞϓϦͱʁ #shopifyjpmeetup Shopify app https://help.shopify.com/ja/partners/making-apps
Α͘Θ͔Βͳ͍ͷͰ࡞ͬͯΈΑ͏ #shopifyjpmeetup Shopify app νϡʔτϦΞϧ https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react?locale=ja
ΞϓϦ։ൃखॱᶃɿඞཁͳٕज़ɺ༻ޠͷཧ #shopifyjpmeetup HTMLɺCSSɺJavaScriptɺJSONɺΫΤϦͳͲͷཧղඞਢͰ͢ɻ ࿅शɿ ֤༻ޠΛࣗͷݴ༿Ͱ આ໌ͯ͠ΈΑ͏
ΞϓϦ։ൃखॱᶄɿڥઃఆͱॳظঢ়ଶͷΞϓϦͷ࡞ #shopifyjpmeetup ίϚϯυϥΠϯπʔϧඞཁϥΠϒϥϦͷΠϯετʔϧͱىಈ֬ೝ ࿅शɿ ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦·ͰͨͲΓண͍ ͯΈΑ͏
ΞϓϦ։ൃखॱᶅɿAPIೝূͱΞϓϦͷΠϯετʔϧ #shopifyjpmeetup OAuth༻ͷೝূใͱετΞͷΞϓϦΠϯετʔϧʢύʔϛογϣϯ༩ʣ ࿅शɿ ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦·ͰͨͲΓண͍ ͯΈΑ͏
ΞϓϦ։ൃखॱᶆɿPolarisΛͬͯUIߏங #shopifyjpmeetup ετΞཧը໘ʹࣗࣗͷShopifyΆ͍ը໘ΛຒΊࠐΈ·͢ ࿅शɿ Ͱ͖Δͱ͜Ζ·Ͱը໘ Λ࡞ͬͯΈΑ͏ʢ̍ͭ ͰOK)
Polarisʁʁʁ #shopifyjpmeetup https://polaris.shopify.com/ Shopify polaris ʹཁB◦otstrap?
ΞϓϦ։ൃखॱᶇɿAPIΛͬͯσʔλΛૢ࡞ #shopifyjpmeetup GraphQL·ͨREST APIΛͬͯShopifyͷ΄΅શͯͷσʔλΛૢ࡞Ͱ͖·͢
GraphQLʁʁʁ #shopifyjpmeetup ฏͨ͘ݴ͏ͱSQLͱJSONͷ͍͍ͱ͜औΓͨ͠Α͏ͳAPIͰ͢ ࿅शɿ GraphQL AppͰΫΤϦ Λ࣮ߦͯ͠ΈΑ͏ ※લϖʔδͷʮGraphQL Explorerʯ ͔ΒભҠͰ͖·͢
GraphQLͱ
GraphQL > REST #shopifyjpmeetup ࠓޙGraphQL͕ਪʹͳΓ·͕͢ɺซ༻ՄೳͰ͢ > Shopify api
Ҏ্͕ΞϓϦ։ൃͷ࠷ඞཁखॱͰ͢ #shopifyjpmeetup Γͥͻ͓͏ͪʹؼͬͯWebhookͷষ·ͰͨͲΓண͍͍ͯͩ͘͞
Webhookʁʁʁ #shopifyjpmeetup ShopifyͷओͳσʔλͷՃɺߋ৽ɺআͷΠϕϯτͷใΛ௨ͯ͘͠ΕΔػೳͰ͢ ࿅शɿ Կ͔̍ͭWebhookΛ Ճͯ͠ΈΑ͏ ※ʮઃఆʯ> ʮ௨ʯ > ʮWebhookʯ
͔ΒઃఆͰ͖·͢ Webhookͱ
ิᶃɿศརͳίϚϯυπʔϧ Shopify App CLI #shopifyjpmeetup ࠓख࡞ۀͰ࡞ͬͨϑΝΠϧΛࣗಈੜɺىಈఀࢭɺHerokuσϓϩΠ·Ͱʂ https://github.com/Shopify/shopify-app-cli Shopify app CLI
ิᶄɿ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ʹ౷߹͞Ε·ͨ͠
ωΫετΞΫγϣϯ #shopifyjpmeetup ͬͱཧղΛਂΊ͍ͨํɿ => ؤுͬͯӳޠͷυΩϡϝϯτΛಡΜͰͲΜͲΜखΛಈ͔ͦ͏ʂ Կ͔࣭͕ग़͖ͯͨΒʁɿ => ຊޠͷϑΥʔϥϜͰຊޠͰ࣭ͯ͠ΈΑ͏ʂ https://help.shopify.com/en/api/getting-started https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp
Shopify Japan Community #shopifyjpmeetup https://www.facebook.com/groups/218016361970323/ ϢʔβʔओମͷίϛϡχςΟɿ => ଞͷؒͱͭͳ͕ͬͯใަͯ͠ΈΑ͏ʂ
Shopify App Store #shopifyjpmeetup https://help.shopify.com/en/api/app-store/listing-in-the-app-store/app-submission ΞϓϦͷਃखॱɿ => ࡞ͬͨΞϓϦΛετΞʹਃͯ͠ΈΑ͏ʂ
Q&AɺΞϯέʔτʢ͑ͯͶʂʣ #shopifyjpmeetup
#shopifyjpmeetup Thank you!