Adobe XD でとりあえず何か作りたくて学んだこと
まえおき
この記事は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
データの更新方法
自分の開発環境の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
で更新されますが、2回目以上更新する場合は引数 -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フォルダに反映したら、再読み込みでプラグインをリロードすれば、更新内容を確認できます。
開発
準備とかいろいろ
開発をするのにあたり、XDのサンプルを公式からダウンロード。
サンプルに最低限の内容が入っているので、サンプルを元にすると作りやすいかと思います。
https://console.adobe.io/
開発データの中身
それぞれのファイルは以下のような役割です。
manifest.json
アプリの定義を記述するファイルでプラグインの対応バージョンやプラグイン名前、ディスクリプション、アイコンなどの設定を記述するファイル。
なお、内容に関しては @aoisaさんの10日目のアドベントカレンダー「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]には利用するライブラリのファイル名を指定します。
ダイアログを使う時は dialogs.jsを指定します。
ダウンロードしたlib/はmain.jsと同じ階層に入れてあげるのが良いかなと。でもrequire()でパスの設定ができるので、開発しやすいところに置くのが一番良いですね。
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"にアラート、またはエラーのメニューを追記します。
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さんの11日目のアドベントカレンダー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スクリプトを動かして、数値がとれているかどうかは、ここで確認できます。
最後に学んだリンク集
基礎
- Adobe XD Platform
- Adobe XD Plugin「Scenegraph」の操作とDialogの作り方 by @yoshikinoko
- https://github.com/yoshikinoko/XDPluginMeetupJapan
- manifest.json の書き方
- XD Pluginお役立ちリンク集
応用
- Adobe MAX 2018 XD Plugin API Labsでプラグインを作ってきた!
- Adobe XDプラグインをVueとBabel/TypeScriptで開発する方法
- 計画がゆるふわ はじめてのAdobe XDプラグイン開発
最後に
作りたいものが他に特に思いつかないので、すでにリリースされている色のコントラスト比を測るツールを作成中です。コントラスト比を出す方程式をJavaScriptに置き換えまでとりあえず進めたので、まずは、今の段階で結果を返すダイアログに結果を渡して表示できるようにこれから構築します。
完成は、来年になりそうかな。まだ先は長いです・・・・。
Author And Source
この問題について(Adobe XD でとりあえず何か作りたくて学んだこと), 我々は、より多くの情報をここで見つけました https://qiita.com/tomoka/items/1a3d13bcd459ac06375a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .