Adobe XDプラグインの世界へようこそ! Adobe MAX 2018セッションレポート #XDPlugin #AdobeXD

連載

Adobe MAX 2018

10月に発表された様々な新機能の中でも、Adobe XD Plugin APIの一般公開は大きな意味を持つ発表でした。これからは必要に応じてユーザーが独自にXDに機能を追加できます。世界中のユーザーに自分がつくった拡張機能（プラグイン）を提供することも、もちろん可能です。

アドビがプラグインAPIを公開したことで何が変わるのか？この記事では、Adobe MAX 2018のセッション「Getting Started with XD Plugins」から、アドビが考えるプラグインの役割と、プラグインのつくり方の基礎を紹介します。

XDプラグインとは何か？

Adobe XDはアドビが開発しているデザインツールです。毎月更新が行われ、次々に新しい機能が追加されています。追加される機能は、基本的に多くのユーザーに支持されたもの優先です。

では、一部のユーザーだけが必要とする機能が使える日は来ないのでしょうか？そこで登場するのがプラグインです。プラグインはユーザー自身が開発できるため、仕様を自分の都合に合うよう決められます。これまでできなかったことや苦労していたことを、自分やコミュニティが解決できるようになるわけです。

セッションでは、XDプラグインの利用が想定される主な領域として、以下の4つが挙げられていました。ピンと来るものはあるでしょうか？

Google Sheets for XD

セッションには2人のゲストが登場し、それぞれが開発したプラグインを紹介してくれました。一人目はGoogle Sheets for XDを開発したImpekableからSara Stewart氏です。Google Sheetsは、スプレッドシートからデータを取り込み、テキストや画像を展開できるプラグインです。

使い方はとても簡単で、アートボード上のデータを適用するグループを選択してから、プラグインのパネルを開き、スプレッドシートのURLを指定するだけです。

下の図の左側がプラグイン実行前の状態。右側が実行後の状態です。画像やテキストが一気に読み込まれています。もちろん、リピートグリッドにも対応しています。グループ内の要素とシートの列名を対応付ける画面も用意されています。公開URLが利用できない人のために、CSV読み込み機能も提供されます。

Stark for XD

二人目はStark開発チームのメンバーであるCat Noone氏でした。Starkは色使いのアクセシビリティチェックができるプラグインです。例えば、コントラストが十分か、WCAG 2.0標準に照らしてレポートする機能を持っています。

また、色覚異常を持つ人にどのように見えるかを、実際に確認することもできます。下の画像のダイアログボックス内には、カンバス上のデザインの見た目の変化が表示されています。

公開されているプラグインは他にも沢山あります。業務効率を向上させるRename itやArtboard Plus、コード生成機能を持つLightning Storm CCやWeb Export、さらにTrello、Slack、Zeplinのようなメジャーなサービスと連携するプラグインも公開されています。

プラグインの管理と実行

さて、ここで基本的なプラグインの使い方の確認です。プラグインAPIの公開に伴い、XDのメニューに「プラグイン」が追加されました。プラグインの管理はこの下のメニューを使うのが基本です。

プラグインの検索とインストール

利用可能なプラグインを探すには、「プラグイン」メニューの下の「プラグインを見つける」を選択します。すると、プラグインマネージャーの画面が表示され、利用可能なプラグイン一覧が表示されます。

プラグインのインストールは、一覧から使いたいプラグインを選択し、行の右端にある「インストール」をクリックするだけです。XDを再起動する必要はありません。

プラグインを実行する

インストールが完了すると「プラグイン」メニューの下に新しい項目が追加されています。メニューを開いて確認してみましょう。
メニューに追加された項目を選択することにより、その項目に対応するプラグインを実行できます。

上の画像は、左側がmac OS、右側がWindows 10のスクリーンショットです。

簡単なプラグインのサンプルコード

さて、セッションでは、プラグインのコード例が紹介されました。全部で32行のコードです。ステップごとに区切って、分かりやすく紹介されていたので、この記事ではそのままの説明を再現します。

想定されていた状況は、イベントの参加募集ページをデザインするというものです。マネージャーには、背景に図形を螺旋状に重ねた模様を配置するよう言われています。マネージャーの頭にあるのはたぶんこんなイメージです。

沢山の図形を重ねてつくることになるので、手間はかかりますし、ミスしやすい作業でもありますが、時間さえあれば難しい作業では無さそうです。ですが、賢いデザイナーであるあなたは、マネージャーが「ついでに他のパターンも見せて欲しい」と言い出すことを知っています。例えば、次のようなデザインも用意することになるでしょう。

さらにマネージャーは注文をつけてくるかもしれません。そして、いつマネージャーが満足するかは神のみぞ知るところです。

そんなあなたの味方がプラグインです。なんといっても、繰り返し作業の自動化はプラグインの得意分野のひとつです。これから、7ステップに分けて、上の模様をつくるプラグインのコードを説明します。

1. 正方形をつくる

最初の作業は正方形をつくることです。カンバス上であれば長方形ツールを使う場面ですが、コードでは、Rectangle()を使って長方形をつくります。作成した長方形にはrectという名前が付けられています。
正方形なので、幅と高さに同じ値（上図では320）を指定します。

この3行を実行すると、上図内の白い正方形ができ上がります。

2. 色を変える

今回は、正方形の塗りは不要です。そのため、上の1行目ではfillにnullを指定して、塗りを「無し」にしています。
2行目では、線の色に「白」を指定しています。strokeは線の色を指定するときに使用する要素です。new Colow("色名")は色を指定するときの決まり文句です。色名の代わりに#FFFFFFのようにHEX値を記述することもできます。
3行目では、背景と馴染むように透明度を変更しています。opacityには0から1の間の値を指定できます。0は完全に透明な状態、1は完全に不透明な状態です。上図では「0.5」、すなわち不透明度50%が指定されています。

以上の2ステップで、正方形の見た目が完成しました。

3. 正方形をカンバス上に表示する

正方形を作成しただけではカンバス上に表示されません。次のステップは、カンバスに正方形を追加することです。そのためのコードが上図に書かれています。
先頭のselectionは、現在選択されているオブジェクトです。行の最後のrectは正方形につけた名前ですから、上のコードは選択されているオブジェクトを基準に、rect、すなわち白い線の正方形を追加します。

従って、プラグイン実行時に選択されているオブジェクト次第で実行結果は変わります。例えば、アートボードが選択されていれば、上のコードは、そのアートボードにrectを追加します。

4. 表示した正方形を複製する

rectをカンバスに追加したら、続けて、2つ目の正方形を追加します。

2つ目の正方形は、rectを複製して作成します。そのため、まずrectを選択した状態にします。コピー＆ペースト操作を思い浮かべると、複製する前に選択が必要であることが納得できると思います。
上の1行目のように、selection.itemsにオブジェクトを設定すると、そのオブジェクトが選択された状態になります。カンバス上でクリック操作して選ぶ行為と同等です。

2行目は選択されているオブジェクトを複製するcommands.duplicate()です。1行目でrectを選択しているので、rectの複製が作成されます。

ところが、図の中の正方形は複製前と変化がありません。これは、まったく同じ位置に複製されているためです。複製された正方形は、複製元の正方形の上に重なっているのです。

5. 回転する

本来の目的は、正方形を組み合わせて螺旋模様を作ることでした。そこで、複製した正方形をずらさなければなりません。そのため、複製した正方形を回転させているのが上図のコードです。

1行目は、複製された正方形にnodeという名前を与えています。2行目は、nodeを、図形の中心を軸に5度回転させるという指示です。

回転させたことでが、2つの正方形が見えるようになりました。

6. 移動する

続けて、回転させた正方形の位置を変更します。上図のコードは、nodeを右に5px移動させるという指定です。括弧の中の2番目の数字は、縦方向に移動する距離を指定するための値です。今回は横にしか移動しないので0が指定されています。

少し模様らしくなってきました？

7. 複製・回転・移動を繰り返す

この調子で、複製・回転・移動を繰り返せば、何かの模様ができそうです。そこで、上図では、ステップ4からステップ6を繰り返すコードが追加されています。

プログラムを書きなれない人には難しく感じられるかもしれませんが、上のコードは、180回同じ動作を繰り返す、すなわち、180個の正方形を少しずつずらしながらカンバス上に描画します。あとはプラグインを実行するだけで下のような模様が出来上がるはずです。

プラグインの利点のひとつは、修正が容易なことです。回転させる角度、移動距離、あるいは正方形の大きさなどを変更するには、該当する箇所の数字を書き換えるだけです。プラグインを再読み込みして実行すれば、すぐに結果を確認できます。
マネージャーに言われるまでも無く、デザイナーなら、本音ではいろいろなパターンを試したいと思っているのではないでしょうか。

プラグイン開発を始めるなら

ここまでを読んで、自分でもプラグインをつくってみたいと思ったら、アドビが提供しているスタータープロジェクトを使うと便利です。テンプレートから始めることができるため、ゼロからすべて書かなくても済みますし、必要な項目の書き忘れも防げます。

スタータープロジェクトはhttps://console.adobe.io/pluginsからダウンロードできます（Adobe IDが必要です）。初めてのアクセスだと、プラグイン名を登録する画面が表示されます。その場合は、プラグイン名を入力して”Create Plugin“をクリックします。ここで入力した名前は後から変更できないので注意しましょう。

次に表示される画面にスタータープロジェクトのダウンロードボタン”Download Starter Project“があります。これをクリックするとzipファイルのダウンロードが開始されます。

ファイル内には以下のファイル（とアセット）が含まれています。

manifest.jsonファイルは、プラグインに関する情報を記述するためのファイルです。プラグイン名、アイコン、メニューに表示するラベルなどを記述します。

main.jsファイルには、実際のコードを記述します。下の画像の32行は、上で説明したコードの他に、必要な要素の宣言（最初の2行）と、メニューからの呼び出し方（最後の5行）が記述されています。この箇所についてのより詳しい説明はこちらの記事が参考になります。

プラグインを配布する

作成したプラグインを配布する方法は2種類あります。チーム内、あるいは企業内だけで共有する場合は、パッケージしたファイルを配布するのが簡単でしょう。誰もが使えるようにしたい場合は、プラグインマネージャー経由で配布することもできます。

直接ファイルを配布する

プラグイン配布用のファイルを作成するには、必要なファイルをZIP形式にまとめます（上の例の通りなら、manifest.jsonとmain.jsの2つのファイル）。そして拡張子をxdxに変更します。

インストールはとても簡単で、XDXファイルを受け取ったら、それをダブルクリックするだけです。XDがインストールされている環境であれば、XDが起動されて、プラグインがインストールされます。

プラグインマネージャー経由で配布する

プラグインマネージャー経由で自作のプラグインを配布するには、先程登場したAdobe IO Consoleサイトから申請します。配布したいプラグインのページを開き、”Submit For Review“ボタンをクリックすると、XDXファイルをアップロードする画面が現れます。ファイルアップロード後に表示されるいくつかの質問に答えると、申請は終了です。

最低限ですが、申請されたプラグインに対しては安全性などのレビューがあります。利用する側としては、プラグインマネージャー経由の方が、安心してプラグインを利用することができそうです。不特定多数の相手に配布する場合は、こちらの方法を選ぶのが良いでしょう。

関連するサイト情報

最後に、知っていると便利なサイトをいくつか紹介します。