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
1.9k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
410
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
150
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.2k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.1k
Tech. Blog TIPS
benzookapi
0
250
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
250
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Faster Mobile Websites
deanohume
305
30k
We Have a Design System, Now What?
morganepeng
50
7.2k
A designer walks into a library…
pauljervisheath
204
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
For a Future-Friendly Web
brad_frost
175
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
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!