IllustratorプラグインをAdobe XDプラグインに移植したArrangerの事例 | アドビUX道場 #UXDojo

UXP（Unified Extensibility Platform）という言葉を聞いたことがあるでしょうか？クリエイティブクラウドアプリケーションを拡張するための最新のソリューションです。UXPベースの拡張機能が最初に導入されたのは、MAX 2018の時のAdobe XDでした。他のアプリケーションにも数年の間にUXPを統合する計画です。既存のCEPやES開発者からは、新しいモデルであるUXPへの移植について多くの質問がありました。そこで、この記事ではIllustrator とInDesign用の拡張機能をAdobe XDに移植した開発者のオイゲン・プフリューゲルとのインタビューを紹介します。

オイゲンはデザイナーで、パートタイムの開発者で、Parceの共同設立者で、3人の子を持つ父親です。彼はドイツで生活しています。www.neumannmueller.com | digital mediaのインタラクションデザイナーでもあります。

Arranger開発者のオイゲン・プフリューゲル

Arrangerとは何でしょうか？何をしてくれる拡張機能ですか？

Arrangerは、複数のオブジェクトを円やグリッドや波の形に並べるプラグインです、IllustratorとInDesign向けに提供されていて、今はXDでも利用できます。

2017年にIllustrator用にArrangerを開発しようと思ったきっかけは何ですか？

自分が抱えていたデザインの問題を解決するためにつくりました。オブジェクトを円周上に並べるという作業です。これを数多くこなさなければならないプロジェクトで作業をしており、自分の手でやり続けることに疲れ果てていました。他の解決方法の存在も知ってはいましたが、それらはどれも少し複雑すぎるように感じていました。手軽で簡単に使えるものが欲しかったのです。私にはCEPとHTMLプラグインの知識がありました。そこで、自分でつくることに決めたのです。

Arrangerが対象とするユーザーは誰でしょう？

ArrangerはIllustratorやInDesignを日々使っているデザイナーのためのものです。彼らの時間を何分か節約するのに役立つでしょう。

Illustrator用のArrangerはCreative Cloud Exchangeから入手可能

ArrangerをIllustratorとInDesignに実装する際に直面した問題は何でしたか？

もし1行のコードでそれを表さなければならないとしたら、これでしょう。

csInterface.evalScript(‘arrangeRadial(‘ + JSON.stringify(obj) + ‘)’);

最大のチャレンジは、CDP自体のコンセプトを理解することでした。ダビデ・バランカの本がとても参考になりました。まず、コードを変更するたびにIllustratorを再起動しなければなりませんでした。これは忍耐を伴う作業でした。しばらく後にコツをつかむことができましたが、このプロジェクトを止めようと思ったのは一度だけではありませんでした。

ArrangerをAdobe XDに移植しようと思った理由は何ですか？

2019年の3月にドイツのマンハイムで開かれたHello! XD plugin ワークショップに参加して、XDのプラグインのつくり方を学びました。Adobeのチームと個人的に話ができたことは役に立ちましたし、やる気にもつながりました。

XD用のArrangerはプラグインマネージャーから入手可能

古くからのIllustratorユーザーとして、Adobe XDについてどのように感じましたか？

XDは素晴らしいと思います。軽くてシンプルで素早く作業ができます。アドビが始めようとしている新しいことは、うまくいっていると思います。特にドキュメント間で同期できるコンポーネントはお気に入りです。それと、プレゼンテーションにXDを使う人々をたくさん見かけるようになりました。

でも、時々アンカーポイントの機能が恋しくなります…😀

CEPと比較して、初めてのUXPの開発プロセスの印象はどうでしたか？

私の最初の印象は、「なんて簡単なんだろう！」というものでした。コードを変更して、XDにプラグインをリロードすれば、それで準備完了です。CEPの開発と比べると、まるで早送りのモードで作業しているようでした。最初の設定は簡単でしたし、XD内にはコンソールも提供されていました。

Illustratorの場合は、ユーザーが選択対象を変更しても、それをイベントとして通知することができません。CEPにはその機能がありません。XDの場合はそれが用意されていました。それは本当に大きな違いでした。

実際、CEPには無い（少なくともIllustratorには無い）3つの主要なイベントが提供されているのは最高です。”show”, “hide”, “update” の3つです。CEPでも何人かの開発者がこうした機能を使う手段を実装したことは知っていますが。

function show(event) {
	// プラグインが開始された
	// UIの構築を行う
    event.node.appendChild(create());
}

function hide(event) {
	// プラグインが終了するところ
	// 後始末を行う
    event.node.firstChild.remove();
}

function update(selection) {
	// ユーザーが選択対象を変更した
	// 変更に対処するコードを記述
}

Updateは特に有効でした。何しろ、ユーザーが何かを変更した時に反応することができるのです。UIを変更し、フィードバックを表示し、ユーザーが選択したオブジェクトをサポートする処理を行えます。CEPの世界から来た私には大変驚くべきことでした。UXPが他のツール（Photoshop、Illustrator、InDesignなど）に採用されたときには、すべてが同じになることを切に願います。

UXPではUIの構築も容易でした。すべての要素がすでにXDの標準スタイルになっているからです。CEPでは、UIを自分で構築し、スタイルもゼロからの作業でした。（CSSライブラリを修正するという手もありますが、とてもアプリの一部であるようには見えないものになりました）

Adobe XDのArrangerのパフォーマンスはIllustratorやInDesignと比較してどうでしょうか？

XDの方がずっとパフォーマンスが良いですね。特にオブジェクトの数が多い時は顕著です。その上、XDはIllustratorよりも短時間で起動します。😀

ところで、Adobe XD用にArrangerの作業をしている際に、XDのコンポーネントと自動アニメーションの機能を使った面白い機能をつくりました。XD用のArrangerはより高機能なのです。

XD用のArrangerではコンポーネントが使われている

UXPを使った開発の際に直面した問題は何でしょうか？

最も大変だったのは新しいAPIを覚えることです。特に、ScenegraphとplaceInParentCoordinatesは時間がかかりました。最初は制限されているように感じました。XDでArrangerを動作させるために、いくつかコンセプトレベルの変更をしなければなりませんでした。例えば、すべてのオブジェクトをグループ化しなければなりませんでした。これはCEPでは不要だった作業です。その一方、数十のオブジェクトを扱うよりも、一つのグループを扱う方が容易であることが分かりました。いまでは、IllustratorとInDesignのArrangerも同じ方式にしようかと考えています。

私は、アドビがオブジェクトを絶対座標に配置できるようにしてくれるといいなと期待しています（InDesignのplaceInAbsoluteCoordinatesのような）。

その他には、選択されたオブジェクトをインデックス順に返してもらえたらとても嬉しいです。今は、Scenegraphを何回も行ったり来たりしなければなりません。

Adobe XDにはプラグインパネルが追加されました。従来は、モーダルのダイアログでした。これは何か違いをもたらしたでしょうか？

実は、XDへの移植を検討し始めたのは、プラグインパネルの計画を知ったときです。モーダルは私にとっては選択肢ではありませんでした。

Adobe XDにプラグインを移植したいと考えているCEP開発者にアドバイスはありますか？

とりあえずやってみましょう。開発はCEPよりも簡単で短時間で終わります。一番の不満は、CEP用に書いた制限回避のためのコードを捨てなければならないことでしょう。😀

また、プラグインをXDに移植して、異なる制約と利点を持つ新しいテクノロジーの上に構築する経験から、CEPのプラグインを改善する新しいアイデアを見つけられるかもしれません（私がオブジェクトをグループ化することを思いついたように）。

UXPに関して他に何か言いたいことはありますか？

UXPは現在XDだけで利用できます。そのため、どこまでがXDで、どこからがUXPなのかを理解することが困難です。例えば、Scenegraphにオブジェクトを配置する際の制約はどちらのものなのでしょうか？開発者からのフィードバックを受けて、今後数カ月の間にさらに成熟したソリューションになることを期待しています。プラグインがXDに深く関われるのは素晴らしいと思います。開発者の意欲を高める要因になるでしょう。

私の個人的な一番の願いは、購入機能があるUXPプラグインのアプリストアのようなものができることです。コミュニティでもそうした議論があると聞いていますが、私はパートタイムの開発者ですので、課金機能やライセンス管理ソリューションの開発には興味ありません。アドビが販売して幾分かの分け前を貰えればそれで充分です。

この記事はA Case Study on Arranger: Making the Leap from CEP to UXP（著者:Erin Finnegan）の抄訳です