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
2.1k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
510
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
160
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
200
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.3k
Tech. Blog TIPS
benzookapi
0
290
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
280
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
4 Signs Your Business is Dying
shpigford
184
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing for Performance
lara
610
69k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Embracing the Ebb and Flow
colly
86
4.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
BBQ
matthewcrist
89
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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!