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で実現するPWA EC
Search
benzookapi
June 17, 2020
Technology
0
200
Shopifyで実現するPWA EC
https://pwanight.connpass.com/event/177027/
benzookapi
June 17, 2020
Tweet
Share
More Decks by benzookapi
See All by benzookapi
技術をお金と貢献に変える、Shopifyテーマとアプリの開発
benzookapi
1
2.1k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
480
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
280
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
270
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.1k
Other Decks in Technology
See All in Technology
開発効率と信頼性を両立する Ubieのプラットフォームエンジニアリング
teru0x1
0
150
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
24
8.8k
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
220
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
210
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
290
原則から考える保守しやすいComposable関数設計
moriatsushi
3
460
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
260
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
150
「どこにある?」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
toru_kubota
2
450
20250623 Findy Lunch LT Brown
3150
0
550
IIWレポートからみるID業界で話題のMCP
fujie
0
530
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
130
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
What's in a price? How to price your products and services
michaelherold
245
12k
Scaling GitHub
holman
459
140k
Being A Developer After 40
akosma
90
590k
Unsuck your backbone
ammeep
671
58k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
A designer walks into a library…
pauljervisheath
206
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Transcript
ShopifyͰ࣮ݱ͢ΔPWA EC 2020.06.17 @ PWA Night Junichi Okamura
• Junichi Okamura, Technical Partner Manager at Shopify • @benzookapi
• API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker • TDD(Talk Driven Development) Who am I?
ShopifyͷPWAࣄྫ 01 ຊͷ͓ 02 Shopifyͷ֓ཁ 03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏ 04 PWAͱECͷؔ 05
ShopifyͷPWAͷσϞ 06 ࢀߟใͱϑΥʔϥϜ׆༻
4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
ShopifyΫϥυϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $1,728M ऩӹֹ (աڈ12ϱ݄) 4,100+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ
$172B ࣄۀऀ༷ͷGMV (ྦྷܭ) 2.9 million ళฮͷελοϑΞΧϯτ 1,000,000+ ళฮ —— 175ϱࠃ~ 5,000+ ࣾһ Shopifyʹ͍ͭͯ શϦϞʔτԽ Digital by defaultͷͱ2020·ͰΦϑΟεΛશΫϩʔζ
None
4,100+ ΞϓϦʹΑΔػೳ֦ு աڈ1ؒͷΞΫςΟϒύʔτφʔ 24,500 Apps Agencies & Web Designers ShopifyύʔτφʔΤίγεςϜ
8 Shopifyͷಛ
ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ
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
12 ϩʔΧϧσϦόϦʔػೳ ৽ػೳ
13 ళ಄डऔػೳ ৽ػೳ
14 ShopifyͷPWAͷࣄྫ
15 ShopifyϒϩάɿίΞϥϚοτϨε ࣄྫ Shopify ϔουϨείϚʔε
16 όοΫΤϯυͱϑϩϯτΤϯυ͕Γ͞ΕͨίϚʔε ϔουϨε ίϚʔεʁ Backend Frontend
17 ϝϦοτ • ଟ͘ͷͦͯ͠৽͍͠ൢചνϟωϧʹૉૣ͘ରԠͰ͖Δ • ॊೈͳΧελϚΠζಠࣗੑΛ࣮ݱͰ͖Δ • վળεέʔϧΞτͷٻ͕͍͢͠ γϣοϓ དྷͯΒ͏
ग़͔͚͍ͯ͘ ͷʂ
18 ϔουϨείϚʔεͷ̍Ԡ༻ྫ PWA ECͱʁ
19 ShopifyͰPWAΛ࣮ݱ͢Δํ๏
20 Shopify Storefront API API Shopify Storefront API
21 Shopify JavaScript Buy SDK SDK Shopify Buy SDK
22 Shopify BuyButton.js JS Shopify Buy Button JS
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 Shopify Buy Button Channel APP Shopify Buy Button
26 ͨ͘͞ΜPWAԽ͢ΔΞϓϦ͕ग़ͯΔ APP https://apps.shopify.com/search?locale=ja&q=PWA
27 PWAͱECͷؔ
28 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ •
CMSΛ͏ΑΓUXͷࣗ༝͕ߴ͘࠷దԽ͍͢͠
29 ҙ • ͪΌΜͱPWAΛ։ൃͰ͖ΔΤϯδχΞ͕ඞཁ • ར༻͢ΔECϓϥοτϑΥʔϜ͕PWAʹ͑ΕΔͷ Ͱ͋Δ͜ͱ͕ඞཁ • PWAͷϝϯςφϯεࣗୡͰߦ͏͜ͱ͕ඞཁ ※͜ͷϒϩάͷνΣοΫϦετࢀর
30 PWAΛ ఏڙͰ͖Δ αʔϏε ͱʁ • ϔουϨείϚʔεͱͯ͠ػೳ͢Δ๛API • ৴པੑ͋ΔεέʔϥϒϧͳΫϥυϓϥοτϑΥʔϜ
31 σϞ
32 σϞ • ࣗ࡞ͷShopify Buy SDKͷ؆୯ΞϓϦ • લड़ͷPWA༻ͷShopifyΞϓϦͷσϞγϣοϓ • ShopifyͷΤϯδχΞ͕࡞ͬͨPWAϞδϡʔϧͷσϞ
γϣοϓ
33 ࢀߟใͱϑΥʔϥϜ׆༻
34 Shopify ύʔτφʔϒϩά ։ൃऀ Shopify ΞϓϦ։ൃ
35 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ ࣭ Shopify ϑΥʔϥϜ
36 Shopify Partner Boot Camp ຊؾͷਓ͚
None