この記事は202406アドベントカレンダー14日目の記事となります。
【VR未経験エンジニアがメタバースでのWEB申込を実現するための挑戦】シリーズの第3弾として、保険のWeb申込システムをPoCしていたチームが、メタバースプラットフォームのCluster上にWeb申込画面を再現する取り組みを記事にまとめていきます。
前回の記事はこちらです。
まずはclusterを触ってみよう
前回の記事では、clusterで開発をすることに決定しました。
環境構築の前に実際にclusterをインストールして動かしてみましょう。

clusterは基本無料で誰でも気軽に始めることができます。
clusterのポータルには個人や企業が作成したワールドが公開されているため、気になるワールドがあればぜひ覗いてみてみることをおすすめします。

ワールドをアップロードしてみよう
clusterでは自作のワールドをアップロードして遊ぶことができます。
ここでは、環境の準備からワールドの作成、アップロードまでの手順をご紹介します。
Cluster Creator Kitの導入
clusterではワールドの作成のためにUnityを使用します。
cluster公式ページにインストール手順が公開されているため、そちらを確認してUnityとCluster Creator Kitを導入しましょう。
続いて、clusterが公開しているサンプルプロジェクトを導入しましょう。
こちらも公式ドキュメントに公開されていますので手順に従ってください。

サンプルプロジェクトがUnity上で開けたら、シーンを選び、公式ドキュメントの手順に従ってアップロードをしてみましょう。

ワールドのサムネイル画像の設定が必須のため、画像を設定するとアップロードボタンが活性化します。
Cluster Creator Kitの使い方
ここではCluster Creator Kitの簡単な説明をします。
Unityエディターの左側Hierarchyにオブジェクトを作成します。

オブジェクトが追加できたら、右側Inspector内の「Add Component」を押して、
TextViewを追加してみましょう。

Text Viewを追加すると、画面上に文字が表示できるようになります。
文字を編集するにはInspectorのText内を編集します。

このような流れでオブジェクトを配置してAdd Componentでcluster内の機能を追加していく形になります。
clusterには様々なコンポーネントが用意されていますが、それはまた別の記事でご紹介します。
clusterワールドをUnity上でテストする方法
clusterは、Unity標準のC#スクリプトは動作せず、clusterが提供するClusterScriptを使います。
ClusterScriptはjavaScriptで記述します。
ClusterScriptは通常Unityの再生モードで実行できないため、CSEmulatorを導入してUnity上で挙動を確認できるようにしておきましょう。使い方も配布サイト内に記載してあります。
(CSEmulatorのダウンロードにはpixivアカウントが必要になります。)

ClusterScriptを外部エディタで書くには?
ClusterScriptはUnity上からだと、とても読みにくいです。

そのため、VSCode等の外部エディタを使ってコーディングするのをおすすめします。
cluster公式からClusterScriptの型定義が提供されているので、コマンドラインでスクリプトを格納したいディレクトリまで遷移し、npmでインストールします。
npm i @clustervr/cluster-script-types
スクリプトを格納するディレクトリは、Assets外に作成してください。

作成したJavaScriptファイルはAssets配下に持っていけばUnity上から参照できるようになります。webpack等のバンドラを使用することもできるので、ファイルの分割やminifyすることも可能です。


リソース管理について
複数人で開発をする場合は、Git等のリソース管理を導入することをおすすめします。
Unity用の.gitignoreが公開されているので、こちらを適宜編集して使用してください。
開発中のワールドを公開したくない場合
clusterにはテストアップロードという機能があり、ワールドをアップロードする際にテストアップロードを選択すれば、clusterアプリ内の開発者メニューからテスト環境で動作させることが可能です。
新しいワールドをアップロードする場合はテスト用アップロードのボタンが表示されません。
一度アップロード済のワールドで試してみてください。
テスト用アップロードの場合は、テストするデバイスのOSに応じてアップロードするデバイスを選択しましょう。




まとめ
今回はclusterのワールドを構築するための環境構築についてご紹介しました。
この記事がclusterのワールドを作ってみたい方の参考になれば幸いです。
次の記事では「clusterでワールドを作成する上での制約」についてご紹介します!