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
300
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
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
1
730
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
220
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
830
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
100
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
9
4.5k
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
180
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
490
Featured
See All Featured
A Tale of Four Properties
chriscoyier
161
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Site-Speed That Sticks
csswizardry
11
900
A designer walks into a library…
pauljervisheath
209
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Producing Creativity
orderedlist
PRO
347
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.8k
Designing for humans not robots
tammielis
254
26k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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