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
0
1.8k
Shopify Storefront APIを使った PWA e-commerceの解説とデモ
benzookapi
0
350
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
110
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
120
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.2k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
3.7k
Tech. Blog TIPS
benzookapi
0
230
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
230
WordPressとShopifyでECサイトを作ろう
benzookapi
0
980
Other Decks in Technology
See All in Technology
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
2
280
Azureの基本的な権限管理の勉強会
yhana
0
600
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
JAWS-UG Bedrock Claude Night
yamahiro
3
610
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
What's new in Ruby 2.0
geeforr
337
31k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Bash Introduction
62gerente
604
210k
A Philosophy of Restraint
colly
197
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
A better future with KSS
kneath
231
16k
How GitHub (no longer) Works
holman
304
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Statistics for Hackers
jakevdp
789
220k
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