Tweet
Tweet

Slide 1

Slide 1 text

ShopifyͰ࣮ݱ͢ΔPWA EC 2020.06.17 @ PWA Night Junichi Okamura


Slide 2

Slide 2 text

• 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?

Slide 3

Slide 3 text

ShopifyͷPWAࣄྫ 01 ຊ೔ͷ͓୊ 02 Shopifyͷ֓ཁ 03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏ 04 PWAͱECͷؔ܎ 05 ShopifyͷPWAͷσϞ 06 ࢀߟ৘ใͱϑΥʔϥϜ׆༻

Slide 4

Slide 4 text

4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ

Slide 5

Slide 5 text

Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $1,728M ऩӹֹ (աڈ12ϱ݄) 4,100+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺ $172B ࣄۀऀ༷ͷGMV (ྦྷܭ) 2.9 million ళฮͷελοϑΞΧ΢ϯτ਺ 1,000,000+ ళฮ —— 175ϱࠃ~ 5,000+ ࣾһ਺ Shopifyʹ͍ͭͯ ׬શϦϞʔτԽ Digital by defaultͷ΋ͱ2020೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

4,100+ ΞϓϦʹΑΔػೳ֦ு աڈ1೥ؒͷΞΫςΟϒύʔτφʔ਺ 24,500 Apps Agencies & Web Designers ShopifyύʔτφʔΤίγεςϜ

Slide 8

Slide 8 text

8 Shopifyͷಛ௃

Slide 9

Slide 9 text

ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ

Slide 10

Slide 10 text

Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ෼ੳ σʔλ ϓϥΠόγʔ ड஫ υϝΠϯ ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά

Slide 11

Slide 11 text

൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳ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

Slide 12

Slide 12 text

12 ϩʔΧϧσϦόϦʔػೳ ৽ػೳ

Slide 13

Slide 13 text

13 ళ಄डऔػೳ ৽ػೳ

Slide 14

Slide 14 text

14 ShopifyͷPWAͷࣄྫ

Slide 15

Slide 15 text

15 ShopifyϒϩάɿίΞϥϚοτϨε ࣄྫ Shopify ϔουϨείϚʔε

Slide 16

Slide 16 text

16 όοΫΤϯυͱϑϩϯτΤϯυ͕੾Γ཭͞ΕͨίϚʔε ϔουϨε ίϚʔεʁ Backend Frontend

Slide 17

Slide 17 text

17 ϝϦοτ • ଟ͘ͷͦͯ͠৽͍͠ൢചνϟωϧʹૉૣ͘ରԠͰ͖Δ • ॊೈͳΧελϚΠζ΍ಠࣗੑΛ࣮ݱͰ͖Δ • ଎౓վળ΍εέʔϧΞ΢τͷ௥ٻ͕͠΍͍͢ γϣοϓ͸ དྷͯ΋Β͏ ग़͔͚͍ͯ͘ ΋ͷ΁ʂ

Slide 18

Slide 18 text

18 ϔουϨείϚʔεͷ̍Ԡ༻ྫ PWA ECͱ͸ʁ

Slide 19

Slide 19 text

19 ShopifyͰPWAΛ࣮ݱ͢Δํ๏

Slide 20

Slide 20 text

20 Shopify Storefront API API Shopify Storefront API

Slide 21

Slide 21 text

21 Shopify JavaScript Buy SDK SDK Shopify Buy SDK

Slide 22

Slide 22 text

22 Shopify BuyButton.js JS Shopify Buy Button JS

Slide 23

Slide 23 text

23 API΍SDK͸ϨΠϠʔͰબ୒Մೳ ɹStorefront Server Side Storefront API (GraphQL) Client Side Buy SDK (npm/yarn) BuyButton.js (CDN)

Slide 24

Slide 24 text

24 ࣮͸GatsbyͷSwagαΠτ΋࢖ͬͯΔʂ Ԡ༻ྫ https://store.gatsbyjs.org/

Slide 25

Slide 25 text

25 Shopify Buy Button Channel APP Shopify Buy Button

Slide 26

Slide 26 text

26 ͨ͘͞ΜPWAԽ͢ΔΞϓϦ͕ग़ͯΔ APP https://apps.shopify.com/search?locale=ja&q=PWA

Slide 27

Slide 27 text

27 PWAͱECͷؔ܎

Slide 28

Slide 28 text

28 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΢ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ • CMSΛ࢖͏ΑΓUXͷࣗ༝౓͕ߴ͘࠷దԽ͠΍͍͢

Slide 29

Slide 29 text

29 ஫ҙ఺ • ͪΌΜͱPWAΛ։ൃͰ͖ΔΤϯδχΞ͕ඞཁ • ར༻͢ΔECϓϥοτϑΥʔϜ͕PWAʹ଱͑ΕΔ΋ͷ Ͱ͋Δ͜ͱ͕ඞཁ • PWAͷϝϯςφϯε͸ࣗ෼ୡͰߦ͏͜ͱ͕ඞཁ ※͜ͷϒϩάͷνΣοΫϦετࢀর

Slide 30

Slide 30 text

30 PWAΛ ఏڙͰ͖Δ αʔϏε ͱ͸ʁ • ϔουϨείϚʔεͱͯ͠ػೳ͢Δ๛෋΍API • ৴པੑ͋ΔεέʔϥϒϧͳΫϥ΢υϓϥοτϑΥʔϜ

Slide 31

Slide 31 text

31 σϞ

Slide 32

Slide 32 text

32 σϞ • ࣗ࡞ͷShopify Buy SDKͷ௒؆୯ΞϓϦ • લड़ͷPWA༻ͷShopifyΞϓϦͷσϞγϣοϓ • ShopifyͷΤϯδχΞ͕࡞ͬͨPWAϞδϡʔϧͷσϞ γϣοϓ

Slide 33

Slide 33 text

33 ࢀߟ৘ใͱϑΥʔϥϜ׆༻

Slide 34

Slide 34 text

34 Shopify ύʔτφʔϒϩά ։ൃऀ Shopify ΞϓϦ։ൃ

Slide 35

Slide 35 text

35 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ ࣭໰ Shopify ϑΥʔϥϜ

Slide 36

Slide 36 text

36 Shopify Partner Boot Camp ຊؾͷਓ޲͚

Slide 37

Slide 37 text

No content