Help us understand the problem. What is going on with this article?

AdobeXDで要素のカラーコードを取得するプラグインを作ったときの備忘録

More than 1 year has passed since last update.

はじめに

AdobeXDでプラグインを作成した際の手順を備忘録として残します。

仕様

以下仕様を満たすものを作成しました。

  • 選択中の要素の塗りまたは境界線の色情報を取得し、クリップボードにコピーする
  • 要素が選択されていない場合はアラートを表示し、以降の処理を停止する
  • 複数の要素が選択されていた場合はアラートを表示し、以降の処理を停止する

成果物

ソースとプラグインはGithubで公開しているので、ご自由に参考にしてください。

手順

開発準備

  1. こちらの記事の「3. 開発に必要なファイルを作成する」まで手順を実施し、プラグインを開発するための準備を整えます。

  2. アラートを表示させるためのライブラリをこちらからダウンロードします。
    手順1で作成したフォルダ内に「lib」フォルダを保存してください。

  3. プラグインにアイコンを設定したい場合は、手順1で作成したフォルダ内に「images」フォルダを作成し、その中にアイコン画像を作成してください。

ここまでで、以下のようなディレクトリ構成になっていると思います。

[手順1で作成したフォルダ]
  ∟[images]
  ∟[lib]
  ∟main.js
  ∟manifest.json

開発

  1. manifest.jsonを以下のように記述します。
manifest.json
{
  "name": "xdGetElementColor",
  "id": "XD_GET_ELEMENT_COLOR",
  "version":"1.0.0",
  "description":"選択中の要素のカラーコードを取得するプラグインです。",
  "icons":[
    {
      "width": 96,
      "height": 96,
      "path":"images/icon.png"
    }
  ],
  "host":{
    "app": "XD",
    "minVersion":"13.0.0"
  },
  "uiEntryPoints":[
    {
      "type":"menu",
      "label":"getElementColor",
      "commandId":"getElementColor",
      "shortcut": {
        "mac": "Cmd+Shift+O",
        "win": "Ctrl+Shift+O"
      }
    }
  ]
}
  1. main.jsを以下のように記述します。
main.js
/*
 * API・ライブラリ読み込み
 ****************************************/
// クリップボード
let clipboard = require('clipboard');
// dialogs.js
const { alert, error } = require('./lib/dialogs.js');

/*
 * 各処理
 ****************************************/
// 選択中の要素のカラーコードをコピーする処理
function getElementColor(selection) {

  // 選択中の要素
  const items = selection.items;

  // エラー時に表示されるダイアログのタイトル
  const errorAlertTitle = '処理に失敗しました';

  // 要素を1つだけ選択していた場合
  if(items.length === 1) {
    items.forEach(item => {
      let colorInfo;
      // 塗りの情報が取得できる場合
      if(item.fill !== null) {
        // カラーコードを16進数で取得
        colorInfo = item.fill.value.toString(16);
      } else if(item.stroke !== null) {
        // 境界線の情報が取得できる場合
        // カラーコードを16進数で取得
        colorInfo = item.fill.stroke.toString(16);
      } else {
        // 色の情報が取得できなかった場合
        showError(errorAlertTitle, '色情報の取得が取得できませんでした。')
        return false;
      }
      const colorCode = '#' + colorInfo.slice(2);
      // クリップボードにコピーする
      clipboard.copyText(colorCode);
    });
  } else if(items.length < 1) {
    // 要素を選択していなかった場合
    showError(errorAlertTitle, '要素が選択されていません。');
  } else if(items.length > 1) {
    // 複数の要素が選択されていた場合
    showError(errorAlertTitle, '複数の要素が選択されています。');
  }

}

// エラー用のダイアログを表示する処理
async function showError(title, text) {
  // ダイアログを表示する
  await error(title, text);
}

// manifest.jsonで定義したcommandIdとfunctionの紐付けを行なう
module.exports = {
    commands: {
        getElementColor: getElementColor
    }
};

以下、各処理の説明

まず初めに処理に必要なAPIやライブラリを読み込みます。

main.js
/*
 * API・ライブラリ読み込み
 ****************************************/
// クリップボード
let clipboard = require('clipboard');
// dialogs.js
const { alert, error } = require('./lib/dialogs.js');

XDではプラグインを実行するときにselectionという変数が渡されます。
selection.itemの中に選択中の要素が配列で格納されているので、こちらを使用していきます。

main.js
/*
 * 各処理
 ****************************************/
// 選択中の要素のカラーコードをコピーする処理
function getElementColor(selection) {

  // 選択中の要素
  const items = selection.items;

  // エラー時に表示されるダイアログのタイトル
  const errorAlertTitle = '処理に失敗しました';

  // 要素を1つだけ選択していた場合
  if(items.length === 1) {
    items.forEach(item => {
      let colorInfo;
      // 塗りの情報が取得できる場合
      if(item.fill !== null) {
        // カラーコードを16進数で取得
        colorInfo = item.fill.value.toString(16);
      } else if(item.stroke !== null) {
        // 境界線の情報が取得できる場合
        // カラーコードを16進数で取得
        colorInfo = item.fill.stroke.toString(16);
      } else {
        // 色の情報が取得できなかった場合
        showError(errorAlertTitle, '色情報の取得が取得できませんでした。')
        return false;
      }
      const colorCode = '#' + colorInfo.slice(2);
      // クリップボードにコピーする
      clipboard.copyText(colorCode);
    });
  } else if(items.length < 1) {
    // 要素を選択していなかった場合
    showError(errorAlertTitle, '要素が選択されていません。');
  } else if(items.length > 1) {
    // 複数の要素が選択されていた場合
    showError(errorAlertTitle, '複数の要素が選択されています。');
  }

}

アラート表示用のメソッドです。
第1引数がアラートの見出し、第2引数がアラートの本文になります。

main.js
// エラー用のダイアログを表示する処理
async function showError(title, text) {
  // ダイアログを表示する
  await error(title, text);
}

このようなデザインで表示されました。

xd_001.jpg

manifest.jsonで定義した「commandId」で実行したいメソッドを紐付けます。

main.js
// manifest.jsonで定義したcommandIdとfunctionの紐付けを行なう
module.exports = {
    commands: {
        getElementColor: getElementColor
    }
};

実行

  1. こちらの記事の「4. XDのプラグインメニューから実行する」から手順を実施することで、プラグインを実行できるようになるかと思います。

関連リンク

作成にあたり、以下サイトを参考にさせていただきました。
- AdobeXDでCSSグラデーションを書き出すプラグインを作ってみた
- Adobe MAX 2018 XD Plugin API Labsでプラグインを作ってきた!
- はじめてのAdobe XDプラグイン開発!定番のHello Worldを表示させてみよう
- Adobe XD Platform

inumberx
Webデザイナー・フロントエンドエンジニアとして働いています。
https://afterworks.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away