https://pwanight.connpass.com/event/177027/
ShopifyͰ࣮ݱ͢ΔPWA EC2020.06.17 @ PWA NightJunichi Okamura
View Slide
• 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ຊͷ͓02Shopifyͷ֓ཁ03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏04 PWAͱECͷؔ05 ShopifyͷPWAͷσϞ06 ࢀߟใͱϑΥʔϥϜ׆༻
4ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
ShopifyΫϥυϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ2006Shopify ϩʔϯν$1,728Mऩӹֹ(աڈ12ϱ݄)4,100+ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ$172Bࣄۀऀ༷ͷGMV(ྦྷܭ)2.9 millionళฮͷελοϑΞΧϯτ1,000,000+ళฮ——175ϱࠃ~5,000+ࣾһShopifyʹ͍ͭͯશϦϞʔτԽDigital by defaultͷͱ2020·ͰΦϑΟεΛશΫϩʔζ
4,100+ΞϓϦʹΑΔػೳ֦ு աڈ1ؒͷΞΫςΟϒύʔτφʔ24,500Apps Agencies & Web DesignersShopifyύʔτφʔΤίγεςϜ
8Shopifyͷಛ
ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ
ShopifyൢചʹඞཁͳશͯΛαϙʔτσβΠϯϗετܾࡁ SEOੳ σʔλϓϥΠόγʔडυϝΠϯετΞ࡞ όοΫΤϯυ ϚʔέςΟϯά ҆શੑϒϩά
൚༻ੑ͕ߴࣗ͘༝ͷߴ͍ΧελϚΠζ͕Մೳෳ։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛ͳAPIAccess APIs Inventory APIs Product APIsAnalytics APIs MarketingEvent Sales channel APIsBilling APIs MetafieldShipping andfulfillment APIsCustomer APIs Online store APIsShopify PaymentsAPIsDiscount APIs Order APIsStore propertyAPIsEvent APIs Plus APIs TenderTransaction
12ϩʔΧϧσϦόϦʔػೳ৽ػೳ
13ళ಄डऔػೳ৽ػೳ
14ShopifyͷPWAͷࣄྫ
15ShopifyϒϩάɿίΞϥϚοτϨεࣄྫShopify ϔουϨείϚʔε
16όοΫΤϯυͱϑϩϯτΤϯυ͕Γ͞ΕͨίϚʔεϔουϨείϚʔεʁBackend Frontend
17ϝϦοτ• ଟ͘ͷͦͯ͠৽͍͠ൢചνϟωϧʹૉૣ͘ରԠͰ͖Δ• ॊೈͳΧελϚΠζಠࣗੑΛ࣮ݱͰ͖Δ• վળεέʔϧΞτͷٻ͕͍͢͠γϣοϓདྷͯΒ͏ ग़͔͚͍ͯ͘ͷʂ
18ϔουϨείϚʔεͷ̍Ԡ༻ྫPWA ECͱʁ
19ShopifyͰPWAΛ࣮ݱ͢Δํ๏
20Shopify Storefront APIAPIShopify Storefront API
21Shopify JavaScript Buy SDKSDKShopify Buy SDK
22Shopify BuyButton.jsJSShopify Buy Button JS
23APISDKϨΠϠʔͰબՄೳɹStorefrontServer SideStorefront API(GraphQL)Client SideBuy SDK(npm/yarn)BuyButton.js(CDN)
24࣮GatsbyͷSwagαΠτͬͯΔʂԠ༻ྫhttps://store.gatsbyjs.org/
25Shopify Buy Button ChannelAPPShopify Buy Button
26ͨ͘͞ΜPWAԽ͢ΔΞϓϦ͕ग़ͯΔAPPhttps://apps.shopify.com/search?locale=ja&q=PWA
27PWAͱECͷؔ
28ͳͥPWA͔ʁ• ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ੑ͕ྑ͍• ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ͍͍ͱ͜ͲΓ͕Ͱ͖Δ• CMSΛ͏ΑΓUXͷࣗ༝͕ߴ͘࠷దԽ͍͢͠
29ҙ • ͪΌΜͱPWAΛ։ൃͰ͖ΔΤϯδχΞ͕ඞཁ• ར༻͢ΔECϓϥοτϑΥʔϜ͕PWAʹ͑ΕΔͷͰ͋Δ͜ͱ͕ඞཁ• PWAͷϝϯςφϯεࣗୡͰߦ͏͜ͱ͕ඞཁ※͜ͷϒϩάͷνΣοΫϦετࢀর
30PWAΛఏڙͰ͖ΔαʔϏεͱʁ• ϔουϨείϚʔεͱͯ͠ػೳ͢Δ๛API• ৴པੑ͋ΔεέʔϥϒϧͳΫϥυϓϥοτϑΥʔϜ
31σϞ
32σϞ• ࣗ࡞ͷShopify Buy SDKͷ؆୯ΞϓϦ• લड़ͷPWA༻ͷShopifyΞϓϦͷσϞγϣοϓ• ShopifyͷΤϯδχΞ͕࡞ͬͨPWAϞδϡʔϧͷσϞγϣοϓ
33ࢀߟใͱϑΥʔϥϜ׆༻
34Shopify ύʔτφʔϒϩά։ൃऀShopify ΞϓϦ։ൃ
35Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ࣭Shopify ϑΥʔϥϜ
36Shopify Partner Boot Campຊؾͷਓ͚