Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
benzookapi
February 25, 2021
Technology
1.4k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
https://nodejs.connpass.com/event/203464/
benzookapi
February 25, 2021
Transcript
31 slides
React + GraphQL ΛͬͨShopify Appͷ࡞Γํͱ ͦͷϚωλΠζํ๏ 2021.2.25 @ NodeֶԂ 35࣌ݶ
ΦϯϥΠϯτϥΠΞϧ Junichi Okamura
• Junichi Okamura, Sr. Technical Partner Manager at Shopify •
@benzookapi • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
ShopifyΞϓϦ։ൃʹඞཁͳεΩϧ 01 ຊͷ͓ 02 ShopifyͱΞϓϦΤίγεςϜͷ֓ཁ 03 ShopifyΞϓϦ։ൃͷϚωλΠζ 04 ShopifyΞϓϦ։ൃͷֶशํ๏
4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
ShopifyΫϥυϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $2,9B ऩӹֹ (աڈ12ϱ݄) 6,000+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ
$277B ࣄۀऀ༷ͷGMV (ྦྷܭ) 4.9 million ళฮͷελοϑΞΧϯτ 1,700,000+ ళฮ —— 175ϱࠃ~ 7,000+ ࣾһ Shopifyʹ͍ͭͯ શϦϞʔτԽ Digital by defaultͷͱ2020·ͰΦϑΟεΛશΫϩʔζ
ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ
ShopifyൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ੳ σʔλ ϓϥΠόγʔ ड υϝΠϯ
ετΞ࡞ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά
൚༻ੑ͕ߴࣗ͘༝ͷߴ͍ΧελϚΠζ͕Մೳ ෳ։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛ͳAPI Access APIs Inventory APIs Product APIs Analytics APIs
MarketingEvent Sales channel APIs Billing APIs Metafield Shipping and fulfillment APIs Customer APIs Online store APIs Shopify Payments APIs Discount APIs Order APIs Store property APIs Event APIs Plus APIs TenderTransaction
9 ShopifyͷΞϓϦΤίγεςϜ
10 ShopifyΞϓϦετΞͱύʔτφʔϓϩάϥϜ ֦େ͢Δ Τίγε ςϜ
11 ຊͰΞϓϦΤίγεςϜٸ֦େ ֦େ͢Δ Τίγε ςϜ ຊಛԽ
12 ΞϓϦ։ൃͷୈҰาɿύʔτφʔొ ֦େ͢Δ Τίγε ςϜ
13 ShopifyΞϓϦͷ։ൃʹඞཁͳεΩϧ
14 ϚϧνςφϯτܕͷΣϒ։ൃͷܦݧ ShopifyΞϓ Ϧ։ൃʹඞ ཁͳεΩϧ ਤͷग़యɿεϚΫϥ https://www.smclbms.com/smcl/service_edi/multiTenant ShopifyΞϓϦʹΫϥυܕ OSSϓϥάΠϯʹܕ εέʔϧΞτͷඞཁੑ
15 ϑϩϯτΤϯυͱόοΫΤϯυͷόϥϯεྑ͍ࣝ ShopifyΞϓ Ϧ։ൃʹඞ ཁͳεΩϧ ϑϩϯτΤϯυʢετΞʣ όοΫΤϯυʢཧը໘ʣ JavaScript/HTML/CSS/Liquid GraphQL/React/REST/Database
16 ShopifyΞϓϦͷΞʔΩςΫνϟ ΞϓϦͷ ߏ
17 ShopifyΞϓϦͷΞʔΩςΫνϟ ΞϓϦͷ ߏ EventBridge AWS
18 Shopify App CLIͰߴ։ൃʂ Node+ React͍ ͳΒɾɾɾ
19 ShopifyΞϓϦͷ։ൃͷϚωλΠζ
20 ੈքதͰΘΕ͍ͯΔΞϓϦͷ ΞϓϦ ύʔτφʔ ޭࣄྫ
21 • ࣗࣾαʔϏεΛߟ͑ͯىۀɺ·ͨͦ͏͍ͬͨձࣾͰಇ͘ • ▶︎ػೳઃܭސ٬։Λશ෦ࣗୡͰߦ͏ඞཁ͋Γ • ▶︎ചΕΔ·Ͱ͠ΜͲ͍ɺ֮ޛͱ͕࣌ؒඞཁ • डୗҊ݅Λडͯ͠ೲɺ·ͨͦ͏͍ͬͨձࣾͰಇ͘ •
▶︎ػೳཁ݅Λސ٬͝ͱʹ٧ΊΔඞཁ͕͋Δ • ▶︎εέʔϧ͠ʹ͍͘ɺࣄ͕ݻఆԽ͕ͪ͠ ࣗࣾαʔϏε vs डୗ։ൃ ΤϯδχΞͷ ΩϟϦΞͰΑ ͘ʹͳΔ ͜ͱ
22 • ϓϥοτϑΥʔϜͷجຊػೳطଘސ٬ʹࣗࣾαʔϏεͷఏ ڙडୗ։ൃΛఏڙ͢Δ • ▶︎ࣗୡͷఏڙͰ͖ΔόϦϡʔʹಛԽͰ͖Δ • ▶︎։ൃίετ͕Լ͕ΔͷͰϦεΫ࣌ؒΛݮͰ͖Δ • ▶︎ػೳཁ݅جຊతͳ෦εΩοϓ
• ▶︎෭ۀతʹ࢝Ί͍͢ͷͰ৽͍͠ઓ͍͢͠ ϓϥοτϑΥʔϜ্ͰޮΑ͘Ք͙ ୈ3ͷτϨϯ υ
23 ຊಛԽܕͷΞϓϦͷ ຊͰͷ ࣄྫ डୗҊ݅తχʔζΛҰൠԽ
24 ΫϩεϓϥοτϑΥʔϜͰαʔϏεఏڙ ຊͰͷ ࣄྫ ҰൠతχʔζΛαʔϏεԽ
25 ։ൃऀͱ੍࡞ձࣾͷڠۀʢΪϧυʣ ຊͰͷ ࣄྫ ݸਓͱاۀͰେ͖ͳϏδωε
26 ͜Μͳϒ ϩά ɾɾɾ ※͋͘·Ͱύʔτφʔ͞ΜͷݸਓతͳਪଌͰ͢
27 ShopifyΞϓϦͷ։ൃͷֶश
28 Shopify ύʔτφʔϒϩά Shopify ΞϓϦ։ൃ ΞϓϦͷ ։ൃͱެ ։
29 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ Shopify ϑΥʔϥϜ ࣭ͱΞ ΠσΟΞ
30 Shopify ύʔτφʔFacebookάϧʔϓ ύʔτ φʔͱͷ ڠۀ ※ࢀՃʹύʔτφʔΞΧϯτ͕ඞཁͰ͢
None
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2.4k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
690
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
200
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
270
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.5k
Tech. Blog TIPS
benzookapi
0
370
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
340
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.2k
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
2.1k
Other Decks in Technology
See All in Technology
The Author Pays
hiccupps
0
200
Kiro IDE 入門 (画面の各部から、頼み方、任せ方、戻し方まで) | 目指せ Kiro マスター 02
inariku
PRO
4
230
仕様と現実の間で落とし所を探るリモートMCPの認証・認可 — Sansanの認証基盤における課題と実践
sansantech
PRO
2
280
農夫は秘伝のタレを知らない - NOBODY KNOWS THE HIDDEN SOURCE - Kaggriculture 3rd Place Solution
masspeaks
0
290
Where Should Platform Complexity Live? Lessons from a Cross-Team PR Preview Platform
taiki45
0
110
マネジメントされる側の仕事は「文句」を言うこと
riyaamemiya
2
620
属人化したISMS運用をGitHubとAIで仕組み化した1年間の記録
sioncojp
4
2.6k
Bots in Kiro Crew (One point of contact for ongoing work) | Kiro: Zero to Hero 12
inariku
PRO
1
130
81天的 AI Agent 軟體開發團隊治理實務分享
regionbbs
0
160
内製アプリとClaudeスキルのセキュリティチェック、 Backlogの課題で回しています。
ayaka_egaaa
0
180
Reticulum, le réseau cypherpunk dont vous avez besoin !
rlifchitz
0
140
Shared Signals Framework 仕様解説
oidfj
0
430
Featured
See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
520
Game over? The fight for quality and originality in the time of robots
wayneb77
1
330
Balancing Empowerment & Direction
lara
6
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
760
WCS-LA-2024
lcolladotor
0
990
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
530
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
330
The agentic SEO stack - context over prompts
schlessera
0
1k
How to make the Groovebox
asonas
2
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k