Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yasunobu Ikeda
October 06, 2019

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

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

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

を解説しています。

Yasunobu Ikeda

October 06, 2019
Tweet

More Decks by Yasunobu Ikeda

Other Decks in Design

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