メモ

Adobe XD プラグインとIoT機器 obniz のメッセージング機能をJavaScript同士でつなぐメモ

Posted on by seigo

この記事はAdobe XD プラグイン制作 Advent Calendar 2019 – Qiitaの23日目の記事です。Adobe XD プラグインとIoT機器 obniz のメッセージング機能をJavaScript同士でつなぐメモです。

背景

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

こちらの記事にあるように、Adobe XD プラグインはNetwork APIというのがあり、外部にデータを送ることができます。

それを元に発展させることで、

Adobe MAX Japan 2019でAdobe XDとIoTとVR(HoloLens)な登壇してきました

わたくしも、Adobe XDとIoTの連携ネタを登壇させていただいたりしております。

その中で、やはり、Adobe XDとIoTの連携の良き入門になるデバイスは、JavaScriptでIoTができる obniz がとっつきやすいなということで、obnizさえあれば手軽に連携できる（であろう）TIPSをまとめます。

obnizのソースコード

今回は、Adove XDの選択している1番目のパーツの情報をobnizのディスプレイで表示するようにします。

obnizにデータを送るには、obnizが標準でサポートしているメッセージング機能を使うとやりやすいです。

メッセージング | obniz.js | obniz

この機能は、obniz自体がネットワークにつながって obniz クラウドという仕組みで連携しているため、とにもかくにも、自分のobnizのIDさえ分かれば手軽に連携できるのです。

image

このようにobnizクラウドで、以下のソースコードを実行します。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/starter-sample.css">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.1.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>

<div class="wrap">
  <div class="print">
    <h3 class="text-center">Message:</h3>
    <div class="text-center" id="text">
      ----
    </div>
  </div>
</div>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    obniz.display.clear();
    obniz.display.print("Hello! Adobe XD!");
    
    obniz.onmessage = function(message, from) {
      // obnizのディスプレイにAdobe XDからきたメッセージを反映
      obniz.display.clear();
      obniz.display.print(message);
      // HTMLにAdobe XDからきたメッセージを反映
      $('#on').text(message);
    };
  };
</script>
</body>
</html>

`

これでobnizの準備は完了です。

image

実行したまま待ちましょう。

Adobe XD プラグインのソースコード

obnizへメッセージを送るには先ほどのドキュメントで仕様を確認しておきましょう。

今回はAdobe XD側から fetch機能を使います。

ソースコードは以下の通りです。

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

// Adobe XDがメッセージを送る obniz のメッセージングAPIのURL
// 0000-0000を自分のobnizのIDにします
const obniz_messaging_url = "https://obniz.io/obniz/0000-0000/message";

let timer;

async function startCommandFunction(selection) {
  console.log("startCommandFunction...");
  timer = setInterval(async function () {
    console.log(selection.items.length + " items are selected");

    if (selection.items == null && selection.items.length == 0) {
      // 未選択は何もしない
    } else {
      // 選択されたアイテムの一番最初のアイテム
      const item = selection.items[0];
      // 選択された情報
      let info = {};
      // 名前
      info.name = item.name;
      // JSON文字列化する
      let infoStr = JSON.stringify(info);
      //
      console.log(infoStr);
      // fetchで送る
      fetch(obniz_messaging_url + "?data=" + infoStr)
        .then(function (response) {
          return response.json();
        })
        .then(function (resJson) {
          console.log(JSON.stringify(resJson));
        });
    }

  }, 1000);

}

async function stopCommandFunction(selection) {
  console.log("stopCommandFunction...");
  console.log(selection);
  clearInterval(timer);
}


module.exports = {
  commands: {
    startCommand: startCommandFunction,
    stopCommand: stopCommandFunction,
  }
};

startCommandFunctionを押すと、1秒ごとに、1番目に選択されている情報がobnizに送られます。

// Adobe XDがメッセージを送る obniz のメッセージングAPIのURL
// 0000-0000を自分のobnizのIDにします
const obniz_messaging_url = "https://obniz.io/obniz/0000-0000/message";

ここだけ、obnizのIDに合わせる必要があります。

実行してみる

image

こちらをStartを押して実行してみると、

image

このように選択するたびにメッセージが送られます！

、
seigo