LoginSignup
11
7

More than 5 years have passed since last update.

Adobe XD PluginsAdvent Calendar 2018Day 19
@tomoka(tomoka takeuchi)

Adobe XD でとりあえず何か作りたくて学んだこと

Last updated at Posted at 2018-12-22

まえおき

この記事はAdobe XD Plugin Advent Calendar 19日目の記事です。

投稿が遅くなり申し訳ありません。
XDのプラグインを何か作りたいと思い もともと英語にとても長けているわけではない中でAdobe XD PlatformのQuick Startを見ながら、ノロノロペースでおぼろげながら進めていましたプラグイン開発。でも、はじめてのAdobe XDプラグイン開発 と 「Adobe XD meeting extra 2」 に参加できたお陰で開発環境の構築方法やmain.jsの書き方などなど、再確認してさらに深く知ることができました。

参考になるかどうか分かりませんが、開発環境やプラグインの作り方などなどで学んだことを書かせていただければと思っております。よろしくお願い致します！

開発環境で使っているもの

Mac
Adobe XD 14.0
Sublime Text3
Github
Adobe xdpm

環境の準備

そのまま開発をすると Adobe XD の開発用フォルダで開発することとなるので、Adobe xdpmを入れることをおすすめします。なお、npmのプラグインのためNode.jsのインストール環境が必要です。

自分のフォルダの設定

Adobe XD の開発フォルダで開発するのと同じように、自分の開発用フォルダに同じファイルを用意して開発できる準備をします。

インストール

開発フォルダは"XD"にしましたので、"XD"に移動してインストールします。
xdpmは以下よりインストールできます。
Adobe xdpm

npm install -g @adobe/xdpm

image.png

データの更新方法

自分の開発環境のmain.jsやmanifest.jsonのコードを更新したら、プラグインのコマンドでAdobe XD　の　Developer フォルダデータを更新します。

xdpm install                            # Install the current folder into Adobe XD
xdpm install path/to/plugin             # Install the specified folder into Adobe XD
xdpm install -w release                 # Install to Adobe XD CC Release (`r` is also valid; default)
xdpm install -w prerelease              # Install to Adobe XD CC Prerelease (`p` is also valid)
xdpm install -o                         # Overwrite plugin if it exists
xdpm install -c                         # Install cleanly (remove existing)

初回の更新は xdpm install で更新されますが、２回目以上更新する場合は引数 -o をつけないとエラーが出たりして、少し面倒なので更新を監視する watch でDeveloperフォルダを更新するのがおすすめです。

xdpm watch                            # Watch current folder and install changes into Adobe XD
xdpm watch path/to/plugin             # Watch the specified folder and install changes into Adobe XD
xdpm watch -w release                 # Install to Adobe XD CC Release (`r` is also valid; default)
xdpm watch -w prerelease              # Install to Adobe XD CC Prerelease (`p` is also valid)
xdpm watch -c                         # Perform clean installs when watching

xdpmで更新内容をdevelopフォルダに反映したら、再読み込みでプラグインをリロードすれば、更新内容を確認できます。
image.png

開発

準備とかいろいろ

開発をするのにあたり、XDのサンプルを公式からダウンロード。

サンプルに最低限の内容が入っているので、サンプルを元にすると作りやすいかと思います。
https://console.adobe.io/

開発データの中身

ダウンロードしたサンプルの中身は以下のようになっています。
image.png

それぞれのファイルは以下のような役割です。

manifest.json

アプリの定義を記述するファイルでプラグインの対応バージョンやプラグイン名前、ディスクリプション、アイコンなどの設定を記述するファイル。
なお、内容に関しては @aoisaさんの１０日目のアドベントカレンダー「manifest.json の書き方」がとても分かりやすく解説されてます。

images/

アイコンのイメージが入っています。

main.js

メインで動かすスクリプトを記述するファイル。メインループの導線を書き加えます。サンプルの中身は以下のようになっています。

/*
 * Sample plugin scaffolding for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */

var {Rectangle, Color} = require("scenegraph");

function myPluginCommand(selection) {
    // Go to Plugins > Development > Developer Console to see this log output
    console.log("Plugin command is running!");

    // Insert a red square at (0, 0) in the current artboard or group/container
    var shape = new Rectangle();
    shape.width = 100;
    shape.height = 100;
    shape.fill = new Color("#f00");
    selection.insertionParent.addChild(shape);
}

module.exports = {
    commands: {
        myPluginCommand: myPluginCommand
    }
};

ざっくり説明すると、一番下のmodule.exportsの箇所にmanifest.jsonで指定した、コマンドを紐付けます。module.exportsでcommandsに設定した名前がXDから選ぶメニュー名と同じにすると紐付け完了です。コマンドを増やす時は、manifest.jsonに記述を増やして、module.exportsの記述も同じように追記します。
APIでの操作などは @risayさんの5日目のアドベントカレンダー「Adobe XD APIで選択しているオブジェクトを操作する」がとても分かりやすく説明してくださってます。

ダイアログライブラリの追加

ダイアログを追加して、APIを動かした後の結果や操作を表示するオブジェクトはプラグインを追加することで使うことができます。
Adobe XD Plugin Helpers

インストール

npm install @adobe/xd-plugin-toolkit

main.jsへの読み込み

ツールキットをインストール後、main.jsの上部にrequest();の記述があります。その下あたりにプラグインの読み込みします。

require('./lib/[module].js')

[module]には利用するライブラリのファイル名を指定します。
image.png
ダイアログを使う時は dialogs.jsを指定します。

ダウンロードしたlib/はmain.jsと同じ階層に入れてあげるのが良いかなと。でもrequire（）でパスの設定ができるので、開発しやすいところに置くのが一番良いですね。
image.png

manifest.jsonの記述

manifest.jsonダイアログを使用するためのコマンドを追記します。

  "uiEntryPoints": [
      {
      "type": "menu",
      "label": "hello color",
      "commandId": "helloCommand"
    },
      {
      "type": "menu",
      "label": "show an alert",
      "commandId": "showAlert"
    },
    {
      "type": "menu",
      "label": "show an error",
      "commandId": "showError"
    }
  ]

"uiEntryPoints"にアラート、またはエラーのメニューを追記します。
image.png
manifest.jsonのラベルが表示される

main.jsの記述

module.exportsにダイアログのコマンドを追記。
XDのプラグインメニューから実行するための記述。

module.exports = { // コマンドIDとファンクションの紐付け
  commands: {
    helloCommand: helloHandlerFunction,
    showAlert: showAlertFunction,
    showError: showErrorFunction
  }
};

async function showAlertFunction() {
    /* we'll display a dialog here */
    console.log("アラート");
    await alert("Connect to the Internet", //[1]
    "In order to function correctly, this plugin requires access to the Internet. Please connect to a network that has Internet access."); //[2]
}

async function showErrorFunction() {
    /* we'll display a dialog here */
    console.log("エラー");
    await error("Synchronization Failed", //[1]
    "Failed to synchronize all your changes with our server. Some changes may have been lost.",
    "Steps you can take:",
    "* Save your document",
    "* Check your network connection",
    "* Try again in a few minutes"); //[2]

}

なお、ダイアログの中身はHTML+CSSで構築できます。
DOM操作にjQueryが使えるそうで、私はとても嬉しい。
また、@clockmakerさんの１１日目のアドベントカレンダーAdobe XDプラグインをVueとBabel/TypeScriptで開発する方法には、開発しやすいVueでのユーザーインターフェース(UI)について書かれています。Vueの方が開発しやすい事が分かりやすく説明されています。Vueで作ろうかな。

ダイアログの公式チュートリアル
https://adobexdplatform.com/plugin-docs/tutorials/how-to-show-an-alert/?h=dialog

Developer Console

プラグインメニューから開くことができるDeveloper Consoleスクリプトを動かして、数値がとれているかどうかは、ここで確認できます。
image.png

最後に学んだリンク集

基礎

応用

最後に

作りたいものが他に特に思いつかないので、すでにリリースされている色のコントラスト比を測るツールを作成中です。コントラスト比を出す方程式をJavaScriptに置き換えまでとりあえず進めたので、まずは、今の段階で結果を返すダイアログに結果を渡して表示できるようにこれから構築します。
完成は、来年になりそうかな。まだ先は長いです・・・・。

11
7
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
7