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
220
App_workshop_20190925.pdf
benzookapi
September 19, 2019
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
0
1.8k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
340
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
120
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.1k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
3.6k
Tech. Blog TIPS
benzookapi
0
230
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
230
WordPressとShopifyでECサイトを作ろう
benzookapi
0
980
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
How to Ace a Technical Interview
jacobian
272
22k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Adopting Sorbet at Scale
ufuk
66
8.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Statistics for Hackers
jakevdp
789
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
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!