Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
初めてのAdobe XD プラグイン開発メモ
akira_maru
October 23, 2019
Programming
1
430
初めての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
44
Other Decks in Programming
See All in Programming
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
410
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
330
Vite でお手軽 Vue.js の環境構築
azuki
2
180
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
620
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
560
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
240
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
920
Lancersをコンテナへ本番移行する取り組み
rvirus0817
1
390
Meet Swift Regex
usamik26
0
360
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.8k
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.1k
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
Featured
See All Featured
Producing Creativity
orderedlist
PRO
334
37k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Fireside Chat
paigeccino
12
1.3k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Making Projects Easy
brettharned
98
4.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
GraphQLの誤解/rethinking-graphql
sonatard
28
6.6k
Ruby is Unlike a Banana
tanoku
91
9.2k
BBQ
matthewcrist
74
7.9k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Rails Girls Zürich Keynote
gr2m
86
12k
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ͷ༷มߋͷใ͕͜͜Ұ൪ ͍͔
Ҏ্ɺ͓͠·͍ʂ ࣭͕͋ΕޙͰ