#Adobe XD のパネルに対応したプラグインの開発

Adobe I/O Corporate Creative Cloud UI/UX & Web

昨年10月に公開されたAdobe XD プラグインですが、XDの機能追加とほぼ同時にAPIもアップデートを重ねています。
今回は2019年6月のアップデート(XD 21.0)で公開された、プラグインパネルのAPIについて、Githubで公開されているサンプルコードを見ながら解説します。

プラグインパネルとは?

これまでの「アセットパネル」「レイヤーパネル」に加えて、「プラグインパネル」が追加されました。プラグインパネルは、XDのプラグインの一覧やプラグインのインタフェースを表示するパネルです。プラグインボタンを押下するとXDの画面左側に表示されます。

Adobe XDのプラグインパネルの例(Icondrop):画面左側に表示されているパネルがプラグインパネル
Adobe XDのプラグインパネルの例(Icondrop):画面左側に表示されているパネルがプラグインパネル

プラグインパネルとダイアログとの違い

パネルは作業中も表示可能(モードレス)なので、選択中のオブジェクトに応じてパネルのUIを更新することができます。例えば、選択中のオブジェクトのサムネイル画像を更新したり、特定の種類のオブジェクト(矩形のみ)にだけ、インタラクションできるようなUIを作成できます。

プラグインパネルに必要なAPI

プラグインパネルを利用するためには、ソースコード内のmanifest.jsonmain.jsを次のように設定する必要があります。(プラグインのソースコードの解説は以前のブログ記事Adobe XDプラグインのソースコードの解説 #AdobeIO #XDPlugin #AdobeXDを参照してください。)

manifest.jsonの設定

manifest.jsonではUiEntryPointstypeプロパティにpanellabelpanelIdを設定します。

    "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.jsonpanelIdプロパティ(上記の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プラグインプロジェクトの作成
YeomanによるAdobe XDプラグインプロジェクトの作成

終わりに

XDのプラグインはjavascriptで開発できるので、WEBのフロントエンド開発環境があれば、簡単にトライできます!ぜひオリジナルのプラグインを開発して公開してください!

また、10/6に「Adobe XD ユーザーグループ仙台」と「仙台フロントエンドUG」と合同で、「実践!XDプラグイン開発」というイベントが開催されますので、是非ご参加ください!
申込は下記の connpass よりどうぞ!(各イベント20人ずつ、合計40名が参加できます。どちらのconnpassからも登録できます。)

POSTED ON 2019.09.25