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
600
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
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
290
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.1k
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
2k
Other Decks in Technology
See All in Technology
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
470
GopherCon Tour 概略
logica0419
2
170
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
120
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.2k
stupid jj tricks
indirect
0
7.9k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
290
多野優介
tanoyusuke
1
380
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.5k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
データエンジニアがこの先生きのこるには...?
10xinc
0
440
Featured
See All Featured
KATA
mclloyd
32
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
How to Think Like a Performance Engineer
csswizardry
27
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Designing for Performance
lara
610
69k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Embracing the Ebb and Flow
colly
88
4.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Scaling GitHub
holman
463
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
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