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
430
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
2k
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
130
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
160
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.1k
Tech. Blog TIPS
benzookapi
0
260
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
250
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
AWS EventBridgeを活用したShopifyアプリの サーバーレス開発
benzookapi
0
1.9k
Other Decks in Technology
See All in Technology
業務ツールをAIエージェントとつなぐ - Composio
knishioka
0
110
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
220
2025/1/29 BigData-JAWS 勉強会 #28 (re:Invent 2024 re:Cap)/new-feature-preview-q-in-quicksight-scenarios-tried-and-tested
emiki
0
310
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
210
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
18
6.9k
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
130
CloudWatch Container Insightsを使ったAmazon ECSのリソース監視
umekou
1
120
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
1
420
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.8k
サービスローンチを成功させろ! 〜SREが教える30日間の攻略ガイド〜
mmmatsuda
2
4.4k
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
120
20250129 Findy_テスト高活用化
dshirae
0
230
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Facilitating Awesome Meetings
lara
51
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building an army of robots
kneath
302
45k
Code Reviewing Like a Champion
maltzj
521
39k
YesSQL, Process and Tooling at Scale
rocio
171
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Thoughts on Productivity
jonyablonski
68
4.4k
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