サイト内を検索する
2024年09月07日 - メタバース

clusterのスクリプト入門(1)

clusterはスクリプトを使用してワールド内に様々なギミックを制作することができます。そこで、clusterのスクリプトを試しました。

スクリプトとは

スクリプトは、コンピュータに特定の動作を指示するための簡易的なプログラム言語のことで、clusterで使用できるスクリプトはJavaScriptです。clusterでは、スクリプトを使ってワールド内のオブジェクトを動かしたり、オブジェクトにインタラクションを追加したりすることができます。

JavaScriptの基本

JavaScriptは、Webサイトの制作やシステム開発などで使用されているスクリプト言語です。JavaScriptの基本的な構成要素としては、変数の宣言、関数の定義、そしてその関数の実行があげられます。


//変数の宣言
let txt = 'Hello World!';

//関数の定義
function message(){
    console.log(txt);
}

//関数の実行
message();

コメント

コメントは、スクリプトとして実行されないテキストのことで、ソースコードの説明などを記述するさいに使用します。


//コメント

変数

変数はデータを一時的に格納するための箱のようなものです。「=」は数学の等号ではなく、変数に値を代入することを意味します。変数を宣言するには「let」を使用し、宣言した変数には後から値を再代入することができます。また、変数は宣言されたブロックスコープ内（{}で囲まれた部分）でのみ有効です。


//変数の宣言
let txt = 'Hello World!';

定数

定数を宣言するには「const」を使用します。定数は一度値を設定すると再代入できず、宣言時に必ず初期化が必要です。変数と同様に、定数も宣言されたブロックスコープ内（{}で囲まれた部分）でのみ有効です。


//定数の宣言
const pi = 3.14159;

データ型

JavaScriptは、さまざまな種類のデータを扱うことができます。数値は整数だけでなく、小数点を含む数値も扱えます。また、文字列、論理値（true、false）、オブジェクト、配列なども扱うことができます。これらのデータの種類はデータ型と呼ばれます。


//数値
let time = 1.5;

//文字列
let country = '日本';

演算子

演算子は、数値計算やテキストの連結などを行うための記号です。JavaScriptでは、加算「+」、減算「-」、乗算「*」、除算「/」などの算術演算子を使って数値計算を行えます。また、加算演算子「+」を使ってテキストをつなげることも可能です。他にも、比較演算子「==、!=、>、<」や論理演算子「&&、||」などがあります。


//数値計算
let result = (100 + 50) * 0.5;

//テキストの連結
let txt = 'Apple Vision Pro' + 'が日本で発売されました！';

関数

関数は、一連の処理をまとめて定義し、必要に応じて何度でも呼び出すことができる機能です。関数には、あらかじめ定義されているものと、自分で作成できるユーザー定義関数があります。ユーザー定義関数は「function」を使って定義し、名前をつけて識別します。これらの関数は引数を受け取り、処理結果を返すことも可能です。
例えば、下記は引数として名前を受け取り、コンソールに挨拶を表示する関数の例です。


//関数の定義
function message(name){ 
    console.log('Hello ' + name);
}

//関数の実行
message('Taro');

コンソール

コンソールは、メッセージや変数の値を表示するための関数です。プログラムの動作を確認したり、エラーを特定したりするさいに使用します。


console.log('Hello World!');

条件文

条件文は、プログラムの実行中に条件が満たされた場合にのみ、特定のコードを実行します。最も基本的な条件文はif文で、条件がtrueの場合にのみ、指定されたコードが実行されます。


if(条件){
    //条件がtrueの場合に実行されるコード
}

例えば、変数xが10以上かどうかをチェックする場合、次のように書きます。


let x = 15;

if(x >= 10){
    console.log('xは10以上です');
}

条件がfalseの場合に実行されるコードを指定するには、else文を使用します。


let x = 5;

if(x >= 10){
    console.log('xは10以上です');
}else{
    console.log('xは10未満です');
}

スクリプトの例

JavaScriptには他にもさまざまな機能がありますが、例えば、ワールドの訪問回数によってメッセージを変えるJavaScriptは下記のようになります。


//変数の宣言
let username = '太郎';
let visitnum = 3;

//関数の定義
function message(num){
   //変数の初期化
   let msg = '';

   //条件文
   if(num == 0){
      msg = '初めて訪問、ありがとうございます！';
   }else if(num >= 1){
      msg = num + '回目の訪問、ありがとうございます！';
   }

   //テキストの連結
   let txt = username + 'さん、' + msg;

   //コンソールに表示
   console.log(txt);
}

//関数の実行
message(visitnum);

clusterでスクリプトを実行するための基本手順

clusterのスクリプトはUnity上では動作しません。スクリプトの動作確認をするには、ワールドをアップロードしてcluster上で確認する必要があります。

制作環境構築

clusterのワールド制作環境を構築します。
シーンはMinmalSampleを使用します。
詳細は下記を参考にしてください。

「Scriptable Item」コンポーネント

clusterのスクリプトは、「Scriptable Item」コンポーネントを使用して記述します。

トップバーの「ゲームオブジェクト > 3Dオブジェクト > スフィア」をクリックして、球体を追加します。球体のインスペクタの「コンポーネントを追加」をクリックして、「Scriptable Item」を追加します。スクリプトは「Scriptable Item」の「Source Code」に記述します。

clusterのコンソール

JavaScriptのコンソール関数は「console.log()」でしたが、clusterでは「$.log()」です。


$.log('Hello World');

clusterのスクリプトはJavaScriptを使用していますが、若干の違いがあるため、詳細については下記リファレンスを参考にしてください。

スクリプトを記述したらワールドをアップロードします。

動作確認

clusterでスクリプトの動作確認をします。clusterを立ち上げて、設定で「その他 > デベロッパーメニュー」をオンにします。すると、コンソールに「Hello World」と表示されます。

テキストエディタの使用

スクリプトは、Visual Studio Codeなどのテキストエディタを使用して記述した方が、コードが色分けされて見やすく、入力補完機能が使用できるため便利です。Visual Studio Codeでスクリプトを記述し、任意の場所に保存します。ファイル名は任意で構いませんが、「greet.js」など拡張子は「.js」にします。

保存したJavaScriptファイルを、「Scriptable Item」の「Source Code Asset」に設定します。

ワールドをアップロードして、clusterで確認するとコンソールに挨拶文が表示されました。