#Adobe XD のパネルに対応したプラグインの開発
昨年10月に公開されたAdobe XD プラグインですが、XDの機能追加とほぼ同時にAPIもアップデートを重ねています。
今回は2019年6月のアップデート(XD 21.0)で公開された、プラグインパネルのAPIについて、Githubで公開されているサンプルコードを見ながら解説します。
プラグインパネルとは？
これまでの｢アセットパネル｣｢レイヤーパネル｣に加えて、｢プラグインパネル｣が追加されました。プラグインパネルは、XDのプラグインの一覧やプラグインのインタフェースを表示するパネルです。プラグインボタンを押下するとXDの画面左側に表示されます。
Adobe XDのプラグインパネルの例(Icondrop):画面左側に表示されているパネルがプラグインパネル
プラグインパネルとダイアログとの違い
パネルは作業中も表示可能（モードレス）なので、選択中のオブジェクトに応じてパネルのUIを更新することができます。例えば、選択中のオブジェクトのサムネイル画像を更新したり、特定の種類のオブジェクト（矩形のみ）にだけ、インタラクションできるようなUIを作成できます。
プラグインパネルに必要なAPI
プラグインパネルを利用するためには、ソースコード内のmanifest.jsonとmain.jsを次のように設定する必要があります。（プラグインのソースコードの解説は以前のブログ記事Adobe XDプラグインのソースコードの解説 #AdobeIO #XDPlugin #AdobeXDを参照してください。）
manifest.jsonの設定
manifest.jsonではUiEntryPointsでtypeプロパティにpanel、label、panelIdを設定します。
"uiEntryPoints": [
{
"type": "panel",
"label": "Enlarge a Rectangle",
"panelId": "enlargeRectangle"
}
]
GitHub AdobeXD/plugin-samples/quick-start-panel/manifest.json
type
プラグインを呼び出すメニューの種類です。 “menu” または “panel” が利用できます。
label
メニューに表示されるラベルです。uiEntryPointsの要素が複数あるときに表示されます。（uiEntryPointsの要素が1つしかない場合は表示されません。）
panelId
メニュー選択時（プラグイン実行時）に呼び出すmain.jsの関数を宣言します。
main.jsの設定
main.jsではmanifest.jsonのpanelIdプロパティ（上記のenlargeRectangle）で定義されたパネルについて、UIのライフサイクルを3つの関数（show, update, hide）で定義し、exportします。showは必須ですが、他の2つは任意です。
module.exports = {
panels: {
enlargeRectangle: {
show,
update
}
}
};
GitHub AdobeXD/plugin-samples/quick-start-panel/main.js
show (event)
UIのDOMを作成し、イベントハンドラを登録します。引数の event の node プロパティの子要素にパネルのUIのDOMを追加することで、showの完了後にUIが表示されます。
let panel;
function create() {
//...中略...
panel = document.createElement("div");
//...中略...
return panel;
}
function show(event) {
// event.node の子要素に パネルUI の要素を追加
if (!panel) event.node.appendChild(create());
}
GitHub AdobeXD/plugin-samples/quick-start-panel/main.js
update(selection, root)
selection（選択中のオブジェクト）が更新されたり、selecitonの中のオブジェクトが編集される度に呼び出されます。update関数の引数からパネルUIのDOMへのアクセスはできません。パネルUIのDOMにアクセスするためにはshowの引数event.nodeに代入したオブジェクトの参照を持っておきましょう。例えば、上記のコードの場合はpanel変数よりパネルUIのDOMを参照できます。
また、showメソッドが完了する前（DOMが登録される前）にupdateが呼び出されることもあります。showでDOMの初期化をした後、updateでパネルUIのDOMにアクセスする場合は注意が必要です。
hide (event)
パネルが閉じられた際に呼び出されます。（※XDのウィンドウが閉じられたときは呼び出されません）showと同様、event.nodeを参照することでパネルUIのDOMにアクセスできます。XDのプラグインはパネルUIのDOMを再利用することを推奨していますので、hideの実行時にパネルUIのDOMをデタッチする必要はありません。
アートボード・オブジェクト編集に関する注意
プラグインは、パネルのボタンなどのUIをクリックすることで、アートボードとオブジェクトの操作ができます。しかしそのためには、オブジェクトを操作する関数をapplication.editDocumentに引き渡す必要があります。editDocumentに関数を引き渡さずにscenegraphの編集を行うと、エラーが発生します。
editDocument の引数 option の editLabel プロパティ(“Increase rectangle size”)は取消（undo）のメニューに表示されます。
const { editDocument } = require("application");
editDocument({ editLabel: "Increase rectangle size" }, function(selection) {
const selectedRectangle = selection.items[0];
selectedRectangle.width += width;
selectedRectangle.height += height;
});
GitHub AdobeXD/plugin-samples/quick-start-panel/main.js
デバッグの方法
これまでのXDのプラグインと同様にDeveloper Consoleを使います。「プラグイン」>「開発版」>「Developer Console」を選択すると使用できます。
※Chrome Developer Tool の様なデバッガーはまだありません。
素早くパネル対応のプラグインを作るには？
XDプラグイン用のYeoman generatorを使うと、プラグインのプロジェクトを素早く作ることができます。
npm install -g yo generator-xd-plugin
上記のコマンドでインストール後、下記のコマンドを入力するだけでXDプラグインのプロジェクトを作成出来ます。
yo xd-plugin
YeomanによるAdobe XDプラグインプロジェクトの作成
終わりに
XDのプラグインはjavascriptで開発できるので、WEBのフロントエンド開発環境があれば、簡単にトライできます！ぜひオリジナルのプラグインを開発して公開してください！
また、10/6に「Adobe XD ユーザーグループ仙台」と「仙台フロントエンドUG」と合同で、「実践！XDプラグイン開発」というイベントが開催されますので、是非ご参加ください！
申込は下記の connpass よりどうぞ！（各イベント20人ずつ、合計40名が参加できます。どちらのconnpassからも登録できます。）