🧚‍♀️

[入門編] 簡単サーバー不要で外部通信機能を使う方法 #cluster #clusterベータ

2023/12/24に公開

JavaScript

先日更新された cluster Creator Kit に追加された
外部通信機能を使う簡単な方法を書いてみます

使うのも

Googleアカウント
Google Apps Script

Cluster Creator Kit Script
Scriptable Item

onExternalCallEnd

Unity 2021.3.4
ClusterCreatorKitSample

サーバ側を用意する

外部通信機能を使うにはサーバを用意する必要があります... が、本格的にサーバを用意しようとすると色々な選択肢があったり難しい部分もあるので、今回は Googleアカウントがあれば利用できる Google Apps Script を利用してみようと思います。

Google Apps Script の説明
"Googleによって開発されたスクリプトプラットフォームである軽量のアプリケーション開発のためのGoogleのワークスペースプラットフォーム" です。 GAS、ガスと呼ばれています。

GAS ファイル作成方法

Apps Script サイトにアクセスして GAS設定をしていきましょう。

左上の新しいプロジェクトを押す
無題のプロジェクト 部分をクリックしてプロジェクト名を変更する今回は SimpleAPI とつけてみましょう

GAS 内容

外部通信機能は HTTP 通信の POSTリクエストに対応する必要があります。
function doPost(e){} を記載すると HTTP POST リクエストを受け取ることができるようになります。

※ HTTP POST リクエストってなに？って気になった方は mozilla.org POST の内容などをざっとみて理解するといいかもしれません。

// verify トークン は環境変数に設定する
const scriptProperties = PropertiesService.getScriptProperties();
const VERIFY_TOKEN = scriptProperties.getProperty('VERIFY_TOKEN');

function doPost(e) {
  // リクエスト内容 を ログ出力
  const dataAsString = e.postData.getDataAsString();
  const params = JSON.parse(dataAsString);
  const request = JSON.parse(params.request);
  Logger.log(`request ${request}`);

  // レスポンス内容を作成する
  const status = {"message": "Hello world!!"};
  const response = JSON.stringify(status);
  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);  
  output.setContent(JSON.stringify({ verify: VERIFY_TOKEN, response: response }));  
  return output;
}

デプロイ

GAS 右上のデプロイを押して作ったGASを公開してURLを取得します。

新しいデプロイを選択
種類の選択 ウェブアプリ を選択する
説明 公開URL にしてアクセスできるユーザーを 全員 に設定します。
ウェブアプリURL が発行されるのでコピーして保存するこのURLは後で記載するUnity側の作業で利用します。

アクセスできるユーザー 全員 に設定する事で Creator Kit の外部通信機能で利用できるようになります。

Creator Kit

Unity側で動作させるスクリプトを書いてみましょう。
ここではシンプルにクリックしたらデバッグログにサーバから受け取った文字列を表示してみます。

Hierarchy に GameOject を追加
名前を SampleItem に変更
SampleItem 以下に Hierarchy 右クリック 3D Object -> Cube で Cube を作成
Cube の scale を 0.3 にする
SampleItem に Scriptable Item を追加する
下記のコードを SampleItem.js としてファイルを作成する
Source Code Asset に SampleItem.js を設定する

$.onInteract(() => {
  const status = {"message": "Interact"};
  const request = JSON.stringify(status);
  // サーバーに送信
  $.callExternal(request, "meta");
});

$.onExternalCallEnd((response, meta, errorReason) => {
  // レスポンスをログに表示する
  $.log(`response ${response}`);
  $.log(`meta ${meta}`);
  $.log(`errorReason ${errorReason}`);
  
  const status = JSON.parse(response);
  const message = status.message;
  $.log(`message ${message}`);
});

Creator Kit 外部通信接続URL

メニュー Cluster -> 外部通信(callExternal)接続URL を選択
URLに デプロイ で作成された GAS の公開URLを入力する
verify用トークン が表示されるのでコピーする次の GAS環境変数に設定する

GAS 環境変数

GASでトークンを安全に扱うために環境変数に設定します。
コード内にトークンを記載するとコード共有がしにくかったり、トークンの漏洩などのリスクが上がるので環境変数に設定してみます。

Apps Script サイトにアクセスする
SimpleAPI を選択
左下の歯車を選択してプロジェクトの設定を開く
スクリプトプロパティを開いて VERIFY_TOKEN に値部分に Creator Kit 外部通信接続URL で発行した verify用トークン を設定する

ここで設定した環境変数は GAS のコード内で PropertiesService を利用することで取得することができます。

// verify トークン は環境変数に設定する
const scriptProperties = PropertiesService.getScriptProperties();
const VERIFY_TOKEN = scriptProperties.getProperty('VERIFY_TOKEN');

ベータ機能を有効にしてアップロード

Cluster Creator Kit Script はアップロードしないと動作しないのでアップロードして確認してみましょう。またベータ機能を有効にした状態でアップロードする必要があります。

unity のメニュー Clustr -> Setting を選択
ベータ機能にチェックをつけて有効にする
Clustr -> ワールドアップロードを選んで新規作成すると [bata] XXXX のワールド設定が作られる。
アップロードする

アプリでログを確認

clusterアプリを起動してアップロードしたワールドに行きログを確認してみましょう。

メニュー -> 歯車マーク
その他 -> ワールド,クリエイター向け機能欄のコンソールのスイッチをONにする
設定を閉じると画面右にコンソール欄が表示される
キューブをクリックすると GASと通信してレスポンス内容が表示される

まとめ

ここまでの記事内容で GAS へリクエストを送ってワールド内でレスポンスを受け取ることができるようになったはずです。サーバを用意せずに GAS でサーバ側のコードを記載できるのは手軽でいいはず。

次回は応用編でスプレッドシート対応や Google フォームから入力された内容を使うサンプルコードを説明してみようかなと思っています。