Adobe XD Plugin 開発入門

こちらの記事はAdobe XD advent Calendar 2019年12月22日の記事です。
AdobeXDプラグイン開発の手順書のようなものを書いてみました。
プラグイン作ってみたい方の手助けになれば幸いです。

## 環境
- Mac OS 10.15.1
- Adobe XD バージョン25.1.12.7
- VSCode バージョン1.40.2

## 参考
公式のドキュメント
https://adobexdplatform.com/plugin-docs/

## 準備
Adobe XD を起動
メニューバーから`プラグイン` > `開発版` > `開発フォルダーを表示`
![スクリーンショット-2019-12-19-21.54.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/c1028fea-086c-bbeb-6c0f-c31e6b9a8b3f.jpeg)
表示された`develop`フォルダで開発するので、この場所を…
![開発ディレクトリ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/fae437e8-2216-119f-68fd-236afb546a92.jpeg)
VSCodeで開く
![スクリーンショット 2019-12-19 20.26.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/9a5e34bc-2321-b7b2-89cf-b2c78ee406ed.jpeg)
まだ何もない

フォルダのアイコンをクリックしてディレクトリを作成、適当に名前をつける
![フォルダ2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/6ddfda79-b336-540f-ea95-8c1410c4ef08.jpeg)
今作ったディレクトリにファイルを2枚追加 これは名前が決まっているので
片方に`manifest.json`もう片方に`main.js`と名前をつける
<img width="1019" alt="スクリーンショット 2019-12-19 20.59.25.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/8cabaf0e-37c6-bf7a-d77a-41e641f40aa7.jpeg">
まだ中身は真っ白
これで準備は終わり

## manifest.json を書く

ここにサンプルがあるので、コピペする
https://adobexdplatform.com/plugin-docs/reference/structure/manifest.html

```manifest.json
{
  "id": "YOUR_ID_HERE",
  "name": "Name of Your Plugin",
  "version": "0.0.1",
  "icons": [
      { "width": 24, "height": 24, "path": "images/icon@1x.png" },
      { "width": 48, "height": 48, "path": "images/icon@2x.png" }
  ],
  "host": {
      "app": "XD",
      "minVersion": "21.0"
  },

  "uiEntryPoints": [
      {
          "type": "menu",
          "label": "Hello World Command",
          "commandId": "helloCommand"
      },
      {
          "type": "panel",
          "label": "Hello World Panel",
          "panelId": "helloPanel"
      }
  ]
}
```

## アイコン画像を用意する
`images`ディレクトリを作る
仮の画像を突っ込んでおく（↓ご自由にどうぞ）
`images/icon@1x.png`　![icon@1x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/be759c7c-982b-e6eb-f18f-ee9d32d180e7.png)
`images/icon@2x.png`　![icon@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/a18cda01-c438-aabf-628f-966ea6b366a8.png)
今こんな感じ
![スクリーンショット 2019-12-19 21.37.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/7a204cdb-0f63-3976-34ba-831700a8d391.jpeg)

## main.js を書く
ここに書いている
https://adobexdplatform.com/plugin-docs/reference/structure/handlers.html

これをコピペする

```main.js
pconst commands = require("commands");

function sayHello(selection, documentRoot) {
  console.log("Hello, world!");
}
function show(event) {
  let dom = document.createElement("panel");
  dom.innerHTML = `
      <form method="dialog" id="main">
      </form>
  `;
  event.node.appendChild(dom);
}
function hide(event) {
  event.node.firstChild.remove();
}

module.exports = {
  commands: {
      helloCommand: sayHello
  },
  panels: {
    helloPanel: {
        show,
        hide
    }
  },
};
```

## プラグインを再読み込み
AdobeXDを起動して
メニューバーから`プラグイン` > `開発版` > `プラグインを再読み込み`
<img width="725" alt="スクリーンショット 2019-12-19 21.54.31.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/8a70f991-db50-e614-96db-7ab0af02f562.jpeg">
自作のプラグインが読み込まれてプラグインメニューに追加されました！
<img width="697" alt="スクリーンショット 2019-12-19 21.54.54.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/32031de4-207c-6577-85ba-d6378730462f.jpeg">

## プラグインを実行してみる
プラグインのメニューをアクティブにするため
適当に**XDファイルの新規作成** をする

コピペで作成したプラグインは`console.log("Hello, world!");`という内容だったので、実行結果をみるためにコンソールを表示させる
メニューバーから`プラグイン` > `開発版` > `Developer Console`
<img width="747" alt="スクリーンショット 2019-12-19 22.38.55.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/15d0ed58-04f8-be24-c4b7-b0f873d17c09.jpeg">
こういうウインドウが表示される
![コンソール.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/8c77d459-0173-a44e-bdfc-ddb8751399d4.jpeg)
早速 Hello World Command を実行！
<img width="726" alt="スクリーンショット 2019-12-20 15.23.41.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/4f6f77b6-00c2-650e-678e-f114bd8a9aaa.jpeg">
出た！
<img width="334" alt="スクリーンショット 2019-12-20 15.24.52.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/fbac0ea0-9d3b-e64b-4d77-c1d950f5d8f4.jpeg">
ちなみに　Hello World Panel はサイドパネルが表示されるだけ。何も書いてないから。

## プラグインの動作を変更する　：　線を描く
Hello, world!した後に線を描くコードを追加してみる
線の描画について詳しくはこちら
https://adobexdplatform.com/plugin-docs/tutorials/how-to-draw-lines/

変更するのは`main.js`

追加するのは２つ
(1) 線を描画するためのモジュールの準備
`const { Line, Color } = require("scenegraph");`
(2) 線の描画
`Lineインスタンス`を作って選択中のアートボードに追加する

```変更後のmain.js
const { Line, Color } = require("scenegraph");　// 線を描画するためのモジュール 追加
const commands = require("commands");

function sayHello(selection, documentRoot) {
  console.log("Hello, world!");

  //以下 線を描画
  const mycolor = "#000000"; //色
  const data = { startX: 100, startY: 110, endX: 210, endY: 233 }; //位置等
  const line = new Line();             //Lineクラスのインスタンスを作る
  line.setStartEnd(                    //設定
      data.startX,
      data.startY,
      data.endX,
      data.endY
  );
  line.strokeEnabled = true;            //ストロークを描画すっぞ！
  line.stroke = new Color(mycolor);     //色を指定
  line.strokeWidth = 3;                 //線幅
  selection.editContext.addChild(line); //選択中のアートボードに追加
}
function show(event) {
  let dom = document.createElement("panel");
  dom.innerHTML = `
      <form method="dialog" id="main">
      </form>
  `;
  event.node.appendChild(dom);
}
function hide(event) {
  event.node.firstChild.remove();
}

module.exports = {
  commands: {
      helloCommand: sayHello
  },
  panels: {
    helloPanel: {
        show,
        hide
    }
  },
};
```

プラグインの**変更はプラグインを再読み込みしないと反映されない**ので
メニューバーから`プラグイン` > `開発版` > `プラグインを再読み込み`してから
<img width="742" alt="スクリーンショット 2019-12-22 0.56.15.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/d4ea3df9-f438-1658-b3e3-c7e98d32272d.jpeg">
Hello World Command を実行！
<img width="726" alt="スクリーンショット 2019-12-20 15.23.41.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/4f6f77b6-00c2-650e-678e-f114bd8a9aaa.jpeg">
出た！
<img width="247" alt="スクリーンショット 2019-12-22 0.41.50.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303816/636a1c3d-2e1a-a81e-b658-1aadc943610e.jpeg">


## 最後に
以下も書きたかったのですが間に合わなかったので、
別の機会に書けるといいなー！

- プラグインのメニューを増やす
- アートボードが選択されていなかったらアラート出す
- 選択されているオブジェクトにテキストがあるかどうかを確認する
- テキストのスタイルを変える

みなさま良いお年を！
2020年もよろしくお願いいたします。