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

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

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

を解説しています。

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