Adobe XDでプラグイン機能から外部ネットワークアクセス（Network API）を試してみるメモ

Adobe XDでプラグイン機能から外部ネットワークアクセス（Network API）を試してみるメモです。

今後、いろいろな連携をしていく上でネットワーク系がダメだと私の展開としてはキツイのでドキドキしながら試していきます。

参考にしたドキュメント

今リリースされている、このあたりのドキュメントをキーにして進めていきます。

まずHelloWorldを作る

やはり、一番参考になるのは

はじめてのAdobe XDプラグイン開発！定番のHello Worldを表示させてみよう #AdobeXD #AdobeMAX – Adobe Creative Station

こちらでしょう。

このように作成して、

再読み込みをして。

使えるようにしておきます。やるぞー。

動かしてみると配置されます。

ネットワーク接続を探してみたらスゴく探しやすい！

さて、ここからAPIを見ていきましょう。

Adobe XD PlatformのページにAPIリファレンスやサンプルコード、XDのドキュメント構造であるScenegraphについての解説があるので、それらを確認してみましょう。今回のサンプルコードでは触れなかったHTMLを使ったダイアログUIや非同期でのwebサービス連携など、いろいろな機能を持つプラグインの開発が可能です。また、日本以外のXDユーザーにも使ってもらえるようメニュー名やプラグインUIのローカライズ対応も検討してみてください。

と、先ほどの記事にもあるように、Adobe XD Platformのドキュメントが分かりやすかったです。

Overview · Adobe XD Plugin Reference

表示したときのメニューの安心たるや！充実しています。

そして、リファレンスもありました。Network APIsもありますね。

なるほど、しっかりAPIがありますね。2018/10/22現在。

サンプルコードがGitHubに！

さきほどのドキュメントを読んでいたら、なんとサンプルコードがGitHubにあることがわかりました。

AdobeXD/plugin-samples: Adobe XD Plugin Samples

これ、すごい驚きました。以前、PhotoshopやFlashの拡張機能を作っているときは、サンプルを探すのは大変だったことと比べるとめっちゃ探しやすい。こうやって公式のほうから道筋をしっかり公開しているんです。

plugin-samples/how-to-make-network-requests/main.js から、いい感じの挙動を見つけることができました。

plugin-samples/main.js at master · AdobeXD/plugin-samples

単純にやり取りするなら fetch APIを使えばよさそうですね。

helloworldサンプルを修正してみる

今までの調査を参考にして main.js を修正しました。

Qiita APIからAdobeXDタグの情報を拾うプログラムです。

const {Text, Color} = require("scenegraph"); // XD拡張APIのクラスをインポート

function helloHandlerFunction(selection) { // メインのファンクション
  console.log("my function is called!"); // Developer Consoleに出力
  
  // Qiita APIからAdobeXDタグの情報を拾う
  const url = "https://qiita.com/api/v2/tags/AdobeXD";
  // fetchでデータ取得
  return fetch(url)
      .then(function (response) {
        return response.text();
      })
      .then(function (textResponse) {

        const el = new Text(); // XDのTextクラスからインスタンスを生成
        el.text = textResponse;  // 受信結果 textResponse
        el.styleRanges = [ // テキストのスタイルを設定
          {
            length: el.text.length,
            fill: new Color("#FF0000"),
            fontSize: 24
          }
        ];
        selection.insertionParent.addChild(el); // XDノードツリーにテキストオブジェクトを追加
        el.moveInParentCoordinates(100, 100); // テキストオブジェクトの表示位置を指定

        return console.log(textResponse);
      });
}

module.exports = { // コマンドIDとファンクションの紐付け
  commands: {
    helloCommand: helloHandlerFunction
  }
};

修正して main.js を保存しましょう。