10分でアバターを作ってバーチャル会議をしよう

# はじめに

この記事を見てくれている方は，Vtuberやオンラインミーティングに興味があってもっといろいろ試してみたい！という人だと思います．
そこでこの記事では，**自分が作ったアバターを使ってバーチャル会議を主催/参加する**までを書いていきます．

![0622484b-a6a2-4b6c-9622-7e8d08a818ac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/49267783-d756-9675-ab5f-c3d1a22e946e.png)

この画像の状態まで10分で走り切ります．
読者のターゲットとしては，「専門的なことは分からんけどとりあえずバ美肉したい！」という層を想定しています．


# 利用するサービス

本記事で利用するサービスは以下の2つです．

## 1. cluster

![コメント 2020-06-14 164154.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/8f05199b-0fb2-3e21-8249-46802d6d5fe5.png)

>「cluster (クラスター)」は、スマートフォンやPC、VR機器など様々な環境からバーチャル空間に集ってイベントに参加したり、友達とコンテンツを楽しめるバーチャルSNSです。(公式サイトから引用: https://www.biz.cluster.mu/)

言わずと知れたバーチャルSNSです．
今回のバーチャル会議もclusterを利用していきます．

公式URL: https://cluster.mu/

## 2. REALITY

![コメント 2020-06-14 164333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/f93d714a-32bb-6596-f3c6-73ba15e3479f.png)

REALITYは「アバターを作る」「顔を認識してアバターを動かす」「ライブ配信する」などをスマホ1台で行うことができるアプリです．

このREALITYですが，2020年6月10日に「**clusterとのアバター連携機能**」がリリースされました．
今回はその機能を使っていきます．

さらに詳しい情報はYouTubeで紹介されています．
https://www.youtube.com/watch?v=8A1pCXhf0kY

公式URL: https://reality.wrightflyer.net/


# やってみる

それでは実際にやっていきます．
手順としては以下のような流れになっています．

1. clusterとREALITYをスマホにインストールする
2. REALITYでアバターを作る
3. clusterと連携する
4. イベントを作成して試してみる

順にみていきましょう．

## 1. clusterとREALITYをスマホにインストールする

今回使っていくアプリをインストールしましょう．

![cluster.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/2f61e0ff-114f-5d23-2cb0-c2581b585322.png)
![REALITY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/0273fa57-bcb8-d32d-5b49-df63e85401f3.png)


- iPhone はこっち
  - [cluster（クラスター）](https://apps.apple.com/jp/app/cluster-%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%BF%E3%83%BC/id1490075175)
  - [REALITY - バーチャルライブ配信アプリ](https://apps.apple.com/jp/app/reality-%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AB%E3%83%A9%E3%82%A4%E3%83%96%E9%85%8D%E4%BF%A1%E3%82%A2%E3%83%97%E3%83%AA/id1404176564)
- Android はこっち
  - [cluster（クラスター）](https://play.google.com/store/apps/details?id=mu.cluster.app)
  - [REALITY - バーチャルライブ配信アプリ](https://play.google.com/store/apps/details?id=net.wrightflyer.le.reality)


## 2. REALITYでアバターを作る

先ほどインストールしたREALITYで自分のアバターを作ります．
アプリを起動するとこのような画面になると思います．

<img width="375" alt="iOS の画像.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/ebba2038-b8d4-3eab-6ece-abf565d7fb2f.png">

ここでは，「アカウントを新規作成」でも他のSNSと連携させても問題ありません．
自分の好きな方法でREALITYに登録してください．

さらに操作画面に移動するとこのような画面になります．

<img width="375" alt="iOS の画像 (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/8e8e68d1-8463-3811-97c4-4aeb7d692a8c.png">

この画面で，赤丸で囲った洋服のアイコンをタップすると，アバターの見た目を編集することができます．

<img width="375" alt="iOS の画像 (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/ebe81c76-ca3c-37d5-9340-ab332f22a6ae.png">

編集は，髪型や瞳などなどかなりのレパートリーがあります．

<img width="375" alt="iOS の画像 (2).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/86103b46-092a-64af-962c-f9cbac54829a.png">

今回は髪型だけ変えました．

<img width="375" alt="iOS の画像 (3).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/35cf4f38-9ef0-7034-9857-7da4e94a0cf0.png">

このように，手軽にアバターを作ることができます．


## 3. clusterと連携する

先ほど作ったアバターをclusterで使えるようにします．
先述した**clusterとのアバター連携機能**を利用していきます．

まずはREALITYと同様にclusterに登録します．

<img width="375" alt="iOS の画像 (4).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/4fe9d79d-24d5-daf7-c9b2-0f45aa4397e8.png">

登録も済んでアプリを開くことができたら，「プロフィール」 → 「アバターを管理」と進んでいきます．

<img width="375" alt="iOS の画像 (5).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/d699c458-eb00-be2c-f7a4-84a8d720a7a7.png">

すると「REALITY連携」と出てくるのでタップします．

<img width="375" alt="iOS の画像 (6).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/7a7c3ae8-af07-a20c-9a35-de088db5296d.png">

この画面でトークンをコピーします．
写真では意図的に消していますが，灰色部分にアルファベットや数字がたくさん並んでいると思います．

<img width="375" alt="iOS の画像 (7).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/23d519d5-5b0c-2966-6aa7-b12f6951a96e.png">

次にREALITYを開き，右下のアイコン → 「NEXT REALITY」の順で進みます．

<img width="375" alt="iOS の画像 (8).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/141e490c-682c-86f5-a3d0-d056f0bad50f.png">

アバター連携の「cluster」をタップします．

<img width="375" alt="iOS の画像 (9).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/e6a4defd-59df-dedd-260e-96d2584f15d1.png">

「連携トークンを入力」と書かれているエリアに，先ほどコピーした文字列を張り付けて「アップロード」します．

<img width="375" alt="iOS の画像 (10).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/f221d86d-433a-59d7-4f5f-556845d4d5b3.png">

無事に終わればこのようなポップアップが出てきます．

<img width="375" alt="iOS の画像 (11).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/6bbddeb6-b24e-d478-2072-c55112a04728.png">

ここまで順調にできていれば，作ったアバターでclusterのイベントに参加することもできます．

<img width="375" alt="iOS の画像 (12).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/61c68678-7c6e-6012-88a5-b9516ce42404.png">
![iOS の画像 (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/c8d54ced-48ef-df37-e840-7c1f343efde3.png)

これはcluster公式の方で非常にわかりやすい手順を載せてくれているので，そちらも参考にしてみてください．

- [REALITY連携について – ヘルプセンター | cluster（クラスター）](https://clusterhelp.zendesk.com/hc/ja/articles/360044037491-REALITY%E9%80%A3%E6%90%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)


## 4. イベントを作成して試してみる

さいごに，clusterでイベントを作成しバーチャル会議を試してみます．
イベントを作成するために，[cluster](https://cluster.mu/)へアクセスします．

![コメント 2020-06-14 183124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/d30b11da-53b8-603a-c4d8-6de57300f049.png)

右上の「イベントを作成する」をクリックすると以下のような画面が出てきます．
今回は画像の設定でやっていきます．
入力したら「下書きを作成」をクリックします．

![コメント 2020-06-14 183308.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/7bfbaa77-becb-c63d-2663-11a07420acec.png)

この画面に遷移したら，右上の「作成して限定公開」をクリックします．

![コメント 2020-06-14 183533.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/396ededb-6c4e-0995-9665-10fd5e9b1b2a.png)

これで「**テスト バーチャル会議**」の世界ができました．
右下の「会場に入る」から入室することができます．

![コメント 2020-06-14 183657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/4d1d0898-ba8a-8648-8630-5058de2eddb5.png)

このとき，HTC VIVEなどのHMDを持っていればそれで入室することもできます．
ここに他のメンバーを招待すればバーチャル会議をすることができます．

![0622484b-a6a2-4b6c-9622-7e8d08a818ac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390881/49267783-d756-9675-ab5f-c3d1a22e946e.png)

# おわりに

できるだけ専門知識を必要としない文章で書きました．
clusterは，モバイルアプリでアクセスするのとHMDを使うのでは全く感覚が異なります．
ぜひVRヘッドセットを買って試してみてください．