Adobe UXP Developer Toolを使ってAdobe XDのプラグインを作ってみる(作成編)
前書き
あぽろきゃっとです。
今回は、この辺を参考にしながら、簡単なプラグインを作成していきます。
前回はこちら「Adobe UXP Developer Toolを使ってAdobe XDのプラグインを作ってみる(準備編)」
環境
MacBook Pro (13-inch, M1, 2020)
macOS Monterey 12.6
Adobe Creative Cloud 5.9.0
「Adobe UXP Developer Tool」の立ち上げ
最初に「Adobe XD」を立ち上げます
上部のメニューバーから「プラグイン」>「開発版」と進み、「開発者ツールを入手」をクリックすると「Adobe UXP Developer Tool」が立ち上がります。
プラグインを作成
「Create Plugin」ボタンを押下すると、「Create Plugin」ダイアログが表示されます。
ダイアログの簡易な説明
Plugin Name
プラグインの名前です。任意で大丈夫です。
ここでは「UXPDemo」 としました。
Plugin Id
プラグインの識別IDです。
Adobe Developer Console からプラグイン作成の手順を踏んで発行するように書かれていますが、配布しないのであれば、他のプラグインと被らないIDを好きにつけても大丈夫です。
ここでは「apc12345」としました。
Plugin Version
プラグインのバージョンです。とりあえず「1.0.0」にします。
Host Application
対象のアプリケーションです。初期値が「Adobe Photoshop」になっているので、「Adobe XD」に変更します。
Host Application Version
対象のアプリケーションのバージョンです。未検証ですが、対象のアプリケーションがここで指定したバージョン以前の場合は、プラグインが動かないと思います。
チュートリアルでは"38.0.0"を指定していたので、そちらに合わせてみました。
Template
テンプレートです。今回は「quick-starter」を選んでみます。
入力が終わったら「Select Folder」ボタンを押下します。
プラグインの保存先を選択するダイアログがでるので、任意の場所に保存します。
プラグインのファイルがいくつか作成されるので、新しいフォルダを作成して保存するのがいいと思います。
ここでは "Projects"フォルダの下に"UXPDemo"フォルダを作成して保存しました。
~/Projects/UXPDemo
プラグインの雛形生成が成功すると、以下のような画面がでると思います。
右カラムの一覧に生成したプラグインが表示されます。
プラグインのロード（躓いた話）
前項で作成したプラグインをロードしてみます。
右カラムのプラグインリストから、作成したプラグインの右端にある「…」をクリック、さらに「Load」をクリックします。
これでロードできる想定だったのですが、失敗しました。。
エラーログを見てみますが、、原因がわかりません。
最初からやり直しても同じエラーで進みません。
さらに情報がないか検索をしてみます。
同様の症状の方がいましたが、解決していませんでした・・
最後にPCを再起動したらできたとの書き込みもありましたが、残念ながら再起動してもできませんでした。
プラグインのロード（解決した話）
deepL片手に半日ほど海外サイトをふらふら見回って、ようやく解決しました。
When trying to load a plugin using UXP Developer Tool into XD without an open document, you’ll receive an error “Plugin Load Failed” and a log “Plugin rejected - due to invalid object”. If you open a document in XD and then load the plugin again, things will work as expected.
I’m not sure if the error is technically accurate, but it’s quite confusing. I spent a couple hours testing manifests, including the boilerplate that UXP Developer Tool itself spits out, and only accidentally figured out the fix because I had switched back to the classic manual developer folder method.
（DeepL翻訳）
ドキュメントを開いていない状態でUXP Developer Toolを使用してXDにプラグインをロードしようとすると、「Plugin Load Failed」というエラーと「Plugin rejected - due to invalid object」というログが表示されます。XDでドキュメントを開いてから、再度プラグインをロードすると、期待通りに動作します。
このエラーが技術的に正確かどうかは分かりませんが、かなり混乱します。私は、UXP Developer Tool 自体が吐き出す定型文を含むマニフェストを数時間かけてテストし、古典的な手動開発者フォルダ方式に切り替えたため、偶然に修正方法に気付いただけです。
なんと・・・
XDのドキュメントを開いていないとロードできないようです。。
そんなことかい！
ということで、XDで適当なプロジェクトを立ち上げて再度ロードします。
うまくロードできました！！
余談ですが、XDを最小化してDockに格納されている場合もロードに失敗するようです。
プラグインの実行
ではロードしたプラグインを実行してみます。
XDの左サイドメニュー下部のプラグインアイコンがアクティブになっているのを確認します。
アクティブではない場合はクリックしてアクティブにしてください。
UXPDemoのプラグインが表示されています。
このサンプルプラグインには四角のオブジェクトに作用するようなので、適当に四角のオブジェクトを作成します。
作成したオブジェクトを選択すると、左側のUXPDemoの部分に画像のような数値入力項目がでてきますので適当な数値をいれて「Apply」をクリックします。
四角のオブジェクトのサイズが変更されればプラグインが正常に動いています。
まとめ
今回はプラグインをテンプレートから生成してロードするところまでをやってみました。
XDの情報は国内外合わせてもあまり見受けられないので、不明なエラーがでると解決までが大変でした。
プラグインの中身をいじっていきたいなと思っていますが、XDの動向が不透明だしfigmaもやらないとなーとなっているのでどうなるかわかりません。
この記事が気に入ったらサポートをしてみませんか？