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
160
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
1.9k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
400
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
140
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.2k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4k
Tech. Blog TIPS
benzookapi
0
250
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
240
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1k
Other Decks in Technology
See All in Technology
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
260
Valuable Software Engineering
avandeursen
0
250
映像・音声伝送システム
jtes
0
200
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
1
1.7k
Perlで始めるeBPF: 自作Loaderの作り方 / Getting started with eBPF in Perl_How to create your own Loader
takehaya
1
180
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
3
490
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
13
1.7k
All your memory are belong to… whom?
ennael
PRO
0
540
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
6
1.2k
Understanding and Optimising INP
akshayysharma
0
150
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
210
ドメインと向き合う - 旅行予約編
hidenorigoto
4
520
Featured
See All Featured
A Philosophy of Restraint
colly
202
16k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Faster Mobile Websites
deanohume
304
30k
In The Pink: A Labor of Love
frogandcode
139
22k
It's Worth the Effort
3n
183
27k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Automating Front-end Workflow
addyosmani
1365
200k
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