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
170
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
2k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
430
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
Other Decks in Technology
See All in Technology
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
0
120
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
110
RevOpsへ至る道 データ活用による事業革新への挑戦 / path-to-revops
pei0804
3
840
Grafanaのvariables機能について
tiina
0
200
20250129 Findy_テスト高活用化
dshirae
0
230
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
150
アンチパターンのアーキテクチャと組織 / Anti-Pattern Software Architecture and Organization
oztick139
0
120
トレードオフスライダーにおける品質について考えてみた
suzuki_tada
3
200
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
2
250
Bounded Context: Problem or Solution?
ewolff
1
170
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
160
[2025クラウドガバナンスはこう変わる!マルチアカウント運用のre:Invent最新情報と活用例] re:Invent 2024 から見る AWS マルチアカウントガバナンスのこれまでとこれから
0nihajim
0
110
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
The Invisible Side of Design
smashingmag
299
50k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Statistics for Hackers
jakevdp
797
220k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Designing for Performance
lara
604
68k
Building Applications with DynamoDB
mza
93
6.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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