ビジネスとIT活用に役立つブログBlog


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コマンドを実行します。

これでxdpmがインストールされました。-vオプションを指定し実際にコマンドを実行して正常にインストールされたか確認します。

バージョン情報が表示されればインストールの完了です。

xdpmの使い方

GitHubのREADMEページを確認すると

  • bootstrap
  • install
  • watch
  • validate
  • package
  • ls

xdpmでは6種類のサブコマンドが用意されていますが、今回はbootstrap、install、watchの3つを利用してみます。

プラグインの雛形を作成

プラグインの雛形を作成するにはbootstrapサブコマンドを利用します。これによりAdobeが提供しているstarter projectと同じものをコマンドラインから取得することができます

※ネットワーク環境によっては雛形の生成に時間がかかる場合があります。

これでxdpm-blog-sampleフォルダにプラグインの雛形が作られます。雛形は4種類用意されており、デフォルトの雛形(starter projectと同じもの)以外にも

  • パネル機能を利用するもの
  • モーダルUIを利用するもの
  • JavaScriptフレームワークのReactを利用するもの

をオプション指定して生成することも可能です。詳細はREADMEをご確認ください。

プラグインのインストール

雛形が生成されたらXDから利用できるようにインストールを行います。インストールはinstallサブコマンドから実行します。

これでプラグインがインストールされます。実際にXDのプラグインパネルを確認してみると、

このようにインストールされているのがわかります。

サブコマンドの第一引数にプラグインフォルダへのパスを指定していますが、プラグインフォルダ内(manifest.jsonファイルがあるフォルダ)から実行する際にはパスは省略可能です。

こちらもREADMEにオプションの説明がありますが、

  • oオプションでインストールの上書き
  • cオプションでインストール前に存在しているファイルの削除

この2つは覚えておくと開発が捗ると思います。

変更の自動検知

プラグインのインストール完了後、ソースコードやサムネイル画像等を修正した場合は再インストールが必要になりますが、都度installサブコマンドを利用するのは手間がかかりますので、開発中はwatchサブコマンドを利用して解決します。

これでプラグインへの変更を検知し、修正があれば自動でインストールを行ってくれます。第一引数のパスはinstallコマンドと同様にプラグインフォルダ内から実行する際は省略可能です。

※watchを終了する場合は「Ctrl+C」を実行します。

さいごに

いかがでしたでしょうか。XDのプラグインの雛形をコマンドラインから管理するツール、xdpmの導入と使い方をご紹介しました。

本記事執筆にあたって筆者も一通りコマンドを触ってみましたが、やはりwatchサブコマンドが非常に便利で、今後XDのプラグインを開発する際には必須なツールだと感じました。

今後も便利なツール、プラグインを見つけてより快適なXDライフを送りたいと思います。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!