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

JavaScriptもJQueryでゴニョゴニョする程度のレベルでもなんとかプラグインを作ることができたので、開発時に躓いたことや参考リソースなどを紹介。

Transcript

1. ॳΊͯͷAdobe XD ϓϥάΠϯ։ൃϝϞ XDUG OSAKA vol.07
2. • ࣗݾ঺հɺεΩϧɺϓϥάΠϯͷ࡞੒ಈػͳͲʹ͍ͭͯ • ։ൃதʹͭ·͍ͮͨͱ͜Ζ • ࡞Δલʹ·ͣ΍Δ͜ͱ • Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧΛ࡞੒͢Δ • ࡞੒͢Δ্Ͱࢀߟʹͨ͠Ϧιʔε ຊ೔ͷΞδΣϯμ
3. ࣗݾ঺հ
4. • ؙࢁ ষ • Ԭࢁࢢग़਎ɺେࡕ෎ਧాࢢࡏॅ • ΩϯάϓϦϯλʔζ ϚʔέςΟϯά෦ॴଐ • ϚʔΫΞοϓΤϯδχΞ • Dreamweaver ϓϨϦϦʔεϕʔλςελʔ ࣗݾ঺հ https://www.facebook.com/MaruyamaAkiraɹɹɹɹɹɹhttps://twitter.com/akira_maru
5. • JavaScript͸JQueryͰDOMΛΰχϣΰχϣͰ͖Δఔ౓ͷ஌ࣝ
 ʢvue.jsͱ͔reactͱ͸࢖͑ͳ͍ʣ • HTMLɺCSS͸·͋ී௨ʹ࢖͑Δ • ӳޠ͸༻ޠΛ͍ͭ͹ΜͰཧղͰ͖Δఔ౓ ͜ͷఔ౓ͷεΩϧͰ΋ͳΜͱ͔ͭ͘Ε·ͨ͠
6. • APIͰ஋Λऔಘ • औಘͨ͠஋Λܭࢉ • ৚݅෼ذͰॲཧΛม͑Δ • APIͰ஋Λ֨ೲɺ࣮ߦ ͜ͷఔ౓ͷεΩϧͰ΋ͳΜͱ͔ͭ͘Ε·ͨ͠ ͜ͷఔ౓Ͱ͢
7. • FireworksɺDreamweaverͰࣗ෼ͷ࡞ۀޮ཰ԽͷͨΊʹ
 ίϚϯυΛ࡞੒͍ͯͨ͠ • XDͰ΋ಠࣗϓϥάΠϯ͕JSͰ࡞ΕΔΑ͏ʹͳͬͨͷͰ
 ͱΓ͋͑ͣաڈͷ΍ͭΛҠ২ͯ͠ΈΑ͏ʂ XDϓϥάΠϯͷ࡞੒ʹνϟϨϯδͨ͠ಈػ
8. • બ୒ΞʔτϘʔυΛࠨ্ج४ʹ10·ͨ͸100pxͣͭ৳ॖͤ͞Δ • Լ·ͨ͸ӈํ޲ʹ৳ॖ • ΩʔϘʔυγϣʔτΧοτΛ෇༩͍ͯ͠Δ ͱΓ͋͑ͣ࡞੒ͯ͠ެ։ͨ͠ϓϥάΠϯ Artboard Size Expander ΞʔτϘʔυܥ͸ଞʹ͍͔ͭ͘लҳͳͷ͕͋Γ·͢w
9. ։ൃதʹ͍᪴ͨͱ͜Ζ
10. • ES2015ͷ͓࡞๏ʢvarΛ࢖ΘͣɺconstͱletͰʣ
 →άάͬͯͭͭɺ͓࡞๏Λ࡞Γͳ͕Βཧղ • APIυΩϡϝϯτ౳͕ӳޠ
 →Google຋༁͕པΈͷߝʂ
 ɹٕज़తͳจষ͸ൺֱత຋༁݁Ռ΋Θ͔Γ΍͍͢ͱࢥ͍·͢
 ɹChromeͳΒ֦ுػೳͰ௒ศརʂඞܞʂ
 ɹGoogle຋༁ https://bit.ly/2Zcynuf ։ൃதʹ͍᪴ͨͱ͜Ζ
11. ࡞Δલʹ·ͣ΍Δ͜ͱ
12. • ࠷ॳ͔Βഎ৳ͼΛ͢Δͱ࠳ં͢Δ • ΍Γ͍ͨ͜ͱ͔ΒϑϩʔΛ෼ղ͢Δ
 → બ୒ΦϒδΣΫτͷ਺Λऔಘ
 → ΦϒδΣΫτΛx࠲ඪΛऔಘ
 → x࠲ඪʹͦΕͧΕ40px௥Ճ͢ΔɹͳͲ ࡞Δલʹ·ͣ΍Δ͜ͱ ͲΜͳϓϥάΠϯΛ࡞Γ͍͔ͨ໌֬ʹ͢Δ
13. Adobe ConsoleΛ࢖ͬͯ
 ϕʔεϑΝΠϧͷ࡞੒
14. • Ͱ͖Δਓ͸஛Ԭ͞Μͷઆ໌Ͱ͋ΔΑ͏ʹɺnodeͳͲ։ൃ؀ڥ ͷύοέʔδΛΠϯετʔϧͯ͠։ൃ͢Δͷ͕٢ɻ
 Adobe XDϓϥάΠϯΛͭͬͯ͘ΈΑ͏ https://bit.ly/2p4hm5p • ϓϥάΠϯΛެ։͠ͳ͍৔߹Ͱ΋Adobe Consoleʹ৽نϓϩ δΣΫτͱͯ͠ొ࿥͢ΔͱσϑΥϧτͷઃఆΛμ΢ϯϩʔυ Ͱ͖ΔͷͰָͰ͢ɻ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
15. • ϒϥ΢β͕։͖ɺϓϥάΠϯ؅ཧ ϖʔδAdobe ConsoleʹΞΫηε ʢཁAdobe IDʣ 1. ϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ϓϥάΠϯͷ࡞੒ Λબ୒ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
16. 2. ʮ+ New PluginʯϘλϯΫϦοΫ ΫϦοΫ • ϓϥάΠϯҰཡ͕දࣔ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
17. 3. μΠΞϩά͕ग़ΔͷͰద౰ʹϓϥάΠϯ໊ΛೖΕΔ ΫϦοΫ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
18. 4. ʮCreateʯϘλϯΫϦοΫ ΫϦοΫ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
19. 5. ϓϥάΠϯ؅ཧϖʔδʹભҠɻ ΫϦοΫ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
20. 6. Download the starter projectͷ
 ͱ͜ΖͷʮDownloadʯϘλϯΫϦοΫ ΫϦοΫ • ϓϩδΣΫτ͕μ΢ϯϩʔυ͞ΕΔ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
21. 7. XDʹ໭ΓɺϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ։ൃϑΥϧμʔ
 Λදࣔ Λબ୒ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
22. 8. දࣔ͞ΕͨϑΥϧμʹઌఔDLͨ͠zipϑΝΠϧΛҠಈɻղౚ͢Δɻ ΫϦοΫͰղౚ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
23. 9. XDʹ໭ΓɺϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ϓϥάΠϯΛ࠶ಡ ΈࠐΈ Λબ୒ Adobe ConsoleΛ࢖ͬͯϕʔεϑΝΠϧͷ࡞੒
24. ͋ͱ͸։ൃ͢Δ͚ͩ
25. ࡞Δ্Ͱࢀߟʹͨ͠Ϧιʔε
26. ࡞Δ্Ͱࢀߟʹͨ͠Ϧιʔε 1. ଞਓͷϓϥάΠϯͷϦιʔεΛΈΔ • ։ൃϑΥϧμʔͷ1্ͭʹplugins
 ϑΥϧμʔ͕͋Δɻ • Πϯετʔϧ͞ΕͨϓϥάΠϯͷ
 ϦιʔεσʔλΛݟΔ͜ͱ͕Ͱ͖Δɻ • ࡞Γ͍ͨϓϥάΠϯͱࣅͨΑ͏ͳػೳͷ ΋ͷΛಋೖɺίʔυΛͳ͕ΊΔɻ • ॻ͖ํ΍஋ͷऔಘํ๏ͳͲΛࢀߟʹɻ
27. ࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 2. Layers 4 DevelopersϓϥάΠϯΛೖΕΔ • બ୒ͨ͠ΦϒδΣΫτͷϓϩύςΟʔͷ ஋Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ • http://emsoftware.com/xdplugins/ layers-4-developers/
28. ࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 3. APIυΩϡϝϯτ • https://adobexdplatform.com/plugin- docs/ • ೔ຊޠԽ͸͞Ε͍ͯͳ͍ • ݱࡏ͸ࣄྫ΍αϯϓϧϑΝΠϧ΋
 ଟ਺ఏڙ
29. ࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 4. Adobe Tech Blog • https://medium.com/adobetech • APIؔ࿈ͷ৘ใൃ৴Λ͞Ε͍ͯΔΑ͏ • APIͷ࢓༷มߋͷ৘ใ͸͕͜͜Ұ൪଎ ͍͔΋
30. Ҏ্ɺ͓͠·͍ʂ ࣭໰͕͋Ε͹ޙͰ