初めてのAdobe XD プラグイン開発メモ

by akira_maru

Slide 1

Slide 1 text

ॳΊͯͷAdobe XD ϓϥάΠϯ։ൃϝϞ XDUG OSAKA vol.07

Slide 2

Slide 2 text

• ࣗݾ঺հɺεΩϧɺϓϥάΠϯͷ࡞੒ಈػͳͲʹ͍ͭͯ • ։ൃதʹͭ·͍ͮͨͱ͜Ζ • ࡞Δલʹ·ͣ΍Δ͜ͱ • Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧΛ࡞੒͢Δ • ࡞੒͢Δ্Ͱࢀߟʹͨ͠Ϧιʔε ຊ೔ͷΞδΣϯμ

Slide 3

Slide 3 text

ࣗݾ঺հ

Slide 4

Slide 4 text

• ؙࢁ ষ • Ԭࢁࢢग़਎ɺେࡕ෎ਧాࢢࡏॅ • ΩϯάϓϦϯλʔζ ϚʔέςΟϯά෦ॴଐ • ϚʔΫΞοϓΤϯδχΞ • Dreamweaver ϓϨϦϦʔεϕʔλςελʔ ࣗݾ঺հ https://www.facebook.com/MaruyamaAkiraɹɹɹɹɹɹhttps://twitter.com/akira_maru

Slide 5

Slide 5 text

• JavaScript͸JQueryͰDOMΛΰχϣΰχϣͰ͖Δఔ౓ͷ஌ࣝ  ʢvue.jsͱ͔reactͱ͸࢖͑ͳ͍ʣ • HTMLɺCSS͸·͋ී௨ʹ࢖͑Δ • ӳޠ͸༻ޠΛ͍ͭ͹ΜͰཧղͰ͖Δఔ౓ ͜ͷఔ౓ͷεΩϧͰ΋ͳΜͱ͔ͭ͘Ε·ͨ͠

Slide 6

Slide 6 text

• APIͰ஋Λऔಘ • औಘͨ͠஋Λܭࢉ • ৚݅෼ذͰॲཧΛม͑Δ • APIͰ஋Λ֨ೲɺ࣮ߦ ͜ͷఔ౓ͷεΩϧͰ΋ͳΜͱ͔ͭ͘Ε·ͨ͠ ͜ͷఔ౓Ͱ͢

Slide 7

Slide 7 text

• FireworksɺDreamweaverͰࣗ෼ͷ࡞ۀޮ཰ԽͷͨΊʹ  ίϚϯυΛ࡞੒͍ͯͨ͠ • XDͰ΋ಠࣗϓϥάΠϯ͕JSͰ࡞ΕΔΑ͏ʹͳͬͨͷͰ  ͱΓ͋͑ͣաڈͷ΍ͭΛҠ২ͯ͠ΈΑ͏ʂ XDϓϥάΠϯͷ࡞੒ʹνϟϨϯδͨ͠ಈػ

Slide 8

Slide 8 text

• બ୒ΞʔτϘʔυΛࠨ্ج४ʹ10·ͨ͸100pxͣͭ৳ॖͤ͞Δ • Լ·ͨ͸ӈํ޲ʹ৳ॖ • ΩʔϘʔυγϣʔτΧοτΛ෇༩͍ͯ͠Δ ͱΓ͋͑ͣ࡞੒ͯ͠ެ։ͨ͠ϓϥάΠϯ Artboard Size Expander ΞʔτϘʔυܥ͸ଞʹ͍͔ͭ͘लҳͳͷ͕͋Γ·͢w

Slide 9

Slide 9 text

։ൃதʹ͍᪴ͨͱ͜Ζ

Slide 10

Slide 10 text

• ES2015ͷ͓࡞๏ʢvarΛ࢖ΘͣɺconstͱletͰʣ  →άάͬͯͭͭɺ͓࡞๏Λ࡞Γͳ͕Βཧղ • APIυΩϡϝϯτ౳͕ӳޠ  →Google຋༁͕པΈͷߝʂ  ɹٕज़తͳจষ͸ൺֱత຋༁݁Ռ΋Θ͔Γ΍͍͢ͱࢥ͍·͢  ɹChromeͳΒ֦ுػೳͰ௒ศརʂඞܞʂ  ɹGoogle຋༁ https://bit.ly/2Zcynuf ։ൃதʹ͍᪴ͨͱ͜Ζ

Slide 11

Slide 11 text

࡞Δલʹ·ͣ΍Δ͜ͱ

Slide 12

Slide 12 text

• ࠷ॳ͔Βഎ৳ͼΛ͢Δͱ࠳ં͢Δ • ΍Γ͍ͨ͜ͱ͔ΒϑϩʔΛ෼ղ͢Δ  → બ୒ΦϒδΣΫτͷ਺Λऔಘ  → ΦϒδΣΫτΛx࠲ඪΛऔಘ  → x࠲ඪʹͦΕͧΕ40px௥Ճ͢ΔɹͳͲ ࡞Δલʹ·ͣ΍Δ͜ͱ ͲΜͳϓϥάΠϯΛ࡞Γ͍͔ͨ໌֬ʹ͢Δ

Slide 13

Slide 13 text

Adobe ConsoleΛ࢖ͬͯ  ϕʔεϑΝΠϧͷ࡞੒

Slide 14

Slide 14 text

• Ͱ͖Δਓ͸஛Ԭ͞Μͷઆ໌Ͱ͋ΔΑ͏ʹɺnodeͳͲ։ൃ؀ڥ ͷύοέʔδΛΠϯετʔϧͯ͠։ൃ͢Δͷ͕٢ɻ  Adobe XDϓϥάΠϯΛͭͬͯ͘ΈΑ͏ https://bit.ly/2p4hm5p • ϓϥάΠϯΛެ։͠ͳ͍৔߹Ͱ΋Adobe Consoleʹ৽نϓϩ δΣΫτͱͯ͠ొ࿥͢ΔͱσϑΥϧτͷઃఆΛμ΢ϯϩʔυ Ͱ͖ΔͷͰָͰ͢ɻ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 15

Slide 15 text

• ϒϥ΢β͕։͖ɺϓϥάΠϯ؅ཧ ϖʔδAdobe ConsoleʹΞΫηε ʢཁAdobe IDʣ 1. ϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ϓϥάΠϯͷ࡞੒ Λબ୒ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 16

Slide 16 text

2. ʮ+ New PluginʯϘλϯΫϦοΫ ΫϦοΫ • ϓϥάΠϯҰཡ͕දࣔ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 17

Slide 17 text

3. μΠΞϩά͕ग़ΔͷͰద౰ʹϓϥάΠϯ໊ΛೖΕΔ ΫϦοΫ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 18

Slide 18 text

4. ʮCreateʯϘλϯΫϦοΫ ΫϦοΫ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 19

Slide 19 text

5. ϓϥάΠϯ؅ཧϖʔδʹભҠɻ ΫϦοΫ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 20

Slide 20 text

6. Download the starter projectͷ  ͱ͜ΖͷʮDownloadʯϘλϯΫϦοΫ ΫϦοΫ • ϓϩδΣΫτ͕μ΢ϯϩʔυ͞ΕΔ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 21

Slide 21 text

7. XDʹ໭ΓɺϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ։ൃϑΥϧμʔ  Λදࣔ Λબ୒ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 22

Slide 22 text

8. දࣔ͞ΕͨϑΥϧμʹઌఔDLͨ͠zipϑΝΠϧΛҠಈɻղౚ͢Δɻ ΫϦοΫͰղౚ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 23

Slide 23 text

9. XDʹ໭ΓɺϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ϓϥάΠϯΛ࠶ಡ ΈࠐΈ Λબ୒ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒

Slide 24

Slide 24 text

͋ͱ͸։ൃ͢Δ͚ͩ

Slide 25

Slide 25 text

࡞Δ্Ͱࢀߟʹͨ͠Ϧιʔε

Slide 26

Slide 26 text

࡞Δ্Ͱࢀߟʹͨ͠Ϧιʔε 1. ଞਓͷϓϥάΠϯͷϦιʔεΛΈΔ • ։ൃϑΥϧμʔͷ1্ͭʹplugins  ϑΥϧμʔ͕͋Δɻ • Πϯετʔϧ͞ΕͨϓϥάΠϯͷ  ϦιʔεσʔλΛݟΔ͜ͱ͕Ͱ͖Δɻ • ࡞Γ͍ͨϓϥάΠϯͱࣅͨΑ͏ͳػೳͷ ΋ͷΛಋೖɺίʔυΛͳ͕ΊΔɻ • ॻ͖ํ΍஋ͷऔಘํ๏ͳͲΛࢀߟʹɻ

Slide 27

Slide 27 text

࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 2. Layers 4 DevelopersϓϥάΠϯΛೖΕΔ • બ୒ͨ͠ΦϒδΣΫτͷϓϩύςΟʔͷ ஋Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ • http://emsoftware.com/xdplugins/ layers-4-developers/

Slide 28

Slide 28 text

࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 3. APIυΩϡϝϯτ • https://adobexdplatform.com/plugin- docs/ • ೔ຊޠԽ͸͞Ε͍ͯͳ͍ • ݱࡏ͸ࣄྫ΍αϯϓϧϑΝΠϧ΋  ଟ਺ఏڙ

Slide 29

Slide 29 text

࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 4. Adobe Tech Blog • https://medium.com/adobetech • APIؔ࿈ͷ৘ใൃ৴Λ͞Ε͍ͯΔΑ͏ • APIͷ࢓༷มߋͷ৘ใ͸͕͜͜Ұ൪଎ ͍͔΋

Slide 30

Slide 30 text

Ҏ্ɺ͓͠·͍ʂ ࣭໰͕͋Ε͹ޙͰ