Shopifyを使ったヘッドレスコマースの 実現方法と事例

https://shopify-uc-kansai-3.peatix.com/

1. ShopifyΛ࢖ͬͨϔουϨείϚʔεͷ ࣮ݱํ๏ͱࣄྫ 2021.5.20 @ Shopify UC Kansai # 3 Junichi Okamura

2. • Junichi Okamura, Sr. Technical Partner Manager at Shopif y • @benzookap i • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
3. ϔουϨείϚʔεͷ֓ཁͱࣄྫ 01 ຊ೔ͷ಺༰ 02 ShopifyͱΞϓϦΤίγεςϜͷ֓ཁ 03 ϔουϨείϚʔεͷ࣮ݱํ๏ 04 Storefront APIͱൢചνϟωϧͷؔ܎ 05 ೔ຊͷࣄྫͱσϞɺ·ͱΊ 06 ShopifyΞϓϦ։ൃͷֶशํ๏
4. 4 ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
5. Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Βେ اۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 200 6 Shopify ϩʔϯν $2,9B ऩӹֹ (աڈ12ϱ݄ ) 6,000 + ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺ $277B ࣄۀऀ༷ͷGMV (ྦྷܭ ) 4.9 millio n ళฮͷελοϑΞΧ΢ϯτ਺ 1,700,000+ ళฮ — — 175ϱࠃ ~ 7,000 + ࣾһ਺ Shopifyʹ͍ͭͯ ׬શϦϞʔτԽ Digital by defaultͷ΋ͱ2020೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ
6. ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ
7. Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ෼ੳ σʔλ ϓϥΠόγʔ ड஫ υϝΠϯ ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά
8. ൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳ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
9. 9 ShopifyͷΞϓϦΤίγεςϜ
10. 10 ShopifyΞϓϦετΞͱύʔτφʔϓϩάϥϜ ֦େ͢Δ ΤίγεςϜ
11. 11 ೔ຊͰ΋ΞϓϦΤίγεςϜ͸ٸ֦େ ೔ຊಛԽ ֦େ͢Δ ΤίγεςϜ
12. 12 ΞϓϦ։ൃͷୈҰาɿύʔτφʔొ࿥ ֦େ͢Δ ΤίγεςϜ
13. 13 ϔουϨείϚʔεͱ͸
14. 14 όοΫΤϯυͱϑϩϯτΤϯυ͕੾Γ཭͞ΕͨίϚʔε Backend Frontend ఆٛ
15. 15 ShopifyϒϩάɿίΞϥϚοτϨε Shopify ϔουϨείϚʔε ࣄྫ
16. 16 • ൢ࿏ʢൢചνϟωϧʣ͕޿͕ΔʢϞʔϧग़ళɺళฮʣ • ετΞϑϩϯτΛ࠷దԽͰ͖ΔʢPWAɺϞόΠϧΞϓϦʣ • طଘࢿ࢈Λྲྀ༻Ͱ͖ΔʢCMSɺࣗࣾ։ൃγεςϜʣ ϔουϨείϚʔεͷԿ͕خ͍͔͠ʁ ϝϦοτ
17. 17 • ։ൃྗͱ౤ࢿ͕ඞཁʢΤϯδχΞɺΠϯϑϥʣ • ϓϥοτϑΥʔϜ΁ͷ௥ै͕ඞཁʢAPIͷ࢓༷มߋɺഇࢭʣ • ੹೚෼ذ఺ͷޙୀʢো֐΍όάରԠͷ૿Ճʣ ϔουϨείϚʔεͷԿ͕ࠔΔ͔ʁ σϝϦοτ
18. 18 • ϔουίϚʔεͩͱͳΜͰ΋Ͱ͖ΔʢܾࡁΛࣗ༝ʹ͍͡ΕΔ ͳͲʣ • ϔουϨείϚʔεͩͱૣ͘ͳΔʢඞͣඪ४ςϯϓϨʔτΑ Γૣ͘ͳΔͳͲʣ • ϔουϨείϚʔεͷํ͕Ṷ͔Δʢඞͣߪങ཰͕͕͋Δͳ Ͳʣ ϔουϨείϚʔε΁ͷա৒ͳظ଴ શͯؒҧ͍Ͱ͢ʂ Α͋͘Δޡղ
19. 19 ಛʹܾࡁ͸ཁ஫ҙʂ Shopify͕ఏڙ͢ΔܾࡁػೳҎ֎Λ ಠࣗʹ࣮૷͢Δ͜ͱ͸ʢಛผʹڐ Մ͞ΕͨҰ෦ͷύʔτφʔΛআ ͖ʣن໿Ͱېࢭ͞Ε͍ͯ·͢ɻ ʢޙड़ʣ ཧ༝ɿ ϚʔνϟϯτͷηΩϡϦςΟ ΛकΔͨΊ ؾΛ͚ͭΔ ͜ͱ
20. 20 ϔουϨείϚʔεͷ࣮ݱํ๏
21. 21 Shopify Storefront API Shopify Storefront API API
22. 22 Shopify JavaScript Buy SDK Shopify Buy SDK SDK
23. 23 Shopify BuyButton.js Shopify Buy Button JS JavaScript
24. 24 Shopify Buy Button Channel Shopify Buy Button ൢചνϟωϧΞϓϦ ΞϓϦ
25. 25 Storefront APIͱൢചνϟωϧͷؔ܎
26. 26 ൢചνϟωϧͱ͸ʁ ඪ४Ͱ͍͍ͭͯΔΦ ϯϥΠϯετΞ΋࣮ ͸ൢചνϟωϧʢফ ͨ͠Γ༗ޮʹͨ͠Γ ͕Մೳʣ Πϯετʔϧͨ͠ޙʹShopifyͷ؅ཧ ը໘ͷࠨଆͷϝχϡʔʹग़ͯ͘Δ΋ ͷ͕ൢചνϟωϧʹStorefront APIΛ ࢖͍ͬͯΔՄೳੑ͕͋Δ΋ͷ ֓ཁ
27. 27 Storefront APIͱͷؔ܎ ެ։ΞϓϦͰStorefront APIΛ࢖͏ʹ͸ ඞͣΞϓϦΛൢചνϟωϧʹ͢Δ ʢ*1ʣඞཁ͋Γʢ৹͕ࠪೖΓ·͢ʂʣ 
 ετΞϑϩϯτΛ࡞Δʹ ৽͍͠ൢ࿏։୓ͱͷղऍ ֓ཁ *1 ൢചνϟωϧʹඞͣStorefront APIΛ࢖͏΋ͷͰ͸ͳ͍
28. 28 Payment APIʢܾࡁ࣮૷ʣͱͷؔ܎ ൢചνϟωϧ͕ڐՄ͞Εͨޙʹ͞Βʹ ผͷ৹͕ࠪඞཁͰ͢ʢ௨ৗ͸PCIDSS ͳͲΛอ༗͢ΔܾࡁձࣾͳͲ͔͠ڐՄ ͞Ε·ͤΜʣ ※͜ΕΒͷυΩϡϝϯτΛݟͯࣗ༝ʹ֎ ෦ܾࡁձࣾͷॲཧΛར༻Ͱ͖Δͱߟ͑Δ ํ͕͍·͕͢ɺͦ͏Ͱ͸͋Γ·ͤΜʢܾ ࡁॲཧ͸Shopify͕ରԠ͍ͯ͠Δάϩʔό ϧͳ΋ͷ͔͠࢖͑·ͤΜʣ ֓ཁ
29. 29 ΞϓϦͷछྨͱػೳͷؔ܎ ɹɹɹɹɹΞϓϦͷछྨ ػೳ ެ։ΞϓϦ ΧελϜΞϓϦ ϓϥΠϕʔτΞϓϦ ୭͕࡞Δʁ ύʔτφʔ ύʔτφʔ Ϛʔνϟϯτ ୭͕࢖͑Δʁ ΞϓϦετΞ͔ΒશϚʔ νϟϯτ ύʔτφʔ͕ڐՄͨ̍͠ ͭͷϚʔνϟϯτʢ*1ʣ ΞϓϦΛ࡞ͬͨ̍ͭͷ Ϛʔνϟϯτ ৹ࠪ͸ඞཁ͔ʁ ඞཁʢެ։ਃ੥͕௨Βͳ ͍ͱ࢖͑ͳ͍ʣ ෆཁʢͨͩ͠ن໿νΣο Ϋ͋Γʣ ෆཁʢͨͩ͠ن໿νΣο Ϋ͋Γʣ ൢചνϟωϧʹͰ͖Δ ͔ʁ Ͱ͖Δʢެ։ਃ੥Ҏલʹ ผͷ৹ࠪඞཁʣ Ͱ͖ͳ͍ Ͱ͖ͳ͍ Storefront API͸࢖͑Δ ͔ʁ ࢖͑ΔʢൢചνϟωϧԽ ඞਢʣ ࢖͑ͳ͍ ࢖͑Δʢ؅ཧը໘͔Β τʔΫϯੜ੒ʣ Payment API͸࢖͑Δ ͔ʁ ʢ΄ͱΜͲͷ৔߹ʣ࢖͑ ͳ͍ʢݸผ৹ࠪඞཁʣ ࢖͑ͳ͍ ࢖͑ͳ͍ *1 Shopify PlusͷΈෳ਺ϚʔνϟϯτՄ ৄࡉ
30. 30 ೔ຊͷࣄྫͱσϞ
31. 31 ϞόΠϧΞϓϦδΣωϨʔλʔ͕Strefront API࠾༻ ೔ຊͷࣄྫ
32. 32 Storefront API one pager demo σϞ
33. 33 • ಄ͷ෦෼Λ։ൃͯ͠ϢʔεέʔεΛ޿͛Δ΋ͷ • ϝϦοτɾσϝϦοτ྆ํ͋Δ૒ਕͷ݋ • ౿ΈࠐΉલʹຊ౰ʹͦΕ͕ϕετ͔ࣗ໰͠Α͏ ϔουϨείϚʔεͱ͸ ·ͱΊ
34. 34 ShopifyΞϓϦ։ൃͷֶशํ๏
35. 35 Shopifyϒϩά Shopify ΞϓϦ։ൃ ΞϓϦ։ൃͱ ެ։
36. 36 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ Shopify ϑΥʔϥϜ ࣭໰΍ ΞΠσΟΞ
37. 37 Shopify ύʔτφʔFacebookάϧʔϓ ※ࢀՃʹ͸ύʔτφʔΞΧ΢ϯτ͕ඞཁͰ͢ ύʔτφʔ ಉ࢜ͷަྲྀ