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
510
DevRel for tech. entrepreneurs: Beyond platform partners
benzookapi
0
160
Shopifyを使ったヘッドレスコマースの 実現方法と事例
benzookapi
0
200
React + GraphQL を使ったShopify Appの作り方と そのマネタイズ方法
benzookapi
1
1.3k
Shopifyアプリエコシステムで始める 第3のスキルマネタイズ
benzookapi
0
4.3k
Tech. Blog TIPS
benzookapi
0
290
Our new DevRel: Invention of scaling out partner ecosystem
benzookapi
0
280
WordPressとShopifyでECサイトを作ろう
benzookapi
0
1.1k
Other Decks in Technology
See All in Technology
AI工学特論: MLOps・継続的評価
asei
10
1.5k
TROCCO今昔
gtnao
0
210
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
210
生成AIによる情報システムへのインパクト
taka_aki
0
100
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
710
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
130
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
220
今日からあなたもGeminiを好きになる
subaruhello
1
560
claude codeでPrompt Engineering
iori0311
0
430
M365アカウント侵害時の初動対応
lhazy
6
4.5k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
380
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
260
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Facilitating Awesome Meetings
lara
54
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A better future with KSS
kneath
238
17k
Making Projects Easy
brettharned
116
6.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Why Our Code Smells
bkeepers
PRO
337
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
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