Adobe XD拡張機能「テキスト校正くん」の開発話

Adobe XDプラグインの「テキスト校正くん for XD」。

・Firebaseとの連携
・ネットワーク連携
・プラグイン開発にVue.jsを使う利点
・プチアイデア集
・XDの自動アニメーションの再現

を解説しています。

Transcript

1. ネットワークを利用した拡張機能
   「テキスト校正くん」の開発話
   池田 泰延
   令和元年10月6日 @ 仙台
   

   View Slide

2. 自己紹介
   池田 泰延
   株式会社 ICS 代表 / ics.media編集長 / 筑波大学 非常勤講師
   @clockmaker
   

   View Slide

3. このセッションでお伝えすること
   ・テキスト校正くんのアーキテクチャー
   ・ネットワーク連携
   ・ユーザーインターフェース設計
   

   View Slide

4. テキスト校正くん
   

   View Slide

5. テキスト構成くんの設計
   拡張機能 Firebase
   

   View Slide

6. Firebase
   Firebase
   Googleによるバックエンド側のインフラを提供するサービス
   

   View Slide

7. テキスト校正エンジンはtextlint
   ・textlintはNode.jsで動作するテキスト校正エンジン
   ・文字列とオプションを引数に与えれば、
   　校正結果を取得できる
   ・ICSが作成した独自の校正辞書を積んで
   　「テキスト校正くん」ブランドで展開
   

   View Slide

8. テキスト校正くん辞書はオープンソース
   ics‑creative/textlint‑rule‑preset‑icsmedia
   https://github.com/ics‑creative/textlint‑rule‑preset‑icsmedia
   

   View Slide

9. テキスト校正くん辞書はオープンソース
   校正辞書の例
   ・Adobe Xd 　 → Adobe XD
   ・After Effect → After Effects
   ・DreamWeaver → Dreamweaver
   ・Github 　　 　 → GitHub
   ・キャノン → キヤノン
   

   View Slide

10. テキスト校正くん ‑ VS Code拡張機能
    文章作成・メール作成に役立つ！
    VS Codeの拡張機能「テキスト校正くん」
    https://ics.media/entry/
    VS Codeの拡張機能として
    プラグインを公開している
    (textlintは内包している)
    

    View Slide

11. テキスト校正くん ‑ オンライン(未公開)
    ブラウザだけで利用できる
    テキスト校正くん
    裏側ではFirebaseで動かしている
    

    View Slide

12. Firebase上に構築したAPI
    文字列情報として投げる
    校正結果をJSONで返す
    手元のJavaScript FirebaseのFunctions
    

    View Slide

13. 拡張機能のコード
    選択中のアイテムをif文でチェックする
    

    View Slide

14. ネットワークにぶん投げる
    fetch()メソッドでFirebaseに投げる
    

    View Slide

15. ユーザーインターフェース
    dialogをどうやって作ったか？
    

    View Slide

16. 初期のコード
    ゴリゴリとcreateElementで頑張っていた
    

    View Slide

17. 最近のコード
    Vue.js + TypeScriptに置き換えた
    

    View Slide

18. Vue.jsで得たメリット
    ・HTML構文でHTMLが書ける
    　　・JavaScriptのcreateElement()地獄からの解放
    ・Vue.jsの思想で、ビューとロジックがそれなりに分離できる
    ・スコープに閉じたCSS(Scoped CSS)で書ける
    

    View Slide

19. @adobe/xdpmを導入
    XDプラグインフォルダーにコピーする
    ウォッチしてコピーする
    XDプラグインとして正しい形式か検証
    パッケージファイル（xdx形式）に変換
    AdobeXD/xdpm
    https://github.com/AdobeXD/xdpm
    

    View Slide

20. @adobe/xdpmを導入
    コマンドを実行
    XDのプラグインフォルダーに自動配置
    

    View Slide

21. 環境構築の話はQiitaに書きました
    Adobe XDプラグインをVueとBabel/TypeScriptで開発する方法 ‑ Qiita
    https://qiita.com/clockmaker/items/ ded e a b f ae
    

    View Slide

22. 環境構築用のプラグインキットを公開中
    AdobeXD_Plugin_Kit
    https://github.com/ics‑creative/ _AdobeXD_Plugin_Kit
    Vue + Babel + xdpm
    Vue + TypeScript+ xdpm
    

    View Slide

23. プチアイデアのプラグイン集
    ・案件に必要なプラグインをその場の思いつきで作る
    ・用途は限定的
    　（利用者も限られる、フェールセーフもあまり考慮しない）
    

    View Slide

24. プチアイデアのプラグイン集
    

    View Slide

25. プチアイデアのプラグイン集
    https://github.com/ics‑creative/ _adobexd_ics_plugin_suite
    

    View Slide

26. Adobe XDの自動アニメーションの再現
    ・Adobe XDの自動アニメーションは便利
    ・ウェブで自動アニメーションを再現可能
    ・座標情報を取り出しゴリゴリCSSを書く
    

    View Slide

27. Adobe XDの自動アニメーションの再現
    

    View Slide

28. ご清聴ありがとうございました
    ご質問等はTwitterまでお気軽に連絡ください
    Copyright ICS INC. All rights reserved.
    池田 泰延
    @clockmaker
    

    View Slide