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
Shopifyを使ったヘッドレスコマースの 実現方法と事例
Search
benzookapi
May 20, 2021
Technology
0
190
Shopifyを使ったヘッドレスコマースの 実現方法と事例
https://shopify-uc-kansai-3.peatix.com/
benzookapi
May 20, 2021
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2.1k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
490
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
150
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.3k
Tech. Blog TIPS
benzookapi
0
280
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
270
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.1k
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
1.9k
Other Decks in Technology
See All in Technology
Model Mondays S2E02: Model Context Protocol
nitya
0
150
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
450
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
590
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
290
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
line_developers_tw
PRO
0
990
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
1
390
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.5k
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
sansan_randd
1
390
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
130
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
280
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
200
Agentic Workflowという選択肢を考える
tkikuchi1002
1
200
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
It's Worth the Effort
3n
184
28k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
930
Music & Morning Musume
bryan
46
6.6k
Being A Developer After 40
akosma
90
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
How GitHub (no longer) Works
holman
314
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
How to Think Like a Performance Engineer
csswizardry
24
1.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Transcript
ShopifyΛͬͨϔουϨείϚʔεͷ ࣮ݱํ๏ͱࣄྫ 2021.5.20 @ Shopify UC Kansai # 3 Junichi
Okamura
• Junichi Okamura, Sr. Technical Partner Manager at Shopif y
• @benzookap i • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
ϔουϨείϚʔεͷ֓ཁͱࣄྫ 01 ຊͷ༰ 02 ShopifyͱΞϓϦΤίγεςϜͷ֓ཁ 03 ϔουϨείϚʔεͷ࣮ݱํ๏ 04 Storefront APIͱൢചνϟωϧͷؔ
05 ຊͷࣄྫͱσϞɺ·ͱΊ 06 ShopifyΞϓϦ։ൃͷֶशํ๏
4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
ShopifyΫϥυϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 200 6 Shopify ϩʔϯν $2,9B ऩӹֹ (աڈ12ϱ݄ )
6,000 + ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ $277B ࣄۀऀ༷ͷGMV (ྦྷܭ ) 4.9 millio n ళฮͷελοϑΞΧϯτ 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 ϔουϨείϚʔεͱ
14 όοΫΤϯυͱϑϩϯτΤϯυ͕Γ͞ΕͨίϚʔε Backend Frontend ఆٛ
15 ShopifyϒϩάɿίΞϥϚοτϨε Shopify ϔουϨείϚʔε ࣄྫ
16 • ൢ࿏ʢൢചνϟωϧʣ͕͕ΔʢϞʔϧग़ళɺళฮʣ • ετΞϑϩϯτΛ࠷దԽͰ͖ΔʢPWAɺϞόΠϧΞϓϦʣ • طଘࢿ࢈Λྲྀ༻Ͱ͖ΔʢCMSɺࣗࣾ։ൃγεςϜʣ ϔουϨείϚʔεͷԿ͕خ͍͔͠ʁ ϝϦοτ
17 • ։ൃྗͱࢿ͕ඞཁʢΤϯδχΞɺΠϯϑϥʣ • ϓϥοτϑΥʔϜͷै͕ඞཁʢAPIͷ༷มߋɺഇࢭʣ • ذͷޙୀʢোόάରԠͷ૿Ճʣ ϔουϨείϚʔεͷԿ͕ࠔΔ͔ʁ σϝϦοτ
18 • ϔουίϚʔεͩͱͳΜͰͰ͖ΔʢܾࡁΛࣗ༝ʹ͍͡ΕΔ ͳͲʣ • ϔουϨείϚʔεͩͱૣ͘ͳΔʢඞͣඪ४ςϯϓϨʔτΑ Γૣ͘ͳΔͳͲʣ • ϔουϨείϚʔεͷํ͕Ṷ͔Δʢඞͣߪങ͕͕͋Δͳ Ͳʣ
ϔουϨείϚʔεͷաͳظ શͯؒҧ͍Ͱ͢ʂ Α͋͘Δޡղ
19 ಛʹܾࡁཁҙʂ Shopify͕ఏڙ͢ΔܾࡁػೳҎ֎Λ ಠࣗʹ࣮͢Δ͜ͱʢಛผʹڐ Մ͞ΕͨҰ෦ͷύʔτφʔΛআ ͖ʣنͰېࢭ͞Ε͍ͯ·͢ɻ ʢޙड़ʣ ཧ༝ɿ ϚʔνϟϯτͷηΩϡϦςΟ ΛकΔͨΊ
ؾΛ͚ͭΔ ͜ͱ
20 ϔουϨείϚʔεͷ࣮ݱํ๏
21 Shopify Storefront API Shopify Storefront API API
22 Shopify JavaScript Buy SDK Shopify Buy SDK SDK
23 Shopify BuyButton.js Shopify Buy Button JS JavaScript
24 Shopify Buy Button Channel Shopify Buy Button ൢചνϟωϧΞϓϦ ΞϓϦ
25 Storefront APIͱൢചνϟωϧͷؔ
26 ൢചνϟωϧͱʁ ඪ४Ͱ͍͍ͭͯΔΦ ϯϥΠϯετΞ࣮ ൢചνϟωϧʢফ ͨ͠Γ༗ޮʹͨ͠Γ ͕Մೳʣ Πϯετʔϧͨ͠ޙʹShopifyͷཧ ը໘ͷࠨଆͷϝχϡʔʹग़ͯ͘Δ ͷ͕ൢചνϟωϧʹStorefront
APIΛ ͍ͬͯΔՄೳੑ͕͋Δͷ ֓ཁ
27 Storefront APIͱͷؔ ެ։ΞϓϦͰStorefront APIΛ͏ʹ ඞͣΞϓϦΛൢചνϟωϧʹ͢Δ ʢ*1ʣඞཁ͋Γʢ৹͕ࠪೖΓ·͢ʂʣ ετΞϑϩϯτΛ࡞Δʹ ৽͍͠ൢ࿏։ͱͷղऍ
֓ཁ *1 ൢചνϟωϧʹඞͣStorefront APIΛ͏ͷͰͳ͍
28 Payment APIʢܾࡁ࣮ʣͱͷؔ ൢചνϟωϧ͕ڐՄ͞Εͨޙʹ͞Βʹ ผͷ৹͕ࠪඞཁͰ͢ʢ௨ৗPCIDSS ͳͲΛอ༗͢ΔܾࡁձࣾͳͲ͔͠ڐՄ ͞Ε·ͤΜʣ ※͜ΕΒͷυΩϡϝϯτΛݟͯࣗ༝ʹ֎ ෦ܾࡁձࣾͷॲཧΛར༻Ͱ͖Δͱߟ͑Δ ํ͕͍·͕͢ɺͦ͏Ͱ͋Γ·ͤΜʢܾ
ࡁॲཧShopify͕ରԠ͍ͯ͠Δάϩʔό ϧͳͷ͔͑͠·ͤΜʣ ֓ཁ
29 ΞϓϦͷछྨͱػೳͷؔ ɹɹɹɹɹΞϓϦͷछྨ ػೳ ެ։ΞϓϦ ΧελϜΞϓϦ ϓϥΠϕʔτΞϓϦ ୭͕࡞Δʁ ύʔτφʔ ύʔτφʔ
Ϛʔνϟϯτ ୭͕͑Δʁ ΞϓϦετΞ͔ΒશϚʔ νϟϯτ ύʔτφʔ͕ڐՄͨ̍͠ ͭͷϚʔνϟϯτʢ*1ʣ ΞϓϦΛ࡞ͬͨ̍ͭͷ Ϛʔνϟϯτ ৹ࠪඞཁ͔ʁ ඞཁʢެ։ਃ͕௨Βͳ ͍ͱ͑ͳ͍ʣ ෆཁʢͨͩ͠نνΣο Ϋ͋Γʣ ෆཁʢͨͩ͠نνΣο Ϋ͋Γʣ ൢചνϟωϧʹͰ͖Δ ͔ʁ Ͱ͖Δʢެ։ਃҎલʹ ผͷ৹ࠪඞཁʣ Ͱ͖ͳ͍ Ͱ͖ͳ͍ Storefront API͑Δ ͔ʁ ͑ΔʢൢചνϟωϧԽ ඞਢʣ ͑ͳ͍ ͑Δʢཧը໘͔Β τʔΫϯੜʣ Payment API͑Δ ͔ʁ ʢ΄ͱΜͲͷ߹ʣ͑ ͳ͍ʢݸผ৹ࠪඞཁʣ ͑ͳ͍ ͑ͳ͍ *1 Shopify PlusͷΈෳϚʔνϟϯτՄ ৄࡉ
30 ຊͷࣄྫͱσϞ
31 ϞόΠϧΞϓϦδΣωϨʔλʔ͕Strefront API࠾༻ ຊͷࣄྫ
32 Storefront API one pager demo σϞ
33 • ಄ͷ෦Λ։ൃͯ͠ϢʔεέʔεΛ͛Δͷ • ϝϦοτɾσϝϦοτ྆ํ͋Δਕͷ • ౿ΈࠐΉલʹຊʹͦΕ͕ϕετ͔ࣗ͠Α͏ ϔουϨείϚʔεͱ ·ͱΊ
34 ShopifyΞϓϦ։ൃͷֶशํ๏
35 Shopifyϒϩά Shopify ΞϓϦ։ൃ ΞϓϦ։ൃͱ ެ։
36 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ Shopify ϑΥʔϥϜ ࣭ ΞΠσΟΞ
37 Shopify ύʔτφʔFacebookάϧʔϓ ※ࢀՃʹύʔτφʔΞΧϯτ͕ඞཁͰ͢ ύʔτφʔ ಉ࢜ͷަྲྀ
None