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
120
Shopifyを使ったヘッドレスコマースの 実現方法と事例
https://shopify-uc-kansai-3.peatix.com/
benzookapi
May 20, 2021
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
0
1.8k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
350
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.2k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
3.7k
Tech. Blog TIPS
benzookapi
0
230
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
230
WordPressとShopifyでECサイトを作ろう
benzookapi
0
980
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
1.7k
Other Decks in Technology
See All in Technology
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
240
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
310
DMM.com アルファ室採用案内資料
hsugita
1
160
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
290
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
930
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
540
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Docker and Python
trallard
34
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
A Tale of Four Properties
chriscoyier
151
22k
Building Your Own Lightsaber
phodgson
99
5.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
What the flash - Photography Introduction
edds
64
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
How to train your dragon (web standard)
notwaldorf
73
5.2k
A designer walks into a library…
pauljervisheath
200
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
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