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

4b7124f2f5989173c8ce3b0934817a32?s=47 Yasunobu Ikeda
October 06, 2019

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

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

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

を解説しています。

4b7124f2f5989173c8ce3b0934817a32?s=128

Yasunobu Ikeda

October 06, 2019
Tweet

Transcript

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

  2. 自己紹介 池田 泰延 株式会社 ICS 代表 / ics.media編集長 / 筑波大学

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

  4. テキスト校正くん

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

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

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

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

  9. テキスト校正くん辞書はオープンソース 校正辞書の例 ・Adobe Xd   → Adobe XD ・After Effect

    → After Effects ・DreamWeaver → Dreamweaver ・Github      → GitHub ・キャノン → キヤノン
  10. テキスト校正くん ‑ VS Code拡張機能 文章作成・メール作成に役立つ! VS Codeの拡張機能「テキスト校正くん」 https://ics.media/entry/ VS Codeの拡張機能として

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @clockmaker