はじめに
記事の紹介
こちらの記事ではUnityでVTuber配信してる際に、外部サービスのREST APIを叩く方法について紹介をします。Unity内からkintoneのREST APIを叩き、kintoneアプリ(データベース)に保存されてる情報を取得し、Unityの環境内に表示させます。この記事での使い方の例として、kintoneで『ネタ帳アプリ』を作成し、そのネタ帳に記録されてる内容をVTuber配信用のUnity画面に表示させます。
こちらの記事はEngineering for Vtuber Advent Calendar 2021 の16日目の記事になります。
自己紹介
自社イベントで自作アバターのForksちゃんに受肉した人です。公に活動してるVTuberではありません。kintone連携を作るのが好きなDeveloper Advocateです。
では早速、作り方に進みましょう。
kintone側の準備
kintoneアプリを作成する
まずkintoneでネタ帳アプリを作成します。新しいアプリを作成し、文字列(1行)フィールド、ラジオボタンフィールド、文字列(複数行)フィールドをそれぞれ下記のようにフォームに配置します。
「アプリを公開」をクリックすると、環境内でアプリを使えるようになります。
レコードを追加する
作りたてのアプリにはデータが入っていません。GUIを通してレコードを追加しましょう。
APIトークンを生成する
kintoneの環境外から、このアプリのデータを取得出来るように準備します。アプリからAPIトークンを生成すると、認証に使うトークン文字列が発行されます。レコードの閲覧条件があるAPIトークンを生成しましょう。
これでkintone側の準備が出来ました。これから、Unity内からこのデータをアクセスして画面に表示させます。
Unity側の準備
VTuber環境の作成
VTuber用の環境をUnityで作成します。UnityとiFacialMocapを利用したVTuber環境の作成について記事を書きましたので、この記事の通り準備を進め、ビルド手前でさらに手を加えたいと思います。
Textオブジェクトの追加
kintoneから取得した情報を表示する場所が準備する必要があります。Hierarchy内に右クリックして、UI → Text と選択し、Textオブジェクトをシーンに追加します。TextオブジェクトのHorizontal Overflow と Vertical Overflow を Overflow に設定すると、取得した文字列が長くても、見切れなくなります。
SimpleJSONの準備
UnityからREST APIを叩く場合、SimpleJSONというフレームワークを使用するとJSONの扱いが楽になります。SimpleJSONの準備についてはこちらの記事で案内してます。この記事と同じ用に、SimpleJSONのライブラリをpluginsフォルダに配置します。
コードの準備
kintoneからデータを取得するためのC#スクリプトを書きます。このスクリプトは適当なオブジェクトに貼ってOKです。今回の例ではスペースキーをタップすると、kintoneのレコードの一括取得APIが叩かれ、レスポンスされた内容がTextオブジェクトに表示されます。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;
using SimpleJSON;
using UnityEngine.UI;
public class kintoneDataController : MonoBehaviour
{
const string domain = "{サブドメイン名}.cybozu.com";
const string APItoken = "fOp04Sdfodsok32rFsdofkASdsodkDFdfkok";
string app = "212";
string query = System.Uri.EscapeDataString("hyouka in (\"検討中\") order by $id desc");
string fields = System.Uri.EscapeDataString("fields[0]") + "=" + System.Uri.EscapeDataString("$id")
+ "&" + System.Uri.EscapeDataString("fields[1]") + "=" + System.Uri.EscapeDataString("neta")
+ "&" + System.Uri.EscapeDataString("fields[2]") + "=" + System.Uri.EscapeDataString("hyouka")
+ "&" + System.Uri.EscapeDataString("fields[3]") + "=" + System.Uri.EscapeDataString("shousai");
void Start()
{
}
void Update()
{
if (Input.GetKeyDown(KeyCode.Space))
{
Debug.Log("Space pressed");
StartCoroutine(
getKintoneRecords(
(JSONNode JSONresponse) =>
{
HandleAPIresponse(JSONresponse);
},
app,
query,
fields
)
);
}
}
private IEnumerator getKintoneRecords(System.Action<JSONNode> callBack, string app, string query, string fields)
{
//APIリクエストの準備
string APIparameters = "app=" + app + "&query=" + query + "&" + fields + "&totalCount=true";
string RequestURL = "https://" + domain + "/k/v1/records.json?" + APIparameters;
UnityWebRequest request = UnityWebRequest.Get(RequestURL);
request.SetRequestHeader("X-Cybozu-API-Token", APItoken);
//APIのリクエストを送信
yield return request.SendWebRequest();
//レスポンスをJSONNode型に格納
string JSONstring = request.downloadHandler.text;
Debug.Log("JSONstring--> " + JSONstring);
JSONNode JSONnode = JSON.Parse(JSONstring);
//JSONNode型のレスポンスをcallBackに渡す
callBack(JSONnode);
}
private void HandleAPIresponse(JSONNode APIresponse)
{
Text ResponseHolder = GameObject.Find("DisplayText").GetComponent<Text>();
string Text_Hyouka = APIresponse["records"][0]["hyouka"]["value"].Value;
string Text_Neta = APIresponse["records"][0]["neta"]["value"].Value;
string Text_Shousai = APIresponse["records"][0]["shousai"]["value"].Value;
ResponseHolder.text = "[ステータス] " + Text_Hyouka + "\n"
+ "[ネタ] " + Text_Neta + "\n"
+ "[詳細] " + Text_Shousai;
}
}
動かしてみる
ではさっそくUnity上で動かしてみましょう。
スペースキーを押すと、レコードの一括取得APIが叩かれます。kintoneアプリに入ってるレコードの中で、「検討中」となってるレコードが複数取得されます。その中でレコード番号が一番大きいレコード(最新のレコード)の情報がUnity上のTextオブジェクトに反映されます。
スペースキーをもう一回押すと、REST APIが再度叩かれ、Textオブジェクトが更新されます。最初に表示されていた情報のステータスが「検討中」から「採用」に更新されていた場合、次のレコードが拾われて表示されます(「検討中」のレコードしか拾わないため)。
また、GUIでレコードの中のテキストを編集し、Unityに戻ってスペースキーを押したら、その修正が反映されます。
コードの解説
定数/変数の定義
const string domain = "{サブドメイン名}.cybozu.com";
const string APItoken = "fOp04Sdfodsok32rFsdofkASdsodkDFdfkok";
string app = "212";
string query = System.Uri.EscapeDataString("hyouka in (\"検討中\") order by $id desc");
string fields = System.Uri.EscapeDataString("fields[0]") + "=" + System.Uri.EscapeDataString("$id")
+ "&" + System.Uri.EscapeDataString("fields[1]") + "=" + System.Uri.EscapeDataString("neta")
+ "&" + System.Uri.EscapeDataString("fields[2]") + "=" + System.Uri.EscapeDataString("hyouka")
+ "&" + System.Uri.EscapeDataString("fields[3]") + "=" + System.Uri.EscapeDataString("shousai");
まずはREST APIを叩くために必要な情報を定義します。こちらの定数や変数はグローバルで定義しない方が良いですが、コードの読みやすさを重視して書いてるので、お許しください。各定数/変数の役割は下記の通りです：
| 定数 / 変数 | 役割 |
|---|---|
| domain | kintoneアプリが作られた環境のドメイン名です。{サブドメイン名} の部分は環境によって違います。サブドメイン名は第三者と共有しないように気をつけましょう。 |
| APItoken | 認証に必要なトークン文字列です。このトークンは特定のアプリにしかアクセス出来ません。APItokenは第三者と共有しないように気をつけましょう。 |
| app | REST APIを使って情報を取得したいkintoneアプリのIDです。ブラウザからアプリにアクセスした際に、URLからアプリIDが確認が出来ます。リンクが https://{サブドメイン名}.cybozu.com/k/212/ の場合、アプリIDは212です。 |
| query | REST APIに使用するクエリ文字列です。今回使用するAPIはレコード一括取得のAPIです。クエリを指定することによって、条件付きでレコードの取得をすることが出来ます。クエリの内容は『hyoukaのフィールドコードをもつフィールドの値が【検討中】となっているレコードの情報を取得し、レコードIDの降順に並び替える』です。 |
| fields | REST APIのレスポンスに含めたいフィールドの情報です。指定しない場合、レスポンスには全てのフィールドの情報が含まれ、大変膨大な内容になってしまいます。レスポンスされるフィールドを絞ることによって、人間にもデバッグしやすいようにします。フィールドを指定する際には、フィールドのフィールド名ではなく、フィールドコードを指定します。今回予め、取得したいフィールドのフィールドコードをそれぞれ "neta", "hyouka" と "shousai" に設定してます。 |
ユーザインプットの処理
void Update()
{
if (Input.GetKeyDown(KeyCode.Space))
{
Debug.Log("Space pressed");
StartCoroutine(
getKintoneRecords(
(JSONNode JSONresponse) =>
{
HandleAPIresponse(JSONresponse);
},
app,
query,
fields
)
);
}
}
ユーザがキーボードのスペースキーを押すことによって、REST APIを叩くようにしています。REST APIは非同期処理のため、コルーチンで処理する必要があります。まず getKintoneRecords の関数が app, query と fields を引数として実行されます。getKintoneRecords 内ではREST APIの処理がされます。レスポンスが返ってきたら、レスポンスの内容は JSONresponse という変数に渡され、HandleAPIresponse の関数が走ります。
kintone REST APIを叩く処理
private IEnumerator getKintoneRecords(System.Action<JSONNode> callBack, string app, string query, string fields)
{
}
StartCorutine で呼ばれる関数は private IEnumerator で宣言する必要があります。
//APIリクエストの準備
string APIparameters = "app=" + app + "&query=" + query + "&" + fields + "&totalCount=true";
string RequestURL = "https://" + domain + "/k/v1/records.json?" + APIparameters;
UnityWebRequest request = UnityWebRequest.Get(RequestURL);
request.SetRequestHeader("X-Cybozu-API-Token", APItoken);
REST API を叩くための情報を準備します。リクエストURLとして下記のURLを作成してます。
https://{サブドメイン名}.cybozu.com/k/v1/records.json?app=212&query=hyouka in ("検討中") order by $id desc&fields[0]=$id&fields[1]=neta&fields[2]=hyouka&fields[3]=shousai&totalCount=true
レコードの一括取得APIに付与出来るパラメータの詳細についてはkintoneのAPIドキュメントで確認できます。
//レスポンスをJSONNode型に格納
string JSONstring = request.downloadHandler.text;
Debug.Log("JSONstring--> " + JSONstring);
JSONNode JSONnode = JSON.Parse(JSONstring);
SimpleJSONで定義されているJSONNode型で変数を定義し、REST APIのJSONレスポンスを格納します。ここで一番何かしらのエラーが出る場合が多いので、デバッグ用にコンソールに吐き出すようにしてます。JSONが吐き出されていれば成功ですが、失敗の場合はREST APIに必要な情報に過不足がある場合が多いです。
//JSONNode型のレスポンスをcallBackに渡す
callBack(JSONnode);
次に走らせる関数に渡したい情報を設定します。この場合、レスポンスされたJSONを渡します。
REST APIのレスポンスをハンドリングする処理
private void HandleAPIresponse(JSONNode APIresponse)
{
}
この関数の中で、レスポンスされたJSONを扱います。ここまでくれば何をしても良いのですが、今回の例ではTextオブジェクトをJSON内の値で更新します。
Text ResponseHolder = GameObject.Find("DisplayText").GetComponent<Text>();
内容を更新したいTextオブジェクトを探し、textコンポーネントを取得します。textコンポーネントを変更することにより、表示されるテキストを変更することが出来ます。
string Text_Hyouka = APIresponse["records"][0]["hyouka"]["value"].Value;
string Text_Neta = APIresponse["records"][0]["neta"]["value"].Value;
string Text_Shousai = APIresponse["records"][0]["shousai"]["value"].Value;
ResponseHolder.text = "[ステータス] " + Text_Hyouka + "\n"
+ "[ネタ] " + Text_Neta + "\n"
+ "[詳細] " + Text_Shousai;
Textオブジェクトに表示される文字列を設定します。レスポンスされたJSONから必要な情報を抜き出し、文字列に加えます。JSONレスポンスの中身は下記の用になっています。
{
"records":[
{
"neta":{
"type":"SINGLE_LINE_TEXT",
"value":"バーチャルマーケットの紹介"
},
"shousai":{
"type":"MULTI_LINE_TEXT",
"value":"現在と過去のバーチャルマーケットについての紹介。\n初心者向けにブースなどを案内する。"
},
"hyouka":{
"type":"RADIO_BUTTON",
"value":"検討中"
},
"$id":{
"type":"__ID__",
"value":"5"
}
},
{
"neta":{
"type":"SINGLE_LINE_TEXT",
"value":"Maker Faireの紹介"
},
"shousai":{
"type":"MULTI_LINE_TEXT",
"value":"全国で行われているMaker Faireについての紹介。\n余裕があれば、世界中で行われているMaker Faireの紹介もする。国によってメイカーが作る作品の傾向が変わっており、結構面白い。"
},
"hyouka":{
"type":"RADIO_BUTTON",
"value":"検討中"
},
"$id":{
"type":"__ID__",
"value":"4"
}
},
{
"neta":{
"type":"SINGLE_LINE_TEXT",
"value":"レトロゲーム配信 - 初代熱血硬派くにおくん "
},
"shousai":{
"type":"MULTI_LINE_TEXT",
"value":"スーファミの「初代熱血硬派くにおくん」の実況プレイ。\n大阪って色々な人に絡まれて怖いね！ってのをみんなに体験してもらいたい。"
},
"hyouka":{
"type":"RADIO_BUTTON",
"value":"検討中"
},
"$id":{
"type":"__ID__",
"value":"3"
}
},
{
"neta":{
"type":"SINGLE_LINE_TEXT",
"value":"VRoid Studio 正式リリース版 基本機能紹介"
},
"shousai":{
"type":"MULTI_LINE_TEXT",
"value":"VRoid Studio 正式リリースおめでとう！\nということで、GUIも色々と変わったところがあります。\nおなじみの機能、新しい機能、それぞれ確認しながら説明していく。"
},
"hyouka":{
"type":"RADIO_BUTTON",
"value":"検討中"
},
"$id":{
"type":"__ID__",
"value":"2"
}
},
{
"neta":{
"type":"SINGLE_LINE_TEXT",
"value":"ロックマンX6配信 - セイバー縛り"
},
"shousai":{
"type":"MULTI_LINE_TEXT",
"value":"ロックマンX6でロックマンでクリアしていく。\n縛り要素として、ロックバスター禁止でセイバーのみで進める。どうしてもセイバーで進むことが無理な箇所はロックバスターを解禁してもよし。"
},
"hyouka":{
"type":"RADIO_BUTTON",
"value":"検討中"
},
"$id":{
"type":"__ID__",
"value":"1"
}
}
],
"totalCount":"5"
オブジェクトの階層を掘って、APIresponse["records"][0]["hyouka"]["value"].Value のように最後に .Value と指定することによって、その値を文字列として抜き出すことができます。
以上で、UnityのVTuber環境からkintoneの情報を抜き出して表示させる方法を紹介しました。
少し映える工夫をする
今回は余計なノイズが入らないように、出来るだけシンプルな実装にしました。結果、取得した情報がわりと地味に表示されました。私が社内イベントで活用した、少し映えるような工夫を紹介します。
情報が表示される場所を工夫する
まずこれですね。UnityのCanvasオブジェクトをうまく利用し、複数のフィールドの内容が見えるようなフォームを作りましょう。その上にレスポンスの情報を表示することによって、コンテンツが見やすくなります。
アプリのデータの扱いを工夫する
今回の例では情報の取得をしてますが、kintoneのAPIは色々なAPIが準備されています。見せたいコンテンツに合わせて使い分けて行きましょう。
REST APIを実行する方法を工夫する
今回の例では、スペースキーをトリガーにREST APIを叩きました。エンドユーザに見えるように、ボタンのクリックをしてREST APIを叩くように出来ます。下記の例ではボタンクリック毎にレコードの一括取得をしていますが、レスポンスの中のx番目の配列データを表示するようにしてます。
また、アバターの身体のパーツの位置や回転の値を取得し、閾値を超えたらREST APIを叩くことも出来ます。下記の例ではスマイルによってレコードの情報を更新してます。
手の動きの検出が出来たら、さらにスムーズに表現が出来そうですね。
おわりに
お付き合いありがとうございました٩( 'ω' )و
もしUnityからREST APIを叩くことに興味が出てきましたら、下記の記事も参考になると思います: