Adobe XDのプラグイン「MATSURI」を作ってみた

全国の祭好きでAdobe XDを使っているみなさん、お待たせしました辻元気です。
いよいよ兼ねてから構想していたAdobe XDの新しいプラグインである「MATSURI」完成しました。
今日はこの「MATSURI」の全容を明かしたいと思います。

Adobe XD使いである前に、祭好きである

祭りだワッショイ！
ご存知、祭好きの私。
そして、Adobe XDも使っている。
まずはAdobe XDの勢いを見ていきましょう。
全くもって意味のないグラフ（根拠なんてないし、意味がない、ゴミ）
ご覧の通り、Adobe XDは登場から今に至るまで勢力が倍々で増しています。
一方の祭は、昔から変わらずとぅーーーーーって感じで安定しています。
つまり、Adobe XDが祭のステージに近づいてきているという証なのです。

Adobe XDのプラグインを作る意味

イデ・スクッエ・ビドア（1788-1843） ide skee vida

かの有名な哲学者「イデ・スクッエ・ビドア（1788-1843）」がこう言いました。
「Adobe XDと祭は切っても切り離せない関係になるだろう。そう、それはもうプラグイン化するしかないんだ。」と。
私の耳から離れないこのフレーズ。

つまり、作る意味を考えるべきではない。
選択筋は作るしかないという事である。

Adobe XDプラグイン「MATSURI」の作り方

材料

参考サイト
テキストエディタ
熱き魂

手順

まず、祭に最適なフォントを選定します。

シルバードラゴン
今回は鹿児島県にある株式会社昭和書体さんの「（ぎんりゅう）」を使用します。
銀龍の如く、祭の躍動感を伝えるのに最適だと考えました。

次にいよいよプラグイン開発をしていきます。

wasshoiフォルダ
Adobe XDを開いてメニューの「プラグイン　＞　開発版　＞　開発フォルダーを表示」を開くか、
「/Users/ここはユーザー名/Library/Application Support/Adobe/Adobe XD/develop/」
を開く。

この中が自作プラグインが動作するエリアです。
適当なフォルダを作ります。
「wasshoi」というフォルダを作りました。

その「wasshoi」フォルダの中は下記の構成になっています。

images/icon.png //Adobe XD上に表示されるアイコンです
manifest.json //Adobe XD上に表示するための設定ファイルです
main.js //プログラム本体です

それぞれ詳しくみていきましょう…

詳細

images/icon.png

まずはアイコンです。
とりあえず、大きめなサイズの96 x 96pxのアイコン一つを作っておきます。
各サイズも作れますが、とりあえずこれ作ればとりあえずOKです。

manifest.json
設定ファイルです。
中は普通のjsonファイルで、XD上で表示するための各設定を記載しています。

{
  "id": "WASSHOI",
  "name": "MATSURI", //実際にXD上で表示されるアプリ名です
  "description": "祭りだワッショイプラグイン",
  "version": "1.0.0",
  "host": {
    "app": "XD",
    "minVersion": "13.0.0"
  },
  "uiEntryPoints": [ //アプリ側から操作するときの名前です
      {
        "type": "menu",
        "label": "WASSHOI",
        "commandId": "wasshoiCommand"
      }
   ],
    "icons": [{ //ここでアイコンを定義します、画像の名前はなんでも良いです
        "path": "images/icon.png",
        "width": 96,
        "height": 96
    }]
}

main.js
MATSURIプラグインのプログラム本体です。

const {Text, Color} = require("scenegraph"); //APIのクラスを読み込みます

function MW(selection) { //これがメインのファンクションです。MW = Matsuri Wasshoiって名前にしました
  console.log("wasshoi!"); //Developer Consoleにwasshoi!って出力するテスト文章です
  const el = new Text();
  el.text = "祭"; //実際に表示されるテキストです「祭」一文字が表示されます
  el.styleRanges = [
    {
      length: el.text.length,
      fill: new Color("#FF0000"), //この16進数で色を決めています、真っ赤です
      fontSize: 500, //フォントサイズをここで決めます、500ptです
      fontFamily: "A_KSO 銀龍", //ここでフォントを決めています
    }
  ];
  selection.insertionParent.addChild(el);
  el.moveInParentCoordinates(500, 800); //ここで表示する位置を決めています（px）
}

module.exports = { //ここでmanifest.jsonで決定したコマンドIDと上で書いたファンクションを結びつけて合体させます
  commands: {
    wasshoiCommand: MW
  }
};