Adobe XDのプラグイン開発を簡単に始めるツール「xdpm」試してみた
弊社ではデザイン・コーディングを行う際にAdobe XD（以下XD）を利用しています。
以前、XDのプラグインを自作する方法を紹介しましたが、今回はコマンドラインから簡単にプラグインの雛形を生成できるツール、「xdpm」をご紹介したいと思います。
AdobeXD/xdpm: A helper CLI for XD plugin development ※xdpmを利用するにはnode.jsが必須になりますが、本記事ではインストール手順について割愛させていただきます。
- Windows10: Pro
- XD: v36.1.32.5
- node.js: v14.4.0
- npm: v6.14.6
- xdpm: v4.1.1
xdpmのインストール
xdpmのインストールは通常のパッケージと同様にnpmコマンドから行います。任意のフォルダにpackage.jsonファイルを作成し、npmコマンドを実行します。
|
1 2 |
> npm init -y > npm install --save-dev @adobe/xdpm |
これでxdpmがインストールされました。-vオプションを指定し実際にコマンドを実行して正常にインストールされたか確認します。
|
1 2 |
> npx xdpm -v @adobe/xdpm v4.1.1 |
バージョン情報が表示されればインストールの完了です。
xdpmの使い方
GitHubのREADMEページを確認すると
- bootstrap
- install
- watch
- validate
- package
- ls
xdpmでは6種類のサブコマンドが用意されていますが、今回はbootstrap、install、watchの3つを利用してみます。
プラグインの雛形を作成
プラグインの雛形を作成するにはbootstrapサブコマンドを利用します。これによりAdobeが提供しているstarter projectと同じものをコマンドラインから取得することができます
|
1 2 3 4 5 6 7 8 9 |
> npx xdpm bootstrap xdpm-blog-sample INFO: xdpm 4.1.1 - XD Plugin Manager CLI INFO: Use of this tool means you agree to: - the Adobe Terms of Use at https://www.adobe.com/legal/terms.html - the Developer Additional Terms at http://www.adobe.com/go/developer-terms Bootstrapping plugin: Cloning into 'xdpm-blog-sample'... Plugin was sucessfully bootstrapped in xdpm-blog-sample Be sure to get your unique plugin ID at https://console.adobe.io/plugins and include it in manifest.jsone |
※ネットワーク環境によっては雛形の生成に時間がかかる場合があります。
これでxdpm-blog-sampleフォルダにプラグインの雛形が作られます。雛形は4種類用意されており、デフォルトの雛形（starter projectと同じもの）以外にも
- パネル機能を利用するもの
- モーダルUIを利用するもの
- JavaScriptフレームワークのReactを利用するもの
をオプション指定して生成することも可能です。詳細はREADMEをご確認ください。
プラグインのインストール
雛形が生成されたらXDから利用できるようにインストールを行います。インストールはinstallサブコマンドから実行します。
|
1 2 3 4 5 6 |
> npx xdpm install xdpm-blog-sample INFO: xdpm 4.1.1 - XD Plugin Manager CLI INFO: Use of this tool means you agree to: - the Adobe Terms of Use at https://www.adobe.com/legal/terms.html - the Developer Additional Terms at http://www.adobe.com/go/developer-terms OK: "Hello World sample plugin"@1.0.0 [QUICK_START] installed successfully.e |
これでプラグインがインストールされます。実際にXDのプラグインパネルを確認してみると、
このようにインストールされているのがわかります。
サブコマンドの第一引数にプラグインフォルダへのパスを指定していますが、プラグインフォルダ内（manifest.jsonファイルがあるフォルダ）から実行する際にはパスは省略可能です。
こちらもREADMEにオプションの説明がありますが、
- oオプションでインストールの上書き
- cオプションでインストール前に存在しているファイルの削除
この2つは覚えておくと開発が捗ると思います。
変更の自動検知
プラグインのインストール完了後、ソースコードやサムネイル画像等を修正した場合は再インストールが必要になりますが、都度installサブコマンドを利用するのは手間がかかりますので、開発中はwatchサブコマンドを利用して解決します。
|
1 2 3 4 5 6 7 8 9 |
> npx xdpm watch xdpm-blog-sample INFO: xdpm 4.1.1 - XD Plugin Manager CLI INFO: Use of this tool means you agree to: - the Adobe Terms of Use at https://www.adobe.com/legal/terms.html - the Developer Additional Terms at http://www.adobe.com/go/developer-terms INFO: Watching Hello World sample plugin... INFO: Watching... press BREAK (CTRL+C) to exit. INFO: Hello World sample plugin changed; reinstalling... OK: "Hello World sample plugin"@1.0.0 [QUICK_START] installed successfully. |
これでプラグインへの変更を検知し、修正があれば自動でインストールを行ってくれます。第一引数のパスはinstallコマンドと同様にプラグインフォルダ内から実行する際は省略可能です。
※watchを終了する場合は「Ctrl+C」を実行します。
さいごに
いかがでしたでしょうか。XDのプラグインの雛形をコマンドラインから管理するツール、xdpmの導入と使い方をご紹介しました。
本記事執筆にあたって筆者も一通りコマンドを触ってみましたが、やはりwatchサブコマンドが非常に便利で、今後XDのプラグインを開発する際には必須なツールだと感じました。
今後も便利なツール、プラグインを見つけてより快適なXDライフを送りたいと思います。
なかもと
最新記事 by なかもと (全て見る)
- CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう - 2021年10月8日
- CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう - 2021年9月22日
- CSS Grid Layoutを利用して2次元レイアウトを自由自在に操作する - 2021年7月19日
- CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編） - 2021年5月24日
- Adobe XDのプラグイン開発を簡単に始めるツール「xdpm」試してみた - 2021年2月2日
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー