Vue.jsで書くAdobe XD Plugin

Transcript

1. Vue.js で書く Vue.js で書く Adobe XD Adobe XD Plugin Plugin @TanakaMidnight at Adobe XD UserGroup Osaka Vol.07(19/10/24)
2. Agenda Agenda introduce 作ったPlugin 紹介 Vue.js って何？ Adobe XD Plugin をVue.js で書く 告知
3. ご注意 ご注意 本スライドは 本スライドは 少し JavaScript を理解していないと 少し JavaScript を理解していないと 最後のあたり難しいかもしれません 最後のあたり難しいかもしれません あらかじめご了承ください。 m(_ _)m あらかじめご了承ください。 m(_ _)m
4. introduce introduce
5. ⽥中伸弥 ⽥中伸弥 atma 株式会社所属 サーバーサイド・フロントエンドエンジニア どっちかというとサーバーサイド Python(Django), Perl, JavaScript(TypeScript)
6. こんなの作ったりしてます。 こんなの作ったりしてます。 IT 勉強会通知 @ 関⻄ IT 勉強会通知 @ 関⻄ @itsskansai
8. IT 勉強会検索 @ 関⻄ IT 勉強会検索 @ 関⻄ https://itss.app/kansai
10. 活動 活動 FJUG Osaka Organizer FJUG Osaka Organizer （Firebase 関連の勉強会） GDGOsaka Co-Organizer GDGOsaka Co-Organizer （Google 関係技術の勉強会） VueJS Osaka 運営 VueJS Osaka 運営 （Vue.js の勉強会）
11. Adobe XD Adobe XD との関わり との関わり 1. 「⼤阪 Adobe XD meeting #04 」に⼀般参加。 2. AdobeXD にはPlugin があり、JavaScript で開発できることを知る。
12. Adobe XD Adobe XD Plugin との関わり Plugin との関わり 1. 名前や年齢などを⾃動⽣成するPlugin 「ContentGenerator 」が紹介 されていた。 2. ただし、↑のPlugin は英語のみの対応。 3. 「⽇本語版あったらいいのにねー」的なことを⾔ってたので、さくっ と⽇本語化できんじゃね？的な感じで休憩中に調べてみる。
13. できそう ! できそう ! https://twitter.com/TanakaMidnight/status/1094169446896132096
14. できた !! できた !! その夜、本格的に対応可能か調査。 できそうだったのでいろいろと⽇本⽤にローカライズさせ完成！
15. ただし ただし 元のPlugin 作者と連絡がとれず、お蔵⼊り(´ ・ω ・｀)
16. 本登壇が決まり、 本登壇が決まり、 せっかくなので 1 から Plugin を作成。 せっかくなので 1 から Plugin を作成。
17. できた !!! できた !!!
18. 作った Plugin 紹介 作った Plugin 紹介
19. すべてのアートボードからテキストを検索し すべてのアートボードからテキストを検索し リスト表⽰し⼀括で置換する リスト表⽰し⼀括で置換する
21. DEMO DEMO
22. Vue.js って何？ Vue.js って何？
23. JavaScript Frontend Framework React などの他のFramework と⽐べ初期学習コストは低め
24. Q. jQuery でいいんじゃね？ Q. jQuery でいいんじゃね？
25. A. できなくはないがつらいことがある A. できなくはないがつらいことがある エラー判定とか表⽰処理したい。 Ajax でAPI 呼んでデータを表⽰したい。 リストやテーブルをループして値を表⽰したい。 ただし、あくまで適材適所。
26. ↓の解説がわかりやすい。 Vue.js VS jQuery Vue.js VS jQuery https://www.notion.so/pixelgramjp/Vue-js-VS-jQuery- a05267c01901471fac06daf0c699dd75
27. 単⼀ファイルコンポーネント 単⼀ファイルコンポーネント べんり <template> <p>{{ greeting }} World!</p> </template> <script> module.exports = { data: function () { return { greeting: 'Hello' } } } </script> <style scoped=""> p { font-size: 2em; text-align: center; } </style>
28. Adobe XD Adobe XD Plugin を Plugin を Vue.js で書く Vue.js で書く
29. なぜ Vue.js で書くのか？ なぜ Vue.js で書くのか？ 公式がサンプル⽤意してくれてる リスト表⽰が楽にかける。 デザイン部分と処理部分の分離ができる。 普通に書くのと圧倒的な優位性はそこまでない。
30. 先ほどの検索、置換 Plugin の実際 先ほどの検索、置換 Plugin の実際 のコードを例に解説。 のコードを例に解説。
31. List 部分を抜粋（⼀部簡略化） List 部分を抜粋（⼀部簡略化） <template> <div v-for="searchResult in searchResults"> <div class="table-col">{{ searchResult.board }}</div> <div class="table-col">{{ searchResult.text }}</div> <div class="table-col">{{ searchResult.replaceText }}</div> </div> </template> <script> module.exports = { data() { return { // 検索文字 searchText: "", // 検索結果 searchResults: [] } }, methods: { search() { // 検索結果 空 this.searchResults = [] // 全 検索 this.documentRoot.children.forEach(node => { if (node instanceof Artboard) { // 全 検索
32. DOM 操作をガリガリ書かなくても DOM 操作をガリガリ書かなくても リスト表⽰がかける。 リスト表⽰がかける。
33. まとめ まとめ Vue.js を使うことでAdobe XD Plugin が書ける。 リスト表⽰や複雑な処理をする場合、Vue.js で書くことを検討しても いいかも。 Plugin のHTML は若⼲クセがあるので気をつけないといけない。
34. END END さあ、作ってみよう！