FOX HOUND TECH

先日、10月15日にAdobe XD 13が正式にリリースされました。

今回のアップデートでは、自動アニメーション機能や音声コマンドでのプロトタイプ作成、他のAdobe製品との連携強化など様々な新機能が追加されました。

Adobe XDの新機能

その中でも個人的に嬉しいのがプラグイン機能です。

その名の通り各デベロッパーが提供するプラグインをインストールして使用することができるようになりました。

Googleスプレッドシートの内容をXDに読み込めるだけでなく、スプレッドシート本体に更新があるとXDの内容も更新させるプラグインなどXDの活用方法が広がりそうなプラグインがたくさんあり、しかも全て無料で使用することができます。

また、開発者向けの機能としてプラグインを自分で開発してインストールすることができます。

今回は簡単なプラグインを作成してみたいと思います。

なお、実際の手順としてはAdobeの公式ブログに詳しく書かれているので、今回はその内容に沿って作成していこうと思います。

作成する

1. 必要なフォルダを作成する

Adobe XDを開き以下のメニューを選択します。

「プラグイン」>「開発版」>「開発フォルダーを表示」

するとフォルダーが開かれると思います。

このフォルダーに実際に作成するプラグインファイルを格納することになります。

次にプラグインごとのフォルダーを作成します。

今回は、テキストファイルを読み込んでそこに記載されている文字列をXD上にテキストコンテンツとして配置するプラグインを作成しようと思います。

なので「InsertTextFromFile」と命名しました。

2. 必要なファイルを作成する

1で作成したフォルダーの中に必要なファイルを作成します。

XDのプラグインはjavascriptで記述されていますので、

「manifest.json」

「main.js」

を作成します。

3. manifest.jsonの作成

2で作成した「manifest.json」にはプラグインの基本的な情報を記述します。

今回は以下のように記述しました。

{
    "id": "ID_FROM_IO_CONSOLE",
    "name": "Insert Text from File",
    "host": {
        "app": "XD",
        "minVersion": "13.0.0"
    },
    "version": "1.0.0",
    "uiEntryPoints": [
        {
        "type": "menu",
        "label": "Insert Text From File",
        "commandId": "insertTextFromFileCommand"
        }
    ]
}

それぞれの項目をピンポイントで簡単に説明すると、

app -> minVersion　・・・プラグインを使用できる最低にXDバージョンを指定します。

version　・・・プラグインのバージョンを設定。

uiEntryPoints　・・・プラグインメニューのラベル名とコマンドIDを紐付け。

になります。

4. main.jsの作成

続いて実際に機能を実装していきます。

main.jsには以下のように記述します。

const { Text, Color } = require("scenegraph");
const fs = require("uxp").storage.localFileSystem;

async function insertTextFromFileHandler(selection) {
    const aFile = await fs.getFileForOpening({ types: ["txt"] });
    if (!aFile) return;

    const contents = await aFile.read();

    const text = new Text();
    text.text = contents;
    text.styleRanges = [{
        length   : contents.length,
        fill     : new Color("#2699FB"),
        fontSize : 12
    }];

    selection.insertionParent.addChild(text);
    text.moveInParentCoordinates(10, 30);
}

module.exports = {
    commands: {
        "insertTextFromFileCommand": insertTextFromFileHandler
    }
};

上記でも書いたように、今回はテキストファイルを読み込んでそこに記載されている文字列をXD上にテキストコンテンツとして配置するプラグインを作成します。
そのため、1行目でテキストボックスを扱うための「text」,textを装飾するための「color」というXDプラグインAPIのクラスをインポートします。

ファイルを読み込みのために非同期メソッド、insertTextFromFileHandlerを宣言します。
ファイル内のテキストを取得して、スタイルを設定、整形したテキストをXD上のオブジェクトとして追加、位置を調整します。

プラグインを読み込む

上記の2ファイルの作成でXDのプラグインを作成できてしまいました。
XDを開き、以下のメニューを選択します。

「プラグイン」>「開発版」>「プラグインを再読み込み」

するとプラグインメニューの中に先ほど作成した

「Insert Text From File」

が追加されました。

これでプラグインの作成と読み込みが完了しました。

プラグインを実行

先ほど作成・読み込みに成功したプラグインを実際に動かしてみます。
プラグインメニューからプラグインを選択すると・・・

このようにファイルの内のテキストがオブジェクトとして追加されました！！

XDXファイル形式に変換する

上記で作成したプラグインは自分の環境でしか使用することができません。
作成したファイルを配布し使ってもらうことももちろんできますがファイルの形式を変換することでインストール可能なファイルとして扱うことができるようになります。
手順はものすごく簡単で、

先ほど作成した2ファイルを選択し、zip形式で保存。
作成されたzipファイルの拡張子を「.xdx」に書き換えます。

これでインストール可能なプラグインの完成です。
実際に作成したファイルをダブルクリックで実行すると、以下のようなダイアログが表示されインストールすることができます。

これで誰かに共有・使ってもらうことがより簡単に行えます。

プラグインリストに自作したプラグインを登録するにはAdobeの審査を通過しないといけないということで、少しハードルが上がりますが実際に登録ができればかなり多くの人に使用してもらえるようになる筈なので目指してみるのも面白いかもしれません。

まとめ

今回は新しくなったXDのプラグイン自作機能について簡単に追ってみました。
プラグイン機能によって痒い所に手が届き、XDの使い勝手はさらに向上していると感じました。
今後、様々なAPIにアクセスできるようになるというアナウンスもあるので注目していきたいと思います。

また、XDはこれ以外にも様々な新機能や改善が行われているので興味のある方は是非アップデートして使用してみてください。

参考

はじめてのAdobe XDプラグイン開発！定番のHello Worldを表示させてみよう #AdobeXD #AdobeMAX

XD新機能！独自プラグインを作成して作業効率化