$30 off During Our Annual Pro Sale. View Details »

Vue.jsで書くAdobe XD Plugin

Vue.jsで書くAdobe XD Plugin

TanakaMidnight

October 23, 2019
Tweet

More Decks by TanakaMidnight

Other Decks in Programming

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
  7. None
  8. IT 勉強会検索 @ 関⻄ IT 勉強会検索 @ 関⻄ https://itss.app/kansai

  9. None
  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. すべてのアートボードからテキストを検索し すべてのアートボードからテキストを検索し リスト表⽰し⼀括で置換する リスト表⽰し⼀括で置換する

  20. None
  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 さあ、作ってみよう!