キーボード・ゲームパッドだけじゃない！Adobe XDとデバイスを連携させてハードウェアをプロトタピングしよう！ #AdobeXD #AdobeIO

こんにちは研究開発本部の竹岡です。
5月にアップデートされたAdobe XDで、キーボードやゲームパッドのボタンでプロトタイプを操作できる機能「キーボード、ゲームパッドのトリガー」が新たにサポートされました。
この機能によって、様々なデバイスとAdobe XDを連携させることが可能になり、ハードウェア製品やIoTデバイスのプロトタイピングにAdobe XDを活用できるようになりました。
本記事ではSONY MESHとAdobe XDを連携させる方法を紹介しますが、同様の方法で様々なデバイスと簡単に連携させることが可能です。
今回は「SONY MESHとAdobe XDを連携させる方法」に合わせて「機能が開発されるまでの裏話」も紹介します。

様々なデバイスで Adobe XDを操作しよう！

それでは早速、SONY MESHとAdobe XDを連携させる方法を紹介します。
先日、micro:bit で Adobe XD を操作する方法を紹介していただきました！
（デバイス連携の可能性についてコメントもいただき、嬉しいです。感激です。）
koyokoさんありがとうございます！！

#microbit から #AdobeXD をコントロールする簡単な方法の紹介です。@plife2010｜note（ノート）https://t.co/GP91WKjqeI

— koyoko (@plife2010) May 21, 2019

SONY MESHでAdobe XDを操作しよう！

そして、自分（竹岡）もSONY MESH https://meshprj.com/ とRobotJS https://robotjs.io/ を組み合わせて動かしてみました。

.@AdobeXD の🚗の画面を SONYの @MESHprj の MESH Moveで操作しました 🤳🎲（画面上方向から見たときのトミカの向きと画像とXDの画像がリンクしてます）#AdobeXD のキーボードトリガを使えます ⌨️ #MESHprj pic.twitter.com/D57vyVoxAm

— Yoshiki TAKEOKA 竹岡義樹 (@yoshikinoko) May 26, 2019

やり方は koyokoさんの例と同じく、Adobe XDでキーボードのトリガーを設定し、 MESHのカスタムブロックを介したキーボードイベントを設定するだけです。
今回はmicro:bit の代わりにMESH、Seri2Keyの代わりに Node.jsと RobotJS というnode packageを利用します。

全体の構成はこのようになっています。図の右から順にXD、Node.js、MESHをそれぞれ設定していきましょう。

MESHとAdobe XDの接続

Adobe XDのファイルを作成し、キーボードのトリガーを割り当てる

それぞれのアートボードへ遷移するように、キーボードのトリガーを割り当てましょう。
（アートボードの数だけ設定するので、少し大変です）

FRONT: U
BACK: D
LEFT: L
RIGHT: R
TOP: E

素材はこちらのAdobe Stockのイラストを利用しました

Adobe XDのキーボードトリガーの設定

Adobe XDのキーボードトリガーの設定

Node.jsとRobotJSをセットアップする

Node.jsとRobotJSのインストールについてはNode.js公式サイト https://nodejs.org 、RobotJS公式サイト https://robotjs.io/ などをご覧ください
PC側でMESHのリクエストを受け取るためにhttpを利用し、RobotJSの keytap でキーボードのイベントを発生させています。
たとえば http://127.0.0.1/f にアクセスされたときにキーボードの “f” を押下するイベントが発生します。

const http = require('http');
const robot = require("robotjs");
http.createServer(function (req, res) {
  // remove first '/'
  const char_input = req.url.substring(1,2);
  console.log(char_input);
  if(char_input != ""){
    robot.keyTap(char_input);
  }
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(char_input);
}).listen(8888, '0.0.0.0');

MESH SDKでMESHのカスタムブロックを作成する

MESHの動作に合わせて、httpリクエストを送信するカスタムブロックを作成します。
（詳細は MESH SDKの公式サイト https://meshprj.com/sdk/ をご確認ください。）
本例ではMESH SDKのリファレンスマニュアルの「天気予報タグ」のサンプルを参考に作成しました。
（作成したMESH Blockのダウンロード）
サンプルコードで指定されているカスタムブロックのIPアドレスには、Adobe XDが動作するPCのIPアドレス(172.20.10.10の箇所）やポート番号(8888の箇所）など、使用するPCのネットワーク設定や上記のNode.jsのソースコードを確認して適宜変更してください。

MESH SDKでカスタムブロックを作成する

MESH SDKでカスタムブロックを作成する

上記の様なブロックをAdobe XDのキーボードイベントと同じ数だけつくります。
（自宅でも動かしてみたかったので、IPアドレスだけを変更し、アイコンの色を変えて、社内用・自宅用のブロックを作成しました）

MESH SDK で作成したカスタムブロック

MESH SDK で作成したカスタムブロック

MESHアプリでカスタムブロックを用いたレシピを作成する

先ほど作成したカスタムブロックとMESHのブロックとつなげていきます。
（本例では「動きタグ」の向きと連動するようにしたいので、「動きタグ」の「向きが変わったら」の設定を利用しています。

iPhone の Mesh アプリで動きタグとカスタムブロックのレシピを作成

SONY MESHでAdobe XDを動かしてみる

いよいよ動かします！
Node.js (RobotJS) を動かして、Adobe XDのプレビューを立ち上げ、iPhoneのMESHアプリを立ち上げてMESHを手に持って動かすと、こんな感じでAdobe XDの画面が変化します。
お疲れ様でした！

.@AdobeXD の🚗の画面を SONYの @MESHprj の MESH Moveで操作しました 🤳🎲（画面上方向から見たときのトミカの向きと画像とXDの画像がリンクしてます）#AdobeXD のキーボードトリガを使えます ⌨️ #MESHprj pic.twitter.com/D57vyVoxAm

— Yoshiki TAKEOKA 竹岡義樹 (@yoshikinoko) May 26, 2019

「ゲームパッド」ですが、ゲーム以外のプロトタイピングでもAdobe XDを活用してほしい！

Adobe XDのキーボード・ゲームパッドトリガーのサポートの検討が始まったのは昨年の4月頃です。
当初はコンソールゲーム（家庭用据え置き型のゲーム）の開発現場での利用を前提に、ゲームパッドのトリガーをXDに追加するかどうかを検討していました。
ところが、プロトタイピングの事例を徹底的に調べてみると、ゲームパッドやキーボードのトリガーはコンソールゲームのデザインだけでなく、様々な場面のプロトタイピングに応用できることが分かりました。それは「ボタンを持つ機器」、いわゆる「ハードウェア」の画面のプロトタイピングです。「ボタン」と「画面」の両方を持つハードウェアはコンソールゲームの他にも、テレビ、オーディオ、カーナビゲーション機器、カメラ、医療用機器など様々なものがあります。

これらのハードウェアの開発においては（リモコンなどの）ボタン操作と画面デザインを連動させることが重要になりますが、試作や開発の段階ではハードウェアが手元にない状態で、デザインの作業をしなければならない場面も少なくありません。調査を進めていく中で、そのような状況ではボタンの代わりに、キーボードやゲームパッドのイベントを代用しプロトタイピングを行いながら画面をデザインし、ハードウェアがデザイナーの手元にそろった段階で、最終的に製品と統合していくという流れがあることがわかってきました。

当初はゲームの開発に焦点を当てて検討を始められたゲームパッド・キーボードのサポートですが、最終的には「プロトタイプをAdobe XDの外から制御可能にすることで、活用の場面が増える」という調査結果をふまえて開発が始められました。

そんなわけで昨年の春に準備した企画書です。
あれから1年、リリースすることができました！

2018年4月ごろに準備した企画書

（おまけ）Adobe XDでゲームのキャラクターを動かそう！

Adobe XDで遊んだついでに、CC道場 #259 XD News スペシャル：2019年上半期最大のアップデート、Adobe XD 19の新機能を解説！（39:52ごろ）や Howard Pinsky: “Working with key/gamepad triggers in Adobe XD”（16:23ごろ・英語）にて好評だった、Adobe XDでゲームキャラクターを操作するデモファイルについて解説します。
※自分はアニメーションやモーションデザインのプロではないので、あくまで参考程度にお願いします。

今回利用したAdobe Stockの素材は下記の通りです。

ゲームパッド
- https://stock.adobe.com/images/set-of-flat-vector-video-game-controllers/88533454
キャラクター
- https://stock.adobe.com/images/red-robot-game-sprites/222700767
- https://stock.adobe.com/images/red-robot-attack-game-sprites/222700810

アートボードの構成

全体としてはこんな感じです。スプライトアニメーションをAdobe XDで作成した様な感じですね。
それぞれの行が1つのボタンアクションに対応したアニメーションになっています。

各ボタンアクションに対応したアニメーションを設定

各ボタンアクションに対応したアニメーションを設定

ボタンの操作に対応するアニメーション

各アクションのアートボードは「時間トリガー」が設定されたアニメーションです。
時間トリガーの値は0.03-0.05secぐらいが良いと思います。（絵にもよると思いますが、0.07sec程度では「もっさり」した感じになると思います。）
例えば□（四角）ボタンを押下したときのアニメーションを見てみましょう。

ボタンが押下された時のアニメーションを「時間トリガー」で設定