Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初めてのAdobe XD プラグイン開発メモ
Search
akira_maru
October 23, 2019
Programming
1
800
初めてのAdobe XD プラグイン開発メモ
JavaScriptもJQueryでゴニョゴニョする程度のレベルでもなんとかプラグインを作ることができたので、開発時に躓いたことや参考リソースなどを紹介。
akira_maru
October 23, 2019
Tweet
Share
More Decks by akira_maru
See All by akira_maru
Measurement protocolを利用したメルマガ開封測定
akira_maru
0
61
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
450
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
680
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
130
ニーリーにおけるプロダクトエンジニア
nealle
0
670
NPOでのDevinの活用
codeforeveryone
0
480
PicoRuby on Rails
makicamel
2
110
XP, Testing and ninja testing
m_seki
3
220
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
GraphRAGの仕組みまるわかり
tosuri13
8
500
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
0
160
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Optimizing for Happiness
mojombo
379
70k
Designing for humans not robots
tammielis
253
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
4 Signs Your Business is Dying
shpigford
184
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How GitHub (no longer) Works
holman
314
140k
Faster Mobile Websites
deanohume
307
31k
Transcript
ॳΊͯͷAdobe XD ϓϥάΠϯ։ൃϝϞ XDUG OSAKA vol.07
• ࣗݾհɺεΩϧɺϓϥάΠϯͷ࡞ಈػͳͲʹ͍ͭͯ • ։ൃதʹͭ·͍ͮͨͱ͜Ζ • ࡞Δલʹ·ͣΔ͜ͱ • Adobe ConsoleΛͬͯϕʔεϑΝΠϧΛ࡞͢Δ •
࡞͢Δ্Ͱࢀߟʹͨ͠Ϧιʔε ຊͷΞδΣϯμ
ࣗݾհ
• ؙࢁ ষ • Ԭࢁࢢग़ɺେࡕਧాࢢࡏॅ • ΩϯάϓϦϯλʔζ ϚʔέςΟϯά෦ॴଐ • ϚʔΫΞοϓΤϯδχΞ
• Dreamweaver ϓϨϦϦʔεϕʔλςελʔ ࣗݾհ https://www.facebook.com/MaruyamaAkiraɹɹɹɹɹɹhttps://twitter.com/akira_maru
• JavaScriptJQueryͰDOMΛΰχϣΰχϣͰ͖Δఔͷࣝ ʢvue.jsͱ͔reactͱ͑ͳ͍ʣ • HTMLɺCSS·͋ී௨ʹ͑Δ • ӳޠ༻ޠΛ͍ͭΜͰཧղͰ͖Δఔ ͜ͷఔͷεΩϧͰͳΜͱ͔ͭ͘Ε·ͨ͠
• APIͰΛऔಘ • औಘͨ͠Λܭࢉ • ݅ذͰॲཧΛม͑Δ • APIͰΛ֨ೲɺ࣮ߦ ͜ͷఔͷεΩϧͰͳΜͱ͔ͭ͘Ε·ͨ͠ ͜ͷఔͰ͢
• FireworksɺDreamweaverͰࣗͷ࡞ۀޮԽͷͨΊʹ ίϚϯυΛ࡞͍ͯͨ͠ • XDͰಠࣗϓϥάΠϯ͕JSͰ࡞ΕΔΑ͏ʹͳͬͨͷͰ ͱΓ͋͑ͣաڈͷͭΛҠ২ͯ͠ΈΑ͏ʂ XDϓϥάΠϯͷ࡞ʹνϟϨϯδͨ͠ಈػ
• બΞʔτϘʔυΛࠨ্ج४ʹ10·ͨ100pxͣͭ৳ॖͤ͞Δ • Լ·ͨӈํʹ৳ॖ • ΩʔϘʔυγϣʔτΧοτΛ༩͍ͯ͠Δ ͱΓ͋͑ͣ࡞ͯ͠ެ։ͨ͠ϓϥάΠϯ Artboard Size Expander
ΞʔτϘʔυܥଞʹ͍͔ͭ͘लҳͳͷ͕͋Γ·͢w
։ൃதʹ͍᪴ͨͱ͜Ζ
• ES2015ͷ͓࡞๏ʢvarΛΘͣɺconstͱletͰʣ →άάͬͯͭͭɺ͓࡞๏Λ࡞Γͳ͕Βཧղ • APIυΩϡϝϯτ͕ӳޠ →Google༁͕པΈͷߝʂ ɹٕज़తͳจষൺֱత༁݁ՌΘ͔Γ͍͢ͱࢥ͍·͢ ɹChromeͳΒ֦ுػೳͰศརʂඞܞʂ ɹGoogle༁ https://bit.ly/2Zcynuf
։ൃதʹ͍᪴ͨͱ͜Ζ
࡞Δલʹ·ͣΔ͜ͱ
• ࠷ॳ͔Βഎ৳ͼΛ͢Δͱ࠳ં͢Δ • Γ͍ͨ͜ͱ͔ΒϑϩʔΛղ͢Δ → બΦϒδΣΫτͷΛऔಘ → ΦϒδΣΫτΛx࠲ඪΛऔಘ → x࠲ඪʹͦΕͧΕ40pxՃ͢ΔɹͳͲ
࡞Δલʹ·ͣΔ͜ͱ ͲΜͳϓϥάΠϯΛ࡞Γ͍͔ͨ໌֬ʹ͢Δ
Adobe ConsoleΛͬͯ ϕʔεϑΝΠϧͷ࡞
• Ͱ͖ΔਓԬ͞Μͷઆ໌Ͱ͋ΔΑ͏ʹɺnodeͳͲ։ൃڥ ͷύοέʔδΛΠϯετʔϧͯ͠։ൃ͢Δͷ͕٢ɻ Adobe XDϓϥάΠϯΛͭͬͯ͘ΈΑ͏ https://bit.ly/2p4hm5p • ϓϥάΠϯΛެ։͠ͳ͍߹ͰAdobe Consoleʹ৽نϓϩ δΣΫτͱͯ͠ొ͢ΔͱσϑΥϧτͷઃఆΛμϯϩʔυ
Ͱ͖ΔͷͰָͰ͢ɻ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
• ϒϥβ͕։͖ɺϓϥάΠϯཧ ϖʔδAdobe ConsoleʹΞΫηε ʢཁAdobe IDʣ 1. ϝχϡʔɿϓϥάΠϯ > ։ൃ൛
> ϓϥάΠϯͷ࡞ Λબ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
2. ʮ+ New PluginʯϘλϯΫϦοΫ ΫϦοΫ • ϓϥάΠϯҰཡ͕දࣔ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
3. μΠΞϩά͕ग़ΔͷͰదʹϓϥάΠϯ໊ΛೖΕΔ ΫϦοΫ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
4. ʮCreateʯϘλϯΫϦοΫ ΫϦοΫ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
5. ϓϥάΠϯཧϖʔδʹભҠɻ ΫϦοΫ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
6. Download the starter projectͷ ͱ͜ΖͷʮDownloadʯϘλϯΫϦοΫ ΫϦοΫ • ϓϩδΣΫτ͕μϯϩʔυ͞ΕΔ Adobe
ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
7. XDʹΓɺϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ։ൃϑΥϧμʔ Λදࣔ Λબ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
8. දࣔ͞ΕͨϑΥϧμʹઌఔDLͨ͠zipϑΝΠϧΛҠಈɻղౚ͢Δɻ ΫϦοΫͰղౚ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
9. XDʹΓɺϝχϡʔɿϓϥάΠϯ > ։ൃ൛ > ϓϥάΠϯΛ࠶ಡ ΈࠐΈ Λબ Adobe ConsoleΛͬͯϕʔεϑΝΠϧͷ࡞
͋ͱ։ൃ͢Δ͚ͩ
࡞Δ্Ͱࢀߟʹͨ͠Ϧιʔε
࡞Δ্Ͱࢀߟʹͨ͠Ϧιʔε 1. ଞਓͷϓϥάΠϯͷϦιʔεΛΈΔ • ։ൃϑΥϧμʔͷ1্ͭʹplugins ϑΥϧμʔ͕͋Δɻ • Πϯετʔϧ͞ΕͨϓϥάΠϯͷ ϦιʔεσʔλΛݟΔ͜ͱ͕Ͱ͖Δɻ •
࡞Γ͍ͨϓϥάΠϯͱࣅͨΑ͏ͳػೳͷ ͷΛಋೖɺίʔυΛͳ͕ΊΔɻ • ॻ͖ํͷऔಘํ๏ͳͲΛࢀߟʹɻ
࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 2. Layers 4 DevelopersϓϥάΠϯΛೖΕΔ • બͨ͠ΦϒδΣΫτͷϓϩύςΟʔͷ Λදࣔ͢Δ͜ͱ͕Ͱ͖Δ • http://emsoftware.com/xdplugins/
layers-4-developers/
࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 3. APIυΩϡϝϯτ • https://adobexdplatform.com/plugin- docs/ • ຊޠԽ͞Ε͍ͯͳ͍ • ݱࡏࣄྫαϯϓϧϑΝΠϧ
ଟఏڙ
࡞Δ্Ͱͷࢀߟʹͨ͠Ϧιʔε 4. Adobe Tech Blog • https://medium.com/adobetech • APIؔ࿈ͷใൃ৴Λ͞Ε͍ͯΔΑ͏ •
APIͷ༷มߋͷใ͕͜͜Ұ൪ ͍͔
Ҏ্ɺ͓͠·͍ʂ ࣭͕͋ΕޙͰ