Adobe XD プラグインとIoT機器 obniz のメッセージング機能をJavaScript同士でつなぐメモ
この記事はAdobe XD プラグイン制作 Advent Calendar 2019 - Qiitaの23日目の記事です。Adobe XD プラグインとIoT機器 obniz のメッセージング機能をJavaScript同士でつなぐメモです。
背景
https://www.1ft-seabass.jp/memo/2018/10/22/adobexd-plugin-external-network-access/
こちらの記事にあるように、Adobe XD プラグインはNetwork APIというのがあり、外部にデータを送ることができます。
それを元に発展させることで、
https://www.1ft-seabass.jp/memo/2019/12/10/adobe-max-japan-2019-resume/
わたくしも、Adobe XDとIoTの連携ネタを登壇させていただいたりしております。
その中で、やはり、Adobe XDとIoTの連携の良き入門になるデバイスは、JavaScriptでIoTができる obniz がとっつきやすいなということで、obnizさえあれば手軽に連携できる（であろう）TIPSをまとめます。
obnizのソースコード
今回は、Adove XDの選択している1番目のパーツの情報をobnizのディスプレイで表示するようにします。
obnizにデータを送るには、obnizが標準でサポートしているメッセージング機能を使うとやりやすいです。
この機能は、obniz自体がネットワークにつながって obniz クラウドという仕組みで連携しているため、とにもかくにも、自分のobnizのIDさえ分かれば手軽に連携できるのです。
このように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の準備は完了です。
実行したまま待ちましょう。
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に合わせる必要があります。
実行してみる
こちらをStartを押して実行してみると、
このように選択するたびにメッセージが送られます！