Vue.jsで書くAdobe XD Plugin

Vue.jsで書くAdobe XD Plugin

F38f6a8424ffd84d7869989856d90c6f?s=128

TanakaMidnight

October 23, 2019
Tweet

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