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_Theme_workshop_20191125.pdf
Search
benzookapi
November 25, 2019
0
490
App_Theme_workshop_20191125.pdf
benzookapi
November 25, 2019
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
1.9k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
420
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
120
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
160
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
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
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Navigating Team Friction
lara
183
15k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
RailsConf 2023
tenderlove
29
940
Visualization
eitanlees
146
15k
Six Lessons from altMBA
skipperchong
27
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Transcript
#shopifyjpmeetup ΞϓϦɾςʔϚϫʔΫγϣοϓ #3ʢ࣮ફฤʣ
• Junichi Okamura, Technical Partner Manager at Shopify • @benzookapi
• API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
• Shopify͓ΑͼύʔτφʔϓϩάϥϜʹ͍ͭͯʢ؆୯ʹʣ • ύʔτφʔΞΧϯτͷ࡞ ʢ※ࣄલʹ͍ͯͨͩ͘͠ͷͰಉ͘͡؆୯ʹʣ • ΞϓϦ͓ΑͼςʔϚͷجຊߏʢApp BridgeɺPolarisɺWebhookɺLiquidʣ • ΞϓϦ͓ΑͼςʔϚͷϋϯζΦϯʢνϡʔτϦΞϧɺը໘ͱThemeKitͰͷฤूʣ
• ཧऀը໘ͷσβΠϯʢPolarisαΠτΛͬͨίϯϙʔωϯτฤूͷσϞʣ • REST APIͱGraphQLͷ͍ํʢAPI ToolΛͬͨAPIͷಈ࡞֬ೝͷσϞʣ • ࣮ࡍͷΞϓϦʹΑ͘ΘΕΔٕज़ͰཧղΛਂΊΔʢTheme APIɺApp proxiesʣ • Q&AɺΞϯέʔτɺަྲྀձ ຊͷ༰ʢ࣮ફతʹͯ͠Έ·ͨ͠ʣ ϋογϡλά #shopifyjpmeetup !
Make Commerce Better For Everyone
ShopifyΫϥυϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ͢ɻ ݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopifyϩʔϯν $1,073M ؒརӹֹ (աڈ12ϱ݄) 2,900+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ $100B
ࣄۀऀ༷ͷ૯ྲྀ௨ֹ (ྦྷܭ) 2.1 million ϢχʔΫͷετΞΞΧϯτ 1,00,000 ళฮ —— ~175ϱࠃ 4,000+ ࣾһ 22,000 աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛ ϦϦʔεͨ͠ύʔτφʔͷ #shopifyjpmeetup
ShopifyύʔτφʔΤίγεςϜ Ϛʔνϟϯτ͕ αʔυύʔςΟʔ ΞϓϦΛར༻ 80%+ ύʔτφʔ͔Βͷհ Ϛʔνϟϯτ 200,000+ Shopifyύʔτφʔ͕ಘͨऩӹ 1,320ԯԁ
(2018) ΞϓϦ։ൃύʔτφʔ͕ ಘͨऩӹ 200ԯԁ (2018)
ετΞߏஙύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ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
ύʔτφʔΞΧϯτͷ࡞ #shopifyjpmeetup Shopify ύʔτφʔ https://www.shopify.jp/partners
։ൃετΞͷ࡞ #shopifyjpmeetup
։ൃετΞϩάΠϯ #shopifyjpmeetup
ΞϓϦɾςʔϚͷجຊߏ #shopifyjpmeetup
ΞϓϦͷߏ #shopifyjpmeetup Partner Server App Bridge (page) App Bridge (Action)
Admin API Storefront API Polaris (UI) Webhook Webhook App Bridge (POS) API calls
ςʔϚͷߏ #shopifyjpmeetup Shopify Server (Liquid runtime) Layout (theme.liquid) Templates (collection.liquid)
Templates (search.liquid) … And more Home (common parts) Collection Search page … And more Liquid Liquid Liquid
App Bridgeͱʁ #shopifyjpmeetup ShopifyʹΞϓϦΛຒΊࠐΉͨΊͷJavascriptϥΠϒϥϦʢPOSΞϓϦʹରԠʣ
Polarisͱʁ #shopifyjpmeetup ShopifyϚʔνϟϯτʹ࠷దͳUXΛఏڙ͢ΔͨΊͷCSSʢReact ʣϥΠϒϥϦʢOSSʣ
Webhookͱʁ #shopifyjpmeetup Shopifyͷσʔλߋ৽ͷΠϕϯτΛ௨ͯ͘͠ΕΔػೳʢAPIΛݺͼग़͢͜ͱՄೳʣ ※ʮઃఆʯ> ʮ௨ʯ > ʮWebhookʯ ͔ΒઃఆͰ͖·͢ Webhookͱ
Liquidͱʁ #shopifyjpmeetup Shopify͕։ൃͨ͠RubyͰॻ͔ΕͨςϯϓϨʔτݴޠʢOSSʣ Tags: {% %} ݅ذ܁Γฦ͠ͷจ Objects: {{}} σʔλ༰ͷදࣔ
Filters: | σʔλͷϑΥʔϚοτ
ϋϯζΦϯʢΞϓϦʣ #shopifyjpmeetup
νϡʔτϦΞϧͰ࡞ͬͯΈΔ #shopifyjpmeetup Shopify app νϡʔτϦΞϧ https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react?locale=ja
ΞϓϦ։ൃखॱᶃɿඞཁͳٕज़ɺ༻ޠͷཧ #shopifyjpmeetup HTMLɺCSSɺJavaScriptɺJSONɺΫΤϦͳͲͷཧղඞਢͰ͢ɻ ࿅शɿ ֤༻ޠΛࣗͷݴ༿Ͱ આ໌ͯ͠ΈΑ͏
ΞϓϦ։ൃखॱᶄɿڥઃఆͱॳظঢ়ଶͷΞϓϦͷ࡞ #shopifyjpmeetup ίϚϯυϥΠϯπʔϧඞཁϥΠϒϥϦͷΠϯετʔϧͱىಈ֬ೝ ࿅शɿ ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦·ͰͨͲΓண͍ ͯΈΑ͏
ศརͳίϚϯυπʔϧ Shopify App CLI #shopifyjpmeetup ϑΝΠϧͷࣗಈੜɺΞϓϦͷىಈఀࢭɺHerokuσϓϩΠ·Ͱʂ https://github.com/Shopify/shopify-app-cli Shopify app CLI
ΞϓϦ։ൃखॱᶅɿAPIೝূͱΞϓϦͷΠϯετʔϧ #shopifyjpmeetup OAuth༻ͷೝূใͱετΞͷΞϓϦΠϯετʔϧʢύʔϛογϣϯ༩ʣ ࿅शɿ ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦·ͰͨͲΓண͍ ͯΈΑ͏
ϋϯζΦϯʢςʔϚʣ #shopifyjpmeetup
ςʔϚͷΧελϚΠζํ๏ᶃɿηΫγϣϯ #shopifyjpmeetup GUIͰ෦Λυϥοά&υϩοϓͰฤूͰ͖Δ͓खܰΧελϚΠζํ๏ ࿅शɿ ηΫγϣϯΛυϥοά &υϩοϓͯ͠ΈΑ͏ʂ
ςʔϚͷΧελϚΠζํ๏ᶄɿίʔυฤू #shopifyjpmeetup ςʔϚͷϑΝΠϧͷHTMLΛ͍͡ΕΔॊೈͳํ๏ ࿅शɿ HTMLͷཁૉΛ͍ͬͯ͡ ֎ݟΛม͑ͯΈΑ͏ʂ
ςʔϚͷΧελϚΠζํ๏ᶅɿLiquid #shopifyjpmeetup HTMLʹ͞Βʹ੍ޚॲཧΛೖΕͯը໘Λಈతʹදࣔ͢Δํ๏ ࿅शɿ ݱࡏͷϖʔδͷ ςʔϚϑΝΠϧ໊Λ දࣔͯ͠ΈΑ͏
ςʔϚͷΧελϚΠζํ๏ᶆɿϩʔΧϧͰฤू #shopifyjpmeetup Shopify Theme Kit ͱ͍͏ίϚϯυϥΠϯπʔϧΛ͏ํ๏ https://shopify.github.io/themekit/ Shopify Theme kit
࿅शɿ ίϚϯυϥΠϯͰςʔϚͷ࡞ ͱొɺมߋࢹΛͯ͠ΈΑ͏ ʢVS StudioʹLiquidͷ extension͋Γ·͢ʣ
ςʔϚͷϑΝΠϧߏ #shopifyjpmeetup Layout > Templates > SectionsʢηΫγϣϯͷ࣮ମʣ Assets:ΠϯΫϧʔυ͢ΔϑΝΠϧ Config:ઃఆϑΝΠϧ Locales:ϩʔΧϦθʔγϣϯʢ༁ʣσʔλ
ɹ※Localesʮݴޠͷฤूʯ͔ΒมߋՄೳ
ܾࡁྃը໘ͷJavaScriptͷຒΊࠐΈ #shopifyjpmeetup νΣοΫΞτͷઃఆͷʮՃεΫϦϓτʯʹهड़ ※ςʔϚͷઃఆͰͳ͍͜ͱʹ ҙɻจࣈΛຒΊࠐΜͩ߹ ςΩετͱͯ͠දࣔ͞Ε·͢
ςʔϚͷಠࣗೖྗ߲ͷՃ #shopifyjpmeetup Line Item Properties/Cart attribute ͱ͍͏δΣωϨʔλ͖ͷUI߲Λ͏ ※ੜ͞ΕͨίʔυΛςʔϚʹష Γ͚Δͱ͕จʹө͞ΕΔ ಠ߲͕ࣗ࡞Ε·͢
https://ui-elements-generator.myshopify.com/pages/line-item-property Shopify Line Item Properties
ཧը໘ͷσβΠϯ ʢPolarisʣ #shopifyjpmeetup
PolarisͷαϯϓϧΛ৮ͬͯΈΔ #shopifyjpmeetup https://polaris.shopify.com/ Shopify polaris
ΞϓϦ։ൃखॱᶆɿPolarisΛͬͯUIߏங #shopifyjpmeetup ετΞཧը໘ʹࣗࣗͷShopifyΆ͍ը໘ΛຒΊࠐΈ·͢ ࿅शɿ Ͱ͖Δͱ͜Ζ·Ͱը໘ Λ࡞ͬͯΈΑ͏ʢ̍ͭ ͰOK)
APIͷ͍ํ ʢREST/GraphQL) #shopifyjpmeetup
GraphQLͱʁ #shopifyjpmeetup SQLͱJSONͷ͍͍ͱ͜औΓΛͨ͠Α͏ͳAPI GraphQLͱ
GraphQL > REST #shopifyjpmeetup ࠓޙGraphQL͕ਪʹͳΓ·͕͢ɺซ༻ՄೳͰ͢ > Shopify api
REST API TOOL shopify developer tool https://help.shopify.com/en/api/tools/developer-tools #shopifyjpmeetup
GraphQL TOOL shopify graphql tool https://help.shopify.com/en/api/graphql-admin-api/graphiql-app #shopifyjpmeetup
࣮ࡍʹ৮ͬͯΈΑ͏ SHOP REST (local app) GraphQL (Shopify app) #shopifyjpmeetup
ΞϓϦ։ൃखॱᶇɿAPIΛͬͯσʔλΛૢ࡞ #shopifyjpmeetup GraphQL·ͨREST APIΛͬͯShopifyͷ΄΅શͯͷσʔλΛૢ࡞Ͱ͖·͢
࣮ࡍͷΞϓϦʹΑ͘ΘΕΔ ٕज़ͰཧղΛਂΊΔ #shopifyjpmeetup
ΞϓϦͷΠϯτʔϧը໘ΛνΣοΫ͢Δ #shopifyjpmeetup ύʔϛγϣϯΛ֬ೝ͢Δ͜ͱͰͲ͏͍࣮͕ͬͨ͞Ε͍ͯΔ͔༧ଌ͕ͭ͘
ετΞϑϩϯτ͚ͷͷϒϥβίϯιʔϧΛ׆༻ #shopifyjpmeetup Ͳͷը໘ͰͲ͏͍ͬͨ௨৴εΫϦϓτ͕ॲཧ͞Ε͍ͯΔ͔֬ೝ
ΞϓϦʹΑΔมߋՕॴΛ֬ೝ #shopifyjpmeetup ͲͷΞΫγϣϯϖʔδ͕֦ு͞Ε͍ͯΔ͔ͰͲ͏͍ͬͨઃܭʹͳ͍ͬͯΔ͔Θ͔Δ
Α͘ΘΕΔػೳᶃɿTheme API #shopifyjpmeetup ετΞϑϩϯτ͚ʹΞϓϦΠϯετʔϧ࣌ʹςʔϚΛࣗಈߋ৽͢Δͷʹ͏
Α͘ΘΕΔػೳᶄɿApp proxies #shopifyjpmeetup ετΞϑϩϯτ͔ΒΞϓϦͷURLΛγϣοϓͷURLͱͯ͠ݺͼग़͢ػೳ
·ͱΊ #shopifyjpmeetup
ωΫετΞΫγϣϯ #shopifyjpmeetup ͬͱཧղΛਂΊ͍ͨํɿ => ؤுͬͯӳޠͷυΩϡϝϯτΛಡΜͰͲΜͲΜखΛಈ͔ͦ͏ʂ Կ͔࣭͕ग़͖ͯͨΒʁɿ => ຊޠͷϑΥʔϥϜͰຊޠͰ࣭ͯ͠ΈΑ͏ʂ https://help.shopify.com/en/api/getting-started https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp
Shopify App Store #shopifyjpmeetup https://help.shopify.com/en/api/app-store/listing-in-the-app-store/app-submission ΞϓϦͷਃखॱɿ => ࡞ͬͨΞϓϦΛετΞʹਃͯ͠ΈΑ͏ʂ
ࠓޙͷ༧ఆ #shopifyjpmeetup • ΦϯϥΠϯϫʔΫγϣοϓʢYoutubeʣΛ༧ఆʢདྷ݄ʁʣ • ύʔτφʔ͞ΜͱͷϫʔΫγϣοϓʢεϥΠυςϯϓϨʔτఏڙʁʣ
Q&AɺΞϯέʔτʢ͑ͯͶʂʣ #shopifyjpmeetup
#shopifyjpmeetup Thank you!