Adobe XD 14 で追加されたメタ情報APIを使ってみる

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

本当は12/17(月)開催したもくもく会のレポートでもと思っていたのですが、開発したものの紹介など許可を取り忘れてしまったのでネタを変えました。

Adobe XD 14登場とAPI追加

さて。2018/1２/1７（月）にAdobe XD 2018年12月更新がやってきました！と、同時にXD APIにもいくつかホットな追加がされています。Adobe IOの英語ブログに記事が出ていますが、追加されたAPIやプラグインに関する機能をまずは見てみましょう。

追加されたプラグインに関する機能

selectionとdocumentRootを引数以外で取得できるようになった

//メソッドの中で
const { selection, root } = require("scenegraph");

XDからプラグインを呼び出すときにコールするメソッド以外では引数を引き回すしかselectionとdocumentRootにアクセスできなかったのでとても大きな改善だと思います。

styleRangesを使用せずにテキストのスタイルが割り当てられるようになった

13向けにサンプルを見ましたが、○文字目から長さ×までの色やフォントを指定していたXDですがこんなコードで色などが指定できるようになりました。

const {Text, Color} = require("scenegraph");
let newText = new Text();
newText.fill = new Color("blue");

ViewPortに関するAPIが追加

スクリプトからワークスペースの拡大縮小、パンが可能に！スクリプトが変更した箇所に移動！なんてことができるようになっています。

const viewport = require("viewport");
viewport.scrollIntoView(selection.items[0]);//選択しているオブジェクトにビューを移動する

検索して変更するようなプラグインでUX的な改善が見込めそうです。

他にもセーフモード起動などあって嬉しい機能が追加

• 共有のリンクが取得可能に
• ドキュメントとノードにメタデータを埋め込み
• プラグインを見つける機能の改善
  • プラグインリリース日だけでなくプラグイン名で並び替えできるように
  • 詳細フィールドもキーワード検索の対象に
• セーフモードでの起動…プラグインに問題があるときに、Shiftキーを押しながらXDを起動すると一時的にプラグインを無効にして起動できる
• プラグインアンインストール時にそのプラグインのデータと設定を削除するが、アンインストール時にその確認が行われるようになった
• Windows版で書き出しのときにフォルダー名に空白や特殊文字を含んでいてもフォルダーが正常に作られるように
• Rectangle.cornerRadiiが正しい値を返すように

セーフモードでの起動は、プラグインのバグでXDが起動できなくなる、動作がおかしくなるを心配していたのでとても嬉しい機能。調子が悪いときは試してみると良さそうです。

今回は「ドキュメントとノードにメタデータを埋め込み」に注目したいと思います。

ドキュメントとノードにメタデータを埋め込み

すでに出ているリファレンスによると、これは簡単で、次のコードを書くだけ。

//選択した1つ目のオブジェクトにメタデータを埋め込む場合
const selection = require("scenegraph");
selection.items[0].pluginData = JSON.stringify({modifiedByPlugin: true});//セットできた！

JSONとして文字列にしてセットするのを忘れずに。パースが必要ですが取り出しも簡単です。

const selection = require("scenegraph");
const metaData = JSON.parse(selection.items[0].pluginData);//取り出せた！
console.log(metaData);

埋め込まれるメタデータはそのプラグイン固有。つまりそのプラグインからだけアクセスできるということ。

プラグインからドキュメントや走査した要素にデータを埋め込めるということは特にファイルを書き出さなくても、ドキュメントごとにプラグインがどう関わったか、ドキュメントごとに保存したい情報などを埋め込めるということです。

余談ですがGoogle SheetsというプラグインはURLを記憶していましたがあれはプラグインフォルダーに書き出していたのでしょうか…ドキュメントやオブジェクトごとに違うということはなかったので、個別対応は諦めていたのだと思います。

ファイル書き出しするにしても、ユーザーの手もしくはシステムによってどのように移動するかわからないファイルの情報を持ち続けるのはあまり良い実装ではないと思われます。

これでドキュメントを起動するごとに消えてしまったらがっかりなのですが、

Metadata is persisted with the document when it is saved.

このデータはドキュメント保存時に一緒に保存されるとありました。バッチリです。同時に複製したときにもついて回るようです。これもいいですね！

セキュリティホールになんてなったりしないよね？と思う一方で、この機能を待っていました。というのも、私の作ったRepeat Grid Fitterは、ユーザーの設定に応じてマスクをかけることでリピートグリッドの一部を隠すのですが、マスクを解除しないと幅や高さを再調整できないという既知の問題を抱えています。

そう、マスク付きのグループが確実にRepeat Grid Fitterによる加工を受けているかが判定できるようになったのです。

Repeat Grid Fitterの機能改善に役立てる

これはマスクをセットするメソッドの一部です。

function setMask(rg, columns,length) {
// (中略)
    selection.items = [rg, maskPath];
    commands.createMaskGroup();
    selection.items[0].pluginData = JSON.stringify({modifiedByPlugin: true});
}

こんな感じでマスクグループを作るときだけ、マスクグループに対してpluginDataをセットすることにしました。この値を取得することで、マスクを解除してから改めてリピートグリッドの調整が行えるようになります。

他の機能改善と一緒に近いういちにリリースしたいと考えています。

まとめ

Adobe XDが進化するように、XD APIも少しずつ便利に使いやすく整っていくようです。開発者の皆様、一緒に毎月楽しみにしましょう。

では、楽しいXDプラグイン開発ライフを！