Save 37% off PRO during our Black Friday Sale! »

Shopifyで実現するPWA EC

Shopifyで実現するPWA EC

877f92a3597118cda2715790fa170ad4?s=128

Junichi Okamura

June 17, 2020
Tweet

Transcript

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


  2. • 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?
  3. ShopifyͷPWAࣄྫ 01 ຊ೔ͷ͓୊ 02 Shopifyͷ֓ཁ 03 ShopifyͰPWAΛ࣮ݱ͢Δํ๏ 04 PWAͱECͷؔ܎ 05

    ShopifyͷPWAͷσϞ 06 ࢀߟ৘ใͱϑΥʔϥϜ׆༻
  4. 4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ

  5. Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $1,728M ऩӹֹ (աڈ12ϱ݄) 4,100+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺

    $172B ࣄۀऀ༷ͷGMV (ྦྷܭ) 2.9 million ళฮͷελοϑΞΧ΢ϯτ਺ 1,000,000+ ళฮ —— 175ϱࠃ~ 5,000+ ࣾһ਺ Shopifyʹ͍ͭͯ ׬શϦϞʔτԽ Digital by defaultͷ΋ͱ2020೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ
  6. None
  7. 4,100+ ΞϓϦʹΑΔػೳ֦ு աڈ1೥ؒͷΞΫςΟϒύʔτφʔ਺ 24,500 Apps Agencies & Web Designers ShopifyύʔτφʔΤίγεςϜ

  8. 8 Shopifyͷಛ௃

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

  10. Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ෼ੳ σʔλ ϓϥΠόγʔ ड஫ υϝΠϯ

    ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά
  11. ൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳ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. 12 ϩʔΧϧσϦόϦʔػೳ ৽ػೳ

  13. 13 ళ಄डऔػೳ ৽ػೳ

  14. 14 ShopifyͷPWAͷࣄྫ

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

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

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

    ग़͔͚͍ͯ͘ ΋ͷ΁ʂ
  18. 18 ϔουϨείϚʔεͷ̍Ԡ༻ྫ PWA ECͱ͸ʁ

  19. 19 ShopifyͰPWAΛ࣮ݱ͢Δํ๏

  20. 20 Shopify Storefront API API Shopify Storefront API

  21. 21 Shopify JavaScript Buy SDK SDK Shopify Buy SDK

  22. 22 Shopify BuyButton.js JS Shopify Buy Button JS

  23. 23 API΍SDK͸ϨΠϠʔͰબ୒Մೳ ɹStorefront Server Side Storefront API (GraphQL) Client Side

    Buy SDK (npm/yarn) BuyButton.js (CDN)
  24. 24 ࣮͸GatsbyͷSwagαΠτ΋࢖ͬͯΔʂ Ԡ༻ྫ https://store.gatsbyjs.org/

  25. 25 Shopify Buy Button Channel APP Shopify Buy Button

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

  27. 27 PWAͱECͷؔ܎

  28. 28 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΢ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ •

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

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

  31. 31 σϞ

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

    γϣοϓ
  33. 33 ࢀߟ৘ใͱϑΥʔϥϜ׆༻

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

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

  36. 36 Shopify Partner Boot Camp ຊؾͷਓ޲͚

  37. None