Adobe XDプラグインをVueとBabel/TypeScriptで開発する方法 #TypeScript

Adobe XDプラグインの開発で、ユーザーインターフェース(UI)は人気のライブラリVue.jsを使いたいというニーズに応えるための記事。

こんな感じのXDプラグインを作れるサンプルを用意した。

リポジトリはこちら。

Vue.jsを使う利点

JavaScript/HTML/CSSを使ってAdobe XDプラグインを開発できる。createElement()メソッドなどJavaScriptを使ってHTMLのDOMを構築する必要があるため、DOMを書くのが大変。
シンプルなDOM構造であればいいが、複雑なUIを開発しようとすると、ライブラリの手を借りずに作るのはしんどい。

Vueの単一ファイルコンポーネント（Single File Component = 略してSFC）を使って開発すると以下のメリットを享受できる。

HTML構文でHTMLが書ける
- JavaScriptでcreateElement()メソッドを使わずに作れる
Vue.jsの思想にしたがって、ビューとロジックがそれなりに分離できる
スコープに閉じたCSS(Scoped CSS)で書ける

こんな感じにHTMLタグを使って、ダイアログが書ける。

BabelやTypeScriptを使う理由

Babelの場合

少しでも安心してECMAScriptの最新版を使える
- とはいえ、XDプラグインの世界ではES2018は動く
ES Modulesのimport文を、CommonJSのrequire形式に変換してくれる

TypeScriptの場合

型指定が使える。コンパイル時にエラーを検出できる。コード補完が効く
ES Modulesのimport文を、CommonJSのrequire形式に変換してくれる

webpackは必須

Adobe XDプラグインは、CommonJSスタイルのJavaScriptが動作する。しかし、Node.jsがそのまま動くわけではないので、node_modulesがそのまま使えるわけではなさそう。

単独のJavaScriptとして動かせるように、webpackで結合するのが良い。webpackに関する情報は記事「最新版で学ぶwebpack 4入門」を参考にして欲しい。

とくにVue.jsの単一ファイルコンポーネントを使うためにはwebpackは必須である。他のツールでもなんとかできるかもだが、やり方は知らないので他の記事にまかせる。

サンプルの解説

Adobe XDの公式にもサンプルがある。

しかし、webpackのみのシンプル構成なので、もう少しモダンな開発環境が欲しいところ。そこでBabelとTypeScriptを組み合わせてみた。

Babelの場合

環境構築は次のリポジトリを参照ください。

注意点

Babel側
- とにかくモジュールはcommonjsを使うように指定するのがポイント
- ES ModulesはBabelでcommonjsに変換してください
webpack側
- scenegraphなどは外部モジュールとして登録する
- VueLoaderPluginをプラグインとして設定する
- 出力ファイルの形式libraryTargetはcommonjs2とする

TypeScriptの場合

環境構築は次のリポジトリを参照ください。

注意点

TypeScript側
- とにかくモジュールはcommonjsを使うように指定するのがポイント
- ES Modulesはtsconfig.jsonでcommonjsに変換してください
- 型定義ファイルを npm i https://github.com/AdobeXD/typings でインストールする
- global参照などはindex.d.tsなど適当なファイルを作ってdeclare var global;とダミー宣言する
webpack側
- scenegraphなどは外部モジュールとして登録する
- VueLoaderPluginをプラグインとして設定する
- 出力ファイルの形式libraryTargetはcommonjs2とする
- ts-loaderにはappendTsSuffixToオプションでvue拡張子を登録する
- resolve/extensionsにtsやjs、json拡張子も追加する

開発補助ツールとしてxdpmが便利

「AdobeXD/xdpm」はアドビが作っている、XDプラグインのためのツールモジュール。主に次のようなことができる。これを使わずにXDプラグインを作るなんて考えられないぐらい便利。

XDプラグインフォルダーにコピーする
ウォッチしてコピーする
XDプラグインとして正しい形式になっているか検証する
パッケージファイル（xdx形式）に変換する

こんな感じにnpm scriptsが用意されている。WebStormだとコマンドラインを使わず、ポチポチクリックするだけでビルド＆展開ができる。

deployコマンドをクリックすると、自動的にXD開発フォルダーに配置してくれる。便利。

まとめ

環境構築できてしまえば、その後の開発がとても快適になる。
XDのAPIを調べるのにTypeScriptのコード補完が便利。

こうやって、「誤字検知に役立つ！ Adobe XDのプラグイン「テキスト校正くん」をリリース」を開発した。