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)
   

   View Slide

2. Agenda
   Agenda
   introduce
   作ったPlugin
   紹介
   Vue.js
   って何？
   Adobe XD Plugin
   をVue.js
   で書く
   告知
   

   View Slide

3. ご注意
   ご注意
   本スライドは
   本スライドは
   少し
   JavaScript
   を理解していないと
   少し
   JavaScript
   を理解していないと
   最後のあたり難しいかもしれません
   最後のあたり難しいかもしれません
   あらかじめご了承ください。
   m(_ _)m
   あらかじめご了承ください。
   m(_ _)m
   

   View Slide

4. introduce
   introduce
   

   View Slide

5. ⽥中伸弥
   ⽥中伸弥
   atma
   株式会社所属
   サーバーサイド・フロントエンドエンジニア
   どっちかというとサーバーサイド
   Python(Django), Perl, JavaScript(TypeScript)
   

   View Slide

6. こんなの作ったりしてます。
   こんなの作ったりしてます。
   IT
   勉強会通知
   @
   関⻄
   IT
   勉強会通知
   @
   関⻄
   @itsskansai
   

   View Slide

7. View Slide

8. IT
   勉強会検索
   @
   関⻄
   IT
   勉強会検索
   @
   関⻄
   https://itss.app/kansai
   

   View Slide

9. View Slide

10. 活動
    活動
    FJUG Osaka Organizer
    FJUG Osaka Organizer
    （Firebase
    関連の勉強会）
    GDGOsaka Co-Organizer
    GDGOsaka Co-Organizer
    （Google
    関係技術の勉強会）
    VueJS Osaka
    運営
    VueJS Osaka
    運営
    （Vue.js
    の勉強会）
    

    View Slide

11. Adobe XD
    Adobe XD
    との関わり
    との関わり
    1.
    「⼤阪 Adobe XD meeting #04
    」に⼀般参加。
    2. AdobeXD
    にはPlugin
    があり、JavaScript
    で開発できることを知る。
    

    View Slide

12. Adobe XD
    Adobe XD Plugin
    との関わり
    Plugin
    との関わり
    1.
    名前や年齢などを⾃動⽣成するPlugin
    「ContentGenerator
    」が紹介
    されていた。
    2.
    ただし、↑のPlugin
    は英語のみの対応。
    3.
    「⽇本語版あったらいいのにねー」的なことを⾔ってたので、さくっ
    と⽇本語化できんじゃね？的な感じで休憩中に調べてみる。
    

    View Slide

13. できそう
    !
    できそう
    !
    https://twitter.com/TanakaMidnight/status/1094169446896132096
    

    View Slide

14. できた
    !!
    できた
    !!
    その夜、本格的に対応可能か調査。
    できそうだったのでいろいろと⽇本⽤にローカライズさせ完成！
    

    View Slide

15. ただし
    ただし
    元のPlugin
    作者と連絡がとれず、お蔵⼊り(´
    ・ω
    ・｀)
    

    View Slide

16. 本登壇が決まり、
    本登壇が決まり、
    せっかくなので
    1
    から
    Plugin
    を作成。
    せっかくなので
    1
    から
    Plugin
    を作成。
    

    View Slide

17. できた
    !!!
    できた
    !!!
    

    View Slide

18. 作った
    Plugin
    紹介
    作った
    Plugin
    紹介
    

    View Slide

19. すべてのアートボードからテキストを検索し
    すべてのアートボードからテキストを検索し
    リスト表⽰し⼀括で置換する
    リスト表⽰し⼀括で置換する
    

    View Slide

20. View Slide

21. DEMO
    DEMO
    

    View Slide

22. Vue.js
    って何？
    Vue.js
    って何？
    

    View Slide

23. JavaScript Frontend Framework
    React
    などの他のFramework
    と⽐べ初期学習コストは低め
    

    View Slide

24. Q. jQuery
    でいいんじゃね？
    Q. jQuery
    でいいんじゃね？
    

    View Slide

25. A.
    できなくはないがつらいことがある
    A.
    できなくはないがつらいことがある
    エラー判定とか表⽰処理したい。
    Ajax
    でAPI
    呼んでデータを表⽰したい。
    リストやテーブルをループして値を表⽰したい。
    ただし、あくまで適材適所。
    

    View Slide

26. ↓の解説がわかりやすい。
    Vue.js VS jQuery
    Vue.js VS jQuery
    https://www.notion.so/pixelgramjp/Vue-js-VS-jQuery-
    a05267c01901471fac06daf0c699dd75
    

    View Slide

27. 単⼀ファイルコンポーネント
    単⼀ファイルコンポーネント
    べんり
    
    {{ greeting }} World!
    
    <br/>module.exports = {<br/>data: function () {<br/>return {<br/>greeting: 'Hello'<br/>}<br/>}<br/>}<br/>
    <br/>p {<br/>font-size: 2em;<br/>text-align: center;<br/>}<br/>
    

    View Slide

28. Adobe XD
    Adobe XD Plugin
    を
    Plugin
    を
    Vue.js
    で書く
    Vue.js
    で書く
    

    View Slide

29. なぜ
    Vue.js
    で書くのか？
    なぜ
    Vue.js
    で書くのか？
    公式がサンプル⽤意してくれてる
    リスト表⽰が楽にかける。
    デザイン部分と処理部分の分離ができる。
    普通に書くのと圧倒的な優位性はそこまでない。
    

    View Slide

30. 先ほどの検索、置換
    Plugin
    の実際
    先ほどの検索、置換
    Plugin
    の実際
    のコードを例に解説。
    のコードを例に解説。
    

    View Slide

31. List
    部分を抜粋（⼀部簡略化）
    List
    部分を抜粋（⼀部簡略化）
    
    
    {{ searchResult.board }}
    {{ searchResult.text }}
    {{ searchResult.replaceText }}
    
    
    <br/>module.exports = {<br/>data() {<br/>return {<br/>// 検索文字<br/>searchText: "",<br/>// 検索結果<br/>searchResults: []<br/>}<br/>},<br/>methods: {<br/>search() {<br/>// 検索結果 空<br/>this.searchResults = []<br/>// 全 検索<br/>this.documentRoot.children.forEach(node => {<br/>if (node instanceof Artboard) {<br/>// 全 検索<br/>

    View Slide

32. DOM
    操作をガリガリ書かなくても
    DOM
    操作をガリガリ書かなくても
    リスト表⽰がかける。
    リスト表⽰がかける。
    

    View Slide

33. まとめ
    まとめ
    Vue.js
    を使うことでAdobe XD Plugin
    が書ける。
    リスト表⽰や複雑な処理をする場合、Vue.js
    で書くことを検討しても
    いいかも。
    Plugin
    のHTML
    は若⼲クセがあるので気をつけないといけない。
    

    View Slide

34. END
    END
    さあ、作ってみよう！
    

    View Slide