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 Storefront APIを使った PWA e-commerceの解説とデモ
Search
benzookapi
October 16, 2021
Technology
0
510
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
https://pwanight.connpass.com/event/225022/
benzookapi
October 16, 2021
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2.1k
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
150
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
190
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
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
2k
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
PO初心者が考えた ”POらしさ”
nb_rady
0
220
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
6
13k
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
ビギナーであり続ける/beginning
ikuodanaka
3
780
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
360
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
170
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
170
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Done Done
chrislema
184
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GitHub's CSS Performance
jonrohan
1031
460k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Being A Developer After 40
akosma
90
590k
Into the Great Unknown - MozCon
thekraken
40
1.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
Shopify Storefront APIΛͬͨ PWA e-commerceͷղઆͱσϞ 2021.10.16 @ PWA Night MATSURI
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ͷPWAࣄྫ 01 ຊͷ༰ 02 Shopifyͷ֓ཁ 03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏ 04 PWAͱECͷؔ 05
Shopify Storefront APIͷσϞ 06 ࢀߟใͱ͓Βͤ
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 Meta f ield Shipping and ful f illment APIs Customer APIs Online store APIs Shopify Payments APIs Discount APIs Order APIs Store property APIs Event APIs Plus APIs TenderTransaction
9 ShopifyΞϓϦετΞͱύʔτφʔϓϩάϥϜ ֦େ͢Δ ΤίγεςϜ
10 ຊͰΞϓϦΤίγεςϜٸ֦େ ຊಛԽ ֦େ͢Δ ΤίγεςϜ
11 ύʔτφʔొ Shopify ύʔτφʔ ֦େ͢Δ ΤίγεςϜ
12 ShopifyͷPWAͷࣄྫ
13 ShopifyϒϩάɿίΞϥϚοτϨε ࣄྫ Shopify ϔουϨείϚʔε
14 όοΫΤϯυͱϑϩϯτΤϯυ͕Γ͞ΕͨίϚʔε ϔουϨε ίϚʔεʁ Backend Frontend
15 ϝϦοτ • ଟ͘ͷͦͯ͠৽͍͠ൢചνϟωϧʹૉૣ͘ରԠͰ͖Δ • ॊೈͳΧελϚΠζಠࣗੑΛ࣮ݱͰ͖Δ • վળεέʔϧΞτͷٻ͕͍͢͠ γϣοϓ དྷͯΒ͏
ग़͔͚͍ͯ͘ ͷʂ
16 ϔουϨείϚʔεͷ̍Ԡ༻ྫ PWA ECͱʁ
17 ʮϔουϨείϚʔεʯΘͳ͘ͳΓ·ͨ͠ aa ͪͳΈʹɾɾɾ Icons by Twemoji / CC BY
4.0 ʮΧελϜετΞϑϩϯτʯ Ͱ͓Ͷ͕͍͠·͢ʂ
18 ShopifyͰPWAΛ࣮ݱ͢Δํ๏
19 Shopify Storefront API API Shopify Storefront API ࠷ۙσʔλ͕ ૿͑·ͨ͠ʂ
ࠃࡍՁ֨༻ͷ Directive ॳରԠʂ
20 Shopify JavaScript Buy SDK SDK Shopify Buy SDK
21 Shopify BuyButton.js JS Shopify Buy Button JS
22 Shopify Hydrogen Framework Shopify Hydrogen Reactϕʔεͷ৽͍͠ ΧελϜετΞϑϩϯτ։ൃ ϑϨʔϜϫʔΫ ݱࡏearly
accessडதʂ
23 APISDKϨΠϠʔͰબՄೳ ɹStorefront Server Side Storefront API (GraphQL) Client Side
Buy SDK (npm/yarn) BuyButton.js (CDN)
24 ࣮GatsbyͷSwagαΠτͬͯΔʂ Ԡ༻ྫ https://store.gatsbyjs.org/
25 ͨ͘͞ΜPWAԽ͢ΔΞϓϦ͕ग़ͯΔ APP https://apps.shopify.com/search?locale=ja&q=PWA
26 PWAͱECͷؔ
27 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ •
CMSΛ͏ΑΓUXͷࣗ༝͕ߴ͘࠷దԽ͍͢͠ • ΦϑϥΠϯ࣌ͷػձଛࣦͷϦΧόϦʔʢҠಈதʹߪೖ ͳͲʣ
28 ҙ • ͪΌΜͱPWAΛ։ൃͰ͖ΔΤϯδχΞ͕ඞཁ • ར༻͢ΔECϓϥοτϑΥʔϜ͕PWAʹ͑ΕΔͷͰ ͋Δ͜ͱ͕ඞཁ • PWAͷϝϯςφϯεࣗୡͰߦ͏͜ͱ͕ඞཁ ※͜ͷϒϩάͷνΣοΫϦετࢀর
29 PWAΛ ఏڙͰ͖Δ αʔϏε ͱʁ • ϔουϨείϚʔεͱͯ͠ػೳ͢Δ๛API • ৴པੑ͋ΔεέʔϥϒϧͳΫϥυϓϥοτϑΥʔϜ
30 Shopify Storefront APIͷσϞ
31 σϞ Storefront API full client side demo PWAԽ͢Δ࣌ͷҙɿ ɹStorefront
API CORSରԠ͍ͯ͠ͳ͍ => ΫϥΠΞϯτ͔Β ݺͳ͍ͷͰ αʔόʔϨΠϠʔඞཁ ͬͯΈͨ͜ͱɿ ShopifyͷCDN͔Βͩͱ CORSΛ͑ͯݺΔ => ΞϓϦΠϯετʔϧ࣌ʹ File APIͰϥούʔJSΛ CDNʹొ͠ɺ ΫϥΠΞϯτ͔Β ݺΔΑ͏ʹͯ͠Έͨ ຊPWAͷ ϑϧΫϥΠΞϯτ Ͱด͍ͨ͡ͳ͋ ɾɾɾ
32 Storefront APIͷRate Limit ؾΛ͚ͭΔͱ͜Ζ Storefront APIͷݺͼग़੍͠ݶ ݺͼग़͠ݩͷIPΞυϨε୯ҐͰ ੍ݶ͞ΕΔͷͰɺ ΞΫηε͕ଟ͍߹
ΫϥΠΞϯτʢϒϥβʣ IP͕͍͔ͭ͘ʹׂΓৼΒΕΔ αʔόʔͰͷར༻͕·͍͠ ʢϞόΠϧΞϓϦͷ߹ SDKΛͬͯΞϓϦͰݺͿʣ
33 ࢀߟใͱ͓Βͤ
34 Shopify։ൃऀϒϩάͱ Twitch৴ ։ൃऀ Shopify ΞϓϦ։ൃ ShopifyJapanese ϑΥϩʔͯ͠Ͷʂ
35 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ ࣭ Shopify ϑΥʔϥϜ
36 ΠϕϯτΓ·͢ʂ ͓Βͤ Shopify Commerce Day
37 ࠾༻ͯ͠·͢ʂ Shopify job ͓Βͤ
None