Visual Analogue Scale（VAS）をUnityで作成してみた．

# はじめに
この記事では、Unityを使ってVASをデジタル化し，オンラインでの使用に適した形で実装したことについて書きます．
VASでは主観的評価を測定する際に有効であるそうですが，基本的な手順として，紙で回答してもらった後に定規などで距離を測り，Excelにデータを入力する必要があります．
そこで今回はUnityで回答してもらい，その結果をcsvファイルに書き込み，すぐにExcelで分析できるようにしました．

:::note warn
警告
専門家ではないので間違いを含んでいる可能性もございます．
ご了承ください．
:::

# Visual Analogue Scale（VAS）とは
Visual Analogue Scale（VAS）は，医療・心理学・市場調査などの分野で使用される，感覚や感情の度合いを測定するためのツールです．病院などでは，紙に線形のスケールを書いて，患者さん自身にどの程度の痛みを感じているか線を引いてもらうことで，痛みを評価しているそうです．
具体的な調査方法としては，線形の両極端に，一端が「0%:全くない」を示し，もう一端を「100%:最大限」を示します．
メリットとして，被験者の回答がカテゴリーラベルの解釈に影響されないことや，データを間隔尺度として扱うことが挙げられます．

# 完成後の実行例
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/0442cb40-6d1e-1dd7-0f51-913f5f343cc0.gif)

## 出力したcsvファイル
![スクリーンショット 2024-06-22 14.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/df3a5f57-042a-8daa-d1f0-bda35441b64c.png)



# 必要なツールと前提知識
・Unity 2022.3.0f1
・基本的なUnityの操作
・~~C#の知識~~（scriptをそのまま載せているので特に必要はないかもです）


# ステップ1: Unityプロジェクトの準備

Unity Hubを開き，「新規プロジェクトの作成」をクリックして，3Dテンプレートを選択します．プロジェクト名と保存場所を設定し，「作成」ボタンをクリックして新しいプロジェクトを開始します．

![スクリーンショット 2024-06-22 13.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/9f3dc160-9a1e-f36f-608b-fe53fd9f5065.png)


# ステップ2: Hierarchyにオブジェクトを追加
1.	Hierarchyウィンドウで右クリックし，「UI」→「Canvas」を選択してCanvasを追加します．
1.	Canvasを追加後に，Canvasの子オブジェクトとして，以下を追加します．

- 「UI」→「InputField」
- 「UI」→「Button」
- 「UI」→「Slider」×2
- 「UI」→「Text」×4
Hierarchy画面が以下のようになっていれば大丈夫です．
![スクリーンショット 2024-06-22 14.24.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/e3b3a2c3-f8fa-4119-9813-29a10c8207d0.png)

# ステップ3：画面UIの変更
Hierarchyにオブジェクトを追加した後は，Scene画面でそれぞれのオブジェクトの位置を調整してきます．
この部分は個人の好みに合わせて，配置していただければ問題ないです．
![スクリーンショット 2024-06-22 14.24.34のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/09c41f1e-4eb5-86c1-0005-6398b8e5d8ed.png)

# ステップ4：実験環境の整備
### テキスト内容の変更
「Text」を追加した状態では，「New Text」と表示されています．
TextのInspectorから，Text部分を実験中の質問内容に合わせて変更します．
![スクリーンショット 2024-06-22 14.38.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/6d7b33c4-cc1d-3f2e-ec11-6a535bec71c4.png)
この作業を追加したTextオブジェクト全てで行います．

### Sliderの変更
![スクリーンショット 2024-06-22 15.52.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/0741d5eb-fe44-967f-4820-2d2828bafd0b.png)

最小値と最大値の値を設定します．
Min Valueが最小値で今回は「0」です．
Max Valueが最大値で今回は「10」で設定しています．
もしもデータを集める際に，整数のみ扱いたい場合は，Sliderの「Whole Numbers」にチェックすれば結果が整数のみで出力されます．


### InputFieldの変更
InputFieldでは，実験参加者の名前やIDを入力することを想定しています．
「InputField」の子オブジェクトにある「Placeholder」のInspector画面からTextの部分を変更します．
Placeholderは，入力画面に灰色で元々設定しておくことのできるテキストです．

![スクリーンショット 2024-06-22 14.41.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/ce55e2f0-26b3-1f78-eb23-ff2b2b3445b0.png)

### Buttonの変更
![スクリーンショット 2024-06-22 15.54.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/6ffb10e6-96be-b5c7-1ec2-e92a550a85cd.png)
Buttonの子オブジェクトにあるTextの内容を変更すると，Button上に表示される文字が変更されます．

### Cameraの変更
![スクリーンショット 2024-06-22 15.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/4312b7d1-0f7e-9327-9b66-4fd25c466824.png)
実行中(アンケート回答中)は，背景が白の方が良いかと思いますので，Cameraの設定を変更します．
初期設定では，「Skybox」になっているClear Flagsを「Solid Color」に変更し，Backgroundの色を白を指定します．
ここは好みに合わせて変更して頂いても問題ないです．


# ステップ5: スクリプトの作成
1.	「Assets」フォルダ内に新しいC#スクリプトを作成し，「DataCollector」という名前をつけます．
1.	以下のスクリプトを記述して，スライダーの値を収集し，CSVファイルに保存する機能を実装します．

~~~c#
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
using System.IO;
using System.Text;

public class DataCollector : MonoBehaviour
{
    public InputField participantIdField;
    public Slider vasSlider1; // 1つ目のスライダー
    public Slider vasSlider2; // 2つ目のスライダー
    private List<string> dataLines = new List<string>();

    public void SaveData()
    {
        string participantId = participantIdField.text;
        float vasScore1 = vasSlider1.value; // 1つ目のスライダーの値
        float vasScore2 = vasSlider2.value; // 2つ目のスライダーの値

        // 小数点第2位で四捨五入
        string formattedScore1 = vasScore1.ToString("F1");
        string formattedScore2 = vasScore2.ToString("F1");

        string dataLine = "ID," + participantId + ",質問1," + formattedScore1 + ",質問2," + formattedScore2;
        dataLines.Add(dataLine);

        Debug.Log(dataLine);

        // 入力フィールドとスライダーのリセット
        participantIdField.text = "";
        vasSlider1.value = 0;
        vasSlider2.value = 0;
        Debug.Log("値を保存しました．");
    }

    public void WriteToCSV()
    {
        string filePath = "/Users/ユーザ名/Downloads/experiment_data.csv"; // ファイルパス&出力するファイル名を指定
        //Excelで開いた際に文字化けしないように対策
        using (StreamWriter writer = new StreamWriter(filePath, true, Encoding.GetEncoding("shift_jis")))
        {
            foreach (string line in dataLines)
            {
                writer.WriteLine(line);
            }
            dataLines.Clear(); // データを書き込んだ後はリストをクリア
        }
    }

    void OnApplicationQuit()
    {
        WriteToCSV();
        Debug.Log("ファイルに書き込みました．");
    }
}
~~~

# ステップ6：スクリプトのアタッチとButton変更
先ほどのスクリプトを作成したら，CanvasにDataCollectorスクリプトをアタッチします．
![スクリーンショット 2024-06-22 16.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/ee860cee-cabb-e5d6-8e4a-6f2a05e52d3f.png)

participant Id Fieldに，「InputField」
vas Slider1,2にそれぞれ「Slider」を設定します．

ButtonオブジェクトのInspectorにOnClick()というのがあります．
これはボタンが押下された際に実行する関数を登録することができます．
今回はスクリプトがアタッチされている「Canvas」を設定し，関数はSavaData()を選択します．
![スクリーンショット 2024-06-22 16.15.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/cc80fda2-7288-782f-c9a4-12e132422370.png)
![スクリーンショット 2024-06-22 16.15.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/ed015659-dfb3-1dc8-1f4d-d2fc0b7b53d1.png)

これで，ボタンが押下された際にSaveData関数が実行され，値が保存されます．


# ステップ7: データの保存とテスト
1.	Unityエディタでプレイモードを開始し，スライダーを動かして値を設定します．
1.	ボタンをクリックして，プロジェクトの実行を止めると値がCSVファイルに保存されます．
1.	指定された場所にCSVファイルが保存されていることを確認します．

# 出力結果の確認
Excelにデータが保存されていたら無事に完成です．
今回作成したスクリプトでは，回答後1行ずつ追加されるようになっていますので，不要なデータがある場合は，Excelで行を削除してから，次のデータを保存するようにしてください．
![スクリーンショット 2024-06-22 14.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1776719/21e279d9-b402-3d9a-2033-897a4de678f9.png)


# 終わりに
UnityでVASを実装することで，VR系の研究を行っている方は，実験後にプロジェクトを変更することなく，アンケート回答ができるようになります．
効率化につながると思いますので，ぜひ興味のある方は試してください．

以上です．最後までお読みいただきありがとうございます．