Upgrade to Pro — share decks privately, control downloads, hide ads and more …

App_Theme_workshop_20191125.pdf

877f92a3597118cda2715790fa170ad4?s=47 Junichi Okamura
November 25, 2019
470

 App_Theme_workshop_20191125.pdf

877f92a3597118cda2715790fa170ad4?s=128

Junichi Okamura

November 25, 2019
Tweet

Transcript

  1. #shopifyjpmeetup ΞϓϦɾςʔϚϫʔΫγϣοϓ #3ʢ࣮ફฤʣ

  2. • Junichi Okamura, Technical Partner Manager at Shopify • @benzookapi

    • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
  3. • Shopify͓ΑͼύʔτφʔϓϩάϥϜʹ͍ͭͯʢ௒؆୯ʹʣ • ύʔτφʔΞΧ΢ϯτͷ࡞੒ ʢ※ࣄલʹ͍ͯͨͩ͘͠ͷͰಉ͘͡؆୯ʹʣ • ΞϓϦ͓ΑͼςʔϚͷجຊߏ੒ʢApp BridgeɺPolarisɺWebhookɺLiquidʣ • ΞϓϦ͓ΑͼςʔϚͷϋϯζΦϯʢνϡʔτϦΞϧɺը໘ͱThemeKitͰͷฤूʣ

    • ؅ཧऀը໘ͷσβΠϯʢPolarisαΠτΛ࢖ͬͨίϯϙʔωϯτฤूͷσϞʣ • REST APIͱGraphQLͷ࢖͍ํʢAPI ToolΛ࢖ͬͨAPIͷಈ࡞֬ೝͷσϞʣ • ࣮ࡍͷΞϓϦʹΑ͘࢖ΘΕΔٕज़ͰཧղΛਂΊΔʢTheme APIɺApp proxiesʣ • Q&AɺΞϯέʔτɺަྲྀձ ຊ೔ͷ಺༰ʢ΍΍࣮ફతʹͯ͠Έ·ͨ͠ʣ ϋογϡλά͸ #shopifyjpmeetup !
  4. Make Commerce Better For Everyone

  5. Shopify͸Ϋϥ΢υϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ͢ɻ ݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopifyϩʔϯν $1,073M ೥ؒརӹֹ (աڈ12ϱ݄) 2,900+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺ $100B

    ࣄۀऀ༷ͷ૯ྲྀ௨ֹ (ྦྷܭ) 2.1 million ϢχʔΫͷετΞΞΧ΢ϯτ਺ 1,00,000 ళฮ —— ~175ϱࠃ 4,000+ ࣾһ਺ 22,000 աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛ
 ϦϦʔεͨ͠ύʔτφʔͷ਺ #shopifyjpmeetup
  6. ShopifyύʔτφʔΤίγεςϜ Ϛʔνϟϯτ͕ αʔυύʔςΟʔ ΞϓϦΛར༻ 80%+ ύʔτφʔ͔Βͷ঺հ Ϛʔνϟϯτ 200,000+ Shopifyύʔτφʔ͕ಘͨऩӹ͸ 1,320ԯԁ

    (2018೥౓) ΞϓϦ։ൃύʔτφʔ͕ ಘͨऩӹ͸ 200ԯԁ (2018೥౓)
  7. ετΞߏஙύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ20%Λຖ݄ಘΔ͜ͱ͕Մೳɻ ঺հύʔτφʔ ΫϥΠΞϯτͷֹ݄ར༻ྉ͔݄̎෼ΛγϣοτͰಘΔ͜ͱ͕Մೳɻ ςʔϚσβΠϯύʔτφʔ ςʔϚετΞ্ͷച্͛ͷ࠷େ70%ΛಘΔ͜ͱ͕Մೳɻ ΞϓϦ։ൃύʔτφʔ ΞϓϦετΞ্ͷച্͛ͷ80%ΛಘΔ͜ͱ͕Մೳɻ Shopifyύʔτφ޲͚ϨϕχϡʔγΣΞ

  8. Bold Commerce - ΞϓϦ։ൃύʔτφʔ 2012೥ʹ༑ਓ4ਓͰShopifyΞϓϦͷ։ൃΛ࢝Ίɺ ࠷ॳʹެ։ͨ͠ΞϓϦʮBold Upsellʯ͕େώοτͨ͜͠ͱΛ͖͔͚ͬʹ ຊ֨తʹShopifyͷΞϓϦΛ։ൃ͠·ͨ͠ɻ ݱࡏɺ20Ҏ্ͷύϒϦοΫΞϓϦͱԿඦ΋ͷϓϥΠϕʔτΞϓϦΛ։ൃ͠ɺ ߹ܭ100,000Ҏ্ͷେखاۀؚΜͩސ٬͕ΞϓϦΛ࢖༻͓ͯ͠Γ·͢ɻ

    ࠓ͸250ਓͷैۀһΛ๊͑ɺड৆ܦݧͷ͋Δاۀʹ·Ͱ੒௕͠ɺ ஍ݩͷΧφμͷϚχτόभͰ͸࠷΋ૣ͘੒௕Λ਱͛ͨITاۀͱͳΓ·ͨ͠ɻ Shopifyύʔτφʔͷ੒ޭࣄྫ
  9. Shopify ςʔϚετΞ 100छྨҎ্ͷσβΠϯςϯϓϨʔτ https://themes.shopify.com

  10. 2,900+ ެ։͞Ε͍ͯΔAPIͰࣗ༝ʹΧελϚΠζ΍ΞϓϦͷ࡞੒͕Մೳ ച্Ξοϓ ഑ૹ ࡏݿ؅ཧ ސ٬؅ཧ ࡒ຿ɾձܭ ଟݴޠɾଟ௨՟ Ϩϙʔτ ιʔγϟϧ

    ϚʔέςΟϯά Shopify ΞϓϦετΞ https://apps.shopify.com/?locale=ja
  11. ύʔτφʔΞΧ΢ϯτͷ࡞੒ #shopifyjpmeetup

  12. ύʔτφʔΞΧ΢ϯτͷ࡞੒ #shopifyjpmeetup Shopify ύʔτφʔ https://www.shopify.jp/partners

  13. ։ൃετΞͷ࡞੒ #shopifyjpmeetup

  14. ։ൃετΞ΁ϩάΠϯ #shopifyjpmeetup

  15. ΞϓϦɾςʔϚͷجຊߏ੒ #shopifyjpmeetup

  16. ΞϓϦͷߏ੒ #shopifyjpmeetup Partner Server App Bridge (page) App Bridge (Action)

    Admin API Storefront API Polaris (UI) Webhook Webhook App Bridge (POS) API calls
  17. ςʔϚͷߏ੒ #shopifyjpmeetup Shopify Server (Liquid runtime) Layout (theme.liquid) Templates (collection.liquid)

    Templates (search.liquid) … And more Home (common parts) Collection Search page … And more Liquid Liquid Liquid
  18. App Bridgeͱ͸ʁ #shopifyjpmeetup ShopifyʹΞϓϦΛຒΊࠐΉͨΊͷJavascriptϥΠϒϥϦʢPOSΞϓϦʹ΋ରԠʣ

  19. Polarisͱ͸ʁ #shopifyjpmeetup ShopifyϚʔνϟϯτʹ࠷దͳUXΛఏڙ͢ΔͨΊͷCSSʢReact ʣϥΠϒϥϦʢOSSʣ

  20. Webhookͱ͸ʁ #shopifyjpmeetup Shopifyͷσʔλߋ৽ͷΠϕϯτΛ௨஌ͯ͘͠ΕΔػೳʢAPIΛݺͼग़͢͜ͱ΋Մೳʣ ※ʮઃఆʯ> ʮ௨஌ʯ > ʮWebhookʯ ͔ΒઃఆͰ͖·͢ Webhookͱ͸

  21. Liquidͱ͸ʁ #shopifyjpmeetup Shopify͕։ൃͨ͠RubyͰॻ͔ΕͨςϯϓϨʔτݴޠʢOSSʣ
 Tags: {% %} ৚݅෼ذ΍܁Γฦ͠ͷจ Objects: {{}} σʔλ಺༰ͷදࣔ

    Filters: | σʔλͷϑΥʔϚοτ
  22. ϋϯζΦϯʢΞϓϦʣ #shopifyjpmeetup

  23. νϡʔτϦΞϧͰ࡞ͬͯΈΔ #shopifyjpmeetup Shopify app νϡʔτϦΞϧ https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react?locale=ja

  24. ΞϓϦ։ൃखॱᶃɿඞཁͳٕज़ɺ༻ޠͷ੔ཧ #shopifyjpmeetup HTMLɺCSSɺJavaScriptɺJSONɺΫΤϦͳͲͷཧղ͸ඞਢͰ͢ɻ ࿅शɿ
 ֤༻ޠΛࣗ෼ͷݴ༿Ͱ આ໌ͯ͠ΈΑ͏

  25. ΞϓϦ։ൃखॱᶄɿ؀ڥઃఆͱॳظঢ়ଶͷΞϓϦͷ࡞੒ #shopifyjpmeetup ίϚϯυϥΠϯπʔϧ΍ඞཁϥΠϒϥϦͷΠϯετʔϧͱىಈ֬ೝ ࿅शɿ
 ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦෼·ͰͨͲΓண͍ ͯΈΑ͏

  26. ศརͳίϚϯυπʔϧ Shopify App CLI #shopifyjpmeetup ϑΝΠϧͷࣗಈੜ੒ɺΞϓϦͷىಈఀࢭɺHerokuσϓϩΠ·Ͱʂ https://github.com/Shopify/shopify-app-cli Shopify app CLI

  27. ΞϓϦ։ൃखॱᶅɿAPIೝূͱΞϓϦͷΠϯετʔϧ #shopifyjpmeetup OAuth༻ͷೝূ৘ใͱετΞ΁ͷΞϓϦΠϯετʔϧʢύʔϛογϣϯ෇༩ʣ ࿅शɿ
 ίϐϖͰ͍͍ͷͰ࠷ޙ ͷ෦෼·ͰͨͲΓண͍ ͯΈΑ͏

  28. ϋϯζΦϯʢςʔϚʣ #shopifyjpmeetup

  29. ςʔϚͷΧελϚΠζํ๏ᶃɿηΫγϣϯ #shopifyjpmeetup GUIͰ෦඼Λυϥοά&υϩοϓͰฤूͰ͖Δ͓खܰΧελϚΠζํ๏ ࿅शɿ
 ηΫγϣϯΛυϥοά &υϩοϓͯ͠ΈΑ͏ʂ

  30. ςʔϚͷΧελϚΠζํ๏ᶄɿίʔυฤू #shopifyjpmeetup ςʔϚͷϑΝΠϧͷHTMLΛ௚઀͍͡ΕΔॊೈͳํ๏ ࿅शɿ
 HTMLͷཁૉΛ͍ͬͯ͡ ֎ݟΛม͑ͯΈΑ͏ʂ

  31. ςʔϚͷΧελϚΠζํ๏ᶅɿLiquid #shopifyjpmeetup HTML಺ʹ͞Βʹ੍ޚॲཧΛೖΕͯը໘Λಈతʹදࣔ͢Δํ๏ ࿅शɿ
 ݱࡏͷϖʔδͷ ςʔϚϑΝΠϧ໊Λ දࣔͯ͠ΈΑ͏

  32. ςʔϚͷΧελϚΠζํ๏ᶆɿϩʔΧϧͰฤू #shopifyjpmeetup Shopify Theme Kit ͱ͍͏ίϚϯυϥΠϯπʔϧΛ࢖͏ํ๏ https://shopify.github.io/themekit/ Shopify Theme kit

    ࿅शɿ
 ίϚϯυϥΠϯͰςʔϚͷ࡞੒ ͱొ࿥ɺมߋ؂ࢹΛͯ͠ΈΑ͏ ʢVS Studioʹ͸Liquidͷ extension΋͋Γ·͢ʣ
  33. ςʔϚͷϑΝΠϧߏ੒ #shopifyjpmeetup Layout > Templates > SectionsʢηΫγϣϯͷ࣮ମʣ Assets:ΠϯΫϧʔυ͢ΔϑΝΠϧ Config:ઃఆϑΝΠϧ Locales:ϩʔΧϦθʔγϣϯʢ຋༁ʣσʔλ

    ɹ※Locales͸ʮݴޠͷฤूʯ͔Β΋มߋՄೳ
  34. ܾࡁ׬ྃը໘΁ͷJavaScriptͷຒΊࠐΈ #shopifyjpmeetup νΣοΫΞ΢τͷઃఆͷʮ௥ՃεΫϦϓτʯʹهड़ ※ςʔϚͷઃఆͰ͸ͳ͍͜ͱʹ ஫ҙɻจࣈΛຒΊࠐΜͩ৔߹͸ ςΩετͱͯ͠දࣔ͞Ε·͢

  35. ςʔϚ΁ͷಠࣗೖྗ߲໨ͷ௥Ճ #shopifyjpmeetup Line Item Properties/Cart attribute ͱ͍͏δΣωϨʔλ෇͖ͷUI߲໨Λ࢖͏ ※ੜ੒͞ΕͨίʔυΛςʔϚʹష Γ෇͚Δͱ஋͕஫จʹ൓ө͞ΕΔ ಠ߲ࣗ໨͕࡞Ε·͢

    https://ui-elements-generator.myshopify.com/pages/line-item-property Shopify Line Item Properties
  36. ؅ཧը໘ͷσβΠϯ ʢPolarisʣ #shopifyjpmeetup

  37. PolarisͷαϯϓϧΛ৮ͬͯΈΔ #shopifyjpmeetup https://polaris.shopify.com/ Shopify polaris

  38. ΞϓϦ։ൃखॱᶆɿPolarisΛ࢖ͬͯUIߏங #shopifyjpmeetup ετΞ؅ཧը໘ʹࣗ෼ࣗ਎ͷShopifyΆ͍ը໘ΛຒΊࠐΈ·͢ ࿅शɿ
 Ͱ͖Δͱ͜Ζ·Ͱը໘ Λ࡞ͬͯΈΑ͏ʢ̍ͭ Ͱ΋OK)

  39. APIͷ࢖͍ํ ʢREST/GraphQL) #shopifyjpmeetup

  40. GraphQLͱ͸ʁ #shopifyjpmeetup SQLͱJSONͷ͍͍ͱ͜औΓΛͨ͠Α͏ͳAPI GraphQLͱ͸

  41. GraphQL > REST #shopifyjpmeetup ࠓޙ͸GraphQL͕ਪ঑ʹͳΓ·͕͢ɺซ༻΋ՄೳͰ͢ > Shopify api

  42. REST API TOOL shopify developer tool https://help.shopify.com/en/api/tools/developer-tools #shopifyjpmeetup

  43. GraphQL TOOL shopify graphql tool https://help.shopify.com/en/api/graphql-admin-api/graphiql-app #shopifyjpmeetup

  44. ࣮ࡍʹ৮ͬͯΈΑ͏ SHOP REST (local app) GraphQL (Shopify app) #shopifyjpmeetup

  45. ΞϓϦ։ൃखॱᶇɿAPIΛ࢖ͬͯσʔλΛૢ࡞ #shopifyjpmeetup GraphQL·ͨ͸REST APIΛ࢖ͬͯShopifyͷ΄΅શͯͷσʔλΛૢ࡞Ͱ͖·͢

  46. ࣮ࡍͷΞϓϦʹΑ͘࢖ΘΕΔ ٕज़ͰཧղΛਂΊΔ #shopifyjpmeetup

  47. ΞϓϦͷΠϯτʔϧը໘ΛνΣοΫ͢Δ #shopifyjpmeetup ύʔϛγϣϯΛ֬ೝ͢Δ͜ͱͰͲ͏͍࣮ͬͨ૷͕͞Ε͍ͯΔ͔༧ଌ͕ͭ͘

  48. ετΞϑϩϯτ޲͚ͷ΋ͷ͸ϒϥ΢βίϯιʔϧΛ׆༻ #shopifyjpmeetup Ͳͷը໘ͰͲ͏͍ͬͨ௨৴΍εΫϦϓτ͕ॲཧ͞Ε͍ͯΔ͔֬ೝ

  49. ΞϓϦʹΑΔมߋՕॴΛ֬ೝ #shopifyjpmeetup ͲͷΞΫγϣϯ΍ϖʔδ͕֦ு͞Ε͍ͯΔ͔ͰͲ͏͍ͬͨઃܭʹͳ͍ͬͯΔ͔Θ͔Δ

  50. Α͘࢖ΘΕΔػೳᶃɿTheme API #shopifyjpmeetup ετΞϑϩϯτ޲͚ʹΞϓϦΠϯετʔϧ࣌ʹςʔϚΛࣗಈߋ৽͢Δͷʹ࢖͏

  51. Α͘࢖ΘΕΔػೳᶄɿApp proxies #shopifyjpmeetup ετΞϑϩϯτ͔ΒΞϓϦͷURLΛγϣοϓͷURLͱͯ͠ݺͼग़͢ػೳ

  52. ·ͱΊ #shopifyjpmeetup

  53. ωΫετΞΫγϣϯ #shopifyjpmeetup ΋ͬͱཧղΛਂΊ͍ͨํɿ => ؤுͬͯӳޠͷυΩϡϝϯτΛಡΜͰͲΜͲΜखΛಈ͔ͦ͏ʂ Կ͔࣭໰͕ग़͖ͯͨΒʁɿ => ೔ຊޠͷϑΥʔϥϜͰ೔ຊޠͰ࣭໰ͯ͠ΈΑ͏ʂ https://help.shopify.com/en/api/getting-started https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp

  54. Shopify App Store #shopifyjpmeetup https://help.shopify.com/en/api/app-store/listing-in-the-app-store/app-submission ΞϓϦͷਃ੥खॱɿ => ࡞ͬͨΞϓϦΛετΞʹਃ੥ͯ͠ΈΑ͏ʂ

  55. ࠓޙͷ༧ఆ #shopifyjpmeetup • ΦϯϥΠϯϫʔΫγϣοϓʢYoutubeʣΛ༧ఆʢདྷ݄ʁʣ • ύʔτφʔ͞ΜͱͷϫʔΫγϣοϓʢεϥΠυςϯϓϨʔτఏڙʁʣ

  56. Q&AɺΞϯέʔτʢ౴͑ͯͶʂʣ #shopifyjpmeetup

  57. #shopifyjpmeetup Thank you!