hubsでVR時代に突入しよう

# hubsとは
未だ新しいことから、知る人ぞ知るMozilaが提供するオープンソースのVRプラットフォームです。
公式サイトは[こちら](https://hubs.mozilla.com/#/)

ただ公式サイトは現状英語のみの為、先日日本語版サイト「[digirooms](https://digi-rooms.com)」を弊社でオープンしました。
（先述の通り、hubsはオープンソースなのでどんどん開発に参加することが出来ます！
※開発中なので止まることがあるかもしれませんがご了承ください。）
今回はそちらを使って手順を説明させて頂きます。

要はFacebookのVR版みたいな感覚だと思いますが、
自分のアバターを用意してバーチャル空間に入り様々な人と実際に話したりしながらコミュニケーションが出来ます。

勿論、VR端末で動きますが<font color="Red">WEBブラウザで動作する</font>ことが特徴。
PCやスマホでも気軽にChromeやSafariなどのWebブラウザで動くので
すごく手軽なのが良いところだと思います。

この記事では、そんなhubsの特徴の紹介とざっくりとした使い方を紹介します。

こちらは先日、hubs内で開催されたXRTech名古屋さんによる勉強会の[動画](https://www.youtube.com/watch?v=jSHk0ai4RJk)のキャプチャです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/bff4aba1-0b4e-13dd-ada5-7c0c7e4f64d7.png)
大勢の人で複数のモニタを見ながら勉強会をしている様子がわかるかと思います。


# 何が出来るか（ざっくり）
### バーチャル空間で自由なコミュニケーションが取れる
VR端末を持っていなくてもPCやスマホで手軽に3D空間に入って、
なかにいる大勢のユーザー達と会話したりチャットしたりしてコミュニケーションが取れます。

バーチャル空間についてはデフォルトでも会議室や気軽なオープンスペースとなりえるものが多数用意されており、
数十名のユーザーが同時に同じ部屋で過ごすことが出来る為、
<font color="Red">オンライン上のイベントや勉強会</font>を開催することも可能です。
<font color="Red">昨今の情勢からリモートワークが叫ばれる世の中で、新たなコミュニケーションツールとしてこれからより一層注目を集めるのではないか</font>と思います。

# hubsの性格
既にいくつかのVRプラットフォームは提供されており、それぞれに特徴があります。
そのなかで見えてくるhubsの性格を説明したいと思います。

### 使い易さと機能のバランス感がとっても良い
これまでに他のVRプラットフォームを試してきたのですが、
高機能過ぎて使い方が複雑になり、元々PCオンラインゲームに慣れている様な人しか参加しづらいものや
使い易いけどもう少しコミュニケーションツールを充実出来ないかと感じたものもありました。

そこで今回紹介するhubsは本当に丁度いい。
ボタンもいたずらに多くないしすっきりした画面のなかで直感的に
サインイン⇒部屋を選択⇒アバターを選択⇒入室⇒音声会話、チャット会話、画面共有
という様な流れで動いていくことが出来ました。
加えて動画共有やペンによる描画、リアクション機能などもあり<font color="Red">コミュニケーションの幅は広い</font>です。

またWEBブラウザで動かすことが出来る為、専用ソフトなどをわざわざインストールする必要もなく
ただWEBサイトにアクセスする感覚で楽しむことが可能です。
私の様に、ぶっちゃけ現状ならVR端末よりPCの方が楽というか丁度いいわ、という人も結構いるのでは。。！！

つまり、<font color="Red">hubsは一般ユーザーが勉強会やカンファレンス用途で使うことに最適で、それ以外の余計の脚色が少ない</font>、というのが私の印象です。

# 対応デバイスについて
PCであれば、Windows、Mac、Linuxすべての環境で最近のブラウザであればほぼなんでも対応してくれます。
ただ、ブラウザについては、VR空間上の部屋を大量人数で共有していたときにはFirefoxが優秀な様です。Chromeだと何度も落ちてしまったのがFirefoxだとそうならない、ということが私自身ありました。

その他、スマホやVR端末も多く対応しています。
詳しくは[公式HP](https://support.mozilla.org/ja/kb/which-devices-can-i-use-join-hubs-room)にまとまっているので下記に引用します。
> 2D エクスペリエンス
hubs は、Windows, Mac, Linux 上のほとんどのモダンブラウザーで動作します。また、ほとんどの Android 向けのブラウザーや iOS 上の Safari でも動作します。

> VR エクスペリエンス
デスクトップ VR 向けの hubs は、WebVR 互換のブラウザー (つまり Firefox) を使用すれば動作します。ユーザーは、Oculus デスクトップアプリ (Oculus rift) または SteamVR (Windows Mixed Reality, HTC Vive) のどちらかをインストールしておく必要があります。

> スタンドアロンの VR デバイス (Pico Neo 2, Oculus Quest および Oculus Go) 向けの hubs は、Mozilla Firefox Reality Browser または Oculus Browser で動作します。

> Samsung Gear や Google Cardboard などの VR システムによるモバイル端末は、Google Chrome ブラウザーを使用して動作します。

# 早速、使ってみよう！（PC編）
善は急げ、とやかく言う前に体験してみましょう！
チュートリアルとして、
１．サインインして部屋に入る
２．知人を自分の部屋に招待してコミュニケーションを取る
３．部屋のなかで出来る基本機能
ということをやってみましょう！

今回は先述しました弊社でオープンしている日本語版サイト「digirooms」を使って説明させて頂きます。

### 部屋に入る
１．  弊社日本語版WEBサイト「digirooms」にアクセス
https://digi-rooms.com

２． サインインする
画面右上にあるサインインという文字をクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/298b03d2-465c-8eb7-2fd9-823aa947bd0a.png)



下記の様な入力画面が出てくるので、ご自身のEメールアドレスを入力して、ボタン「next」を押下して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/4a833e15-11c7-677c-9e5a-d11994973bf6.png)



これで確認メールが入力したEメールアドレスに送信されます（メールが届くまで5分ほどかかるときがありますのでご了承下さい）。

メールを有効化する
メールボックスを開くと、「digirooms」という名前でメールが来ているのでそのメールを開いて下さい。
下記の様な英文になっていますので、この本文にあるURLリンクをクリックして下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/57379b62-48d2-8b51-f19a-cb6ad3519569.png)


すると自動的にWEBサイトに飛び、下記画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/e34b00a2-2b88-8315-45fa-086a301af6e7.png)
これでメールが有効化されました。

当該URLを再読み込みするか、タブを閉じて、もう一度当該WEBサイトのURLにアクセスすると、
下記の様に、右上にサインインに利用した自分のメールアドレスが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/928b246c-50ca-948a-d6de-03bbcf1cd545.png)


３． 部屋を作成する
画面真ん中のボタン「部屋を作成」をクリックすると下記の様な画面が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/771d4891-6854-ec95-fd9c-a07ac4b77929.png)

背景に移っているシーンは異なっているかもしれませんが問題ありません。
画面上部のボタン「シーンを選択する」から自由に変更が可能です。
まずはデフォルトのままで結構ですので、そのままボタン「部屋に入る」を押下して下さい。

初回のサインインの場合、下記の様なアバター設定画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/039467b7-ea06-7b56-a691-6a1e91d6cee7.png)

VR空間内での自分の名前を入力し、好きなアバターを選択してボタン「承諾」を押下して下さい。
設定後もアバターは簡単に変更が出来ますので気楽に選んでもらって大丈夫です。

すると下記の様な画面が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/fb989f2b-afbf-16b1-2afd-908e25203935.png)
今回はそのままボタン「入室：デスクトップスクリーン」を押下しましょう。

下記の様な画面が出てきて、マイクとオーディオ出力の確認をされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/9f7c839c-e6c3-85ed-b527-9b4fe7044de3.png)
問題無ければそのままボタン「Enter Now」を押下して下さい。

これで部屋に入れました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/3d22252e-7f71-bcef-face-f66931268bdd.png)
矢印キーを使って移動したり、同じ部屋にいる人と会話したりすることが可能です。
まずはとにかくがちゃがちゃ触ってみましょう！

### 友達を自分の部屋に招待しよう！
hubsでは自由に部屋を作ることが出来ますが、
その部屋を誰かと共有できなければ意味がありませんね。

手順として、まずは画面上部の「シェア」ボタンを押下します。
すると下記の様な画面が出てくるので、このリンクをコピーして招待したい友達にそのURLを教えてあげましょう。
ボタン「ツイート」を押下すれば、Twitterからその部屋情報を投稿して知らせることも出来ます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/3af041b5-d31e-f1b3-92a8-526fa639062b.png)


後は友達に自身のWEBブラウザ（ここでは敢えてFirefox）から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/2a8f0bab-688d-3718-7dbf-6c66af3a0fd6.png)

上記の様にそのURLを入力してアクセスすれば一発でその部屋までいけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/2c914793-d5e8-0a13-6701-5b927ebdb693.png)
あとはボタン「部屋に入る」を押下してそのまま進めていけば、サインインする必要なく入室することが出来ます！
下記が入室後の画面。見事に友達の画面から自分が見えています↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/ea473ba6-b3a8-6855-c588-617bd7873b80.png)


自分の画面からも友達が見えています↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/33402072-f5a1-86a5-c94f-01a08a1e21d6.png)


すばらしく簡単ですね。
勉強会など、多人数を一斉にオープンに招待するのであればTwitterで投稿してしまえば、
ほぼ手間が無いかと思います。

では、次にはこのVR空間内でコミュニケーションを取るにあたっての基本的機能～便利機能迄紹介します。

### VR空間でのコミュニケーションツール紹介
#### 会話
デフォルトの設定では、部屋に入ってきたときにはマイクはミュートされています。
ミュート状態↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/763b1970-3f35-8f50-75b7-72190dcd2fd6.png)


会話の際には、画面上部中央のマイクアイコンをクリックすると会話が出来ます。
マイク有効状態↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/faeb31fa-635a-d281-c7aa-684c113b9e10.png)



#### チャット
画面下部から自由にメッセージを書けます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/49f51086-87b2-80f3-c5c1-11424836c57a.png)
送信すると下記の「ポこん」と爽やかな音が鳴って下記の様に表示されます。
勿論同じ部屋にいる人全員から見えます。そして約20秒くらいでメッセージがフェードアウトして消えます。
この消えたメッセージ、現状、後からは見れないのですかね。。
もしくは消える迄の時間も設定出来るといいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/6471de49-74da-74cf-3b1e-f0ce614b51a4.png)

#### リアクション
勉強会などの一対多の場であるとき、講演者にとって一番ストレスになるのが皆の反応が見えないことですよね。
折角話しかけても何も見えない、聞こえない、という時間はやがて不安となって雪の様に降り積もり人の心をガチガチにしてしまうことは想像に難くありません。
ただ、聞いている側もいちいちリアクションのメッセージを送るのは気兼ねするということもあります。

それをコミカルに解決してくれるのがこのリアクション機能。
スペースキーを押下するとユニークなアイコンが画面下部に複数表示されます。
そこから自分の気分にあったものを選び、リアクションしてあげましょう。
＜拍手＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/9fc48987-b3ef-7852-2c7c-8cd338833253.png)

＜笑顔＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/46c102de-1598-32bc-8152-393d6213bee5.png)

＜ハート＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/d9697d07-4a3c-57fa-986a-9e7b041f4fc6.png)


#### メディア共有
画面下部のチャット入力エリアの右の方にあるペン形のアイコン↓↓をクリックすると、URLから動画がバンバンこの部屋に放り込めます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/463d59a5-cf8c-d4a3-3395-16c074e64ff3.png)
下記の様な画面が出てくるので、（すみません、残念ながらまだ英語なのですが）ここは試しにYoutubeの動画ページのURL貼って、ボタン「Create」を押下してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/9f8ba7d6-5b45-ee11-b23f-26a0d4fd7e2d.png)

試しにYouTubeから3Dモーションキャプチャ説明動画のURL ⇒ https://www.youtube.com/watch?v=L0ieoaOD6Po
をコピーして（ナチュラルに自社製品のCM）

貼る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/ea2345ad-78f7-ebec-237e-bb1acd17de20.png)


数秒ほど待つと動画が流れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/fa93ef32-49e5-0f95-2384-5fbdc3de084c.png)


しかも動画にカーソル合わせるとコントロール出てくるので、音量調整したりが簡単にできます。
加えてドラッグアンドドロップでこの動画オブジェクトを自由に動かせるのもすごくいいところだと思います。

また画面右上の箱が積みあがった様な形をしているアイコン↓↓をクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/ff606501-9a69-7ffc-8218-473c19e041f5.png)
下記の様なメニューが表示され↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/2fec2759-dc25-3eb5-9ad2-3789500e155f.png)

「GO TO」を押下すると、選択したメディアの真ん前のとても見やすい場所に移動してくれます！↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/6e0f79e8-8e4e-f8cc-3d16-aafa223fcb85.png)






このような形で画像など様々なメディアがURLから引っ張りだせます。
コミュニケーションの一環にメディアを共有することは頻繁にあるのでこれは重宝するのではないでしょうか。

#### 画面共有
勉強会などで自分のPCやブラウザの画面を共有してリアルタイムに画面を更新しながら説明出来るとすごく便利ですよね！
PowerPointや実際のプログラムのコードを見ながらの説明には重宝出来る機能がhubsには備わっています！
画面上部のPCディスプレイ型のアイコン↓↓をクリックして下さい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/f778f7ba-e740-aa33-5109-026d7e110b46.png)

すると下記の様に、共有したい画面を選択を促されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/c0c00765-3276-f9c6-4fe1-928799459e8a.png)
選択対象としては、
・PCディスプレイ毎
・アプリケーションウィンドウ毎
・Webブラウザのタブ毎
の選択が可能です。
また左下のチェックボックス「音声を共有する」にチェックを入れると音声も共有可能です。
では、試しにアプリケーションウィンドウタブからPower Pointを共有してみましょう。
共有したいタブを選択してボタン「共有」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/e93acee5-9e8c-a833-395b-5d42e588b3c7.png)


すると共有画面が部屋に登場しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/1d2ed1b2-1315-647b-beec-adec5d1cb336.png)

先ほどの動画と同様にドラッグ＆ドロップで画面を動かすことも出来ます。
このパワポにカーソルを合わせて右クリックするとパワポが全画面表示になります。

またパワポにカーソルを合わせるとペンアイコンが表示されますが、それをクリックするとなんとそのオブジェクトのスクショを撮ってくれます。これをクリック一つで出来るのはありがたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/2d531fea-8c4a-b671-ec95-a3a577525870.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/58e0c791-fdf8-3cfa-d656-dacceedaab7d.png)


#### ペンで書く
マウスを使って自由に文字を書けます。
画面上部の鉛筆アイコンをクリック↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/50bd2fed-34c2-894c-ec91-c1a81fd7140c.png)

こんな感じで↓↓自由に字が書けます↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/35dbcf51-0163-394e-32ab-bd3a2e96b977.png)


#### カメラ
画面上部の右にあるカメラアイコンをクリックすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/a2c187dd-ad8a-a182-e434-d6c6ca9e2613.png)

下記の様なカメラが現れ、画像や動画に収めることが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/85b59734-a539-34f5-a94a-e688dbd29ece.png)
カメラの上部に自身のアバター（パンダ）が見えていますね。
これでカメラアイコンをクリックしてみると、、
3,2,1 と表示を刻んでから撮影音がして写真が撮れました↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/3d53fec9-2259-2de6-72a8-0765943f59d3.png)
この写真にカーソルを合わせるとTweetボタンも出てきますね！
バーチャル飲み会などではこういった機能で記念撮影会とかバンバンありそうです。


# 最後に
このページではざっとhubsの概要と基本機能を説明させて頂きましたが、
他にも部屋を作成してイベントを開いたり、
アバターを自分で作成したりと出来ることはまだまだたくさんあります。
また、まだ新しいということもあり、要望としてここはもう少しこうして欲しいというところも散見されるのが実情です。

ただオープンソースであることから、これからもどんどん進化してくると思われます。
なので今後もより多方面からより深い内容で新たな記事を書いてくつもりです。