どうも、まさとらん（@0310lan）です！
今回は、Mozillaが提供する仮想世界を自ら作り上げることができる無料のWebサービスをご紹介します！
ブラウザからアクセスするだけで誰でも簡単に使うことが可能なうえ、Unityライクな操作感で3Dモデルを配置していくことができます。
さらに、友人・知人を招待して自分が作った仮想世界の中で遊ぶことも可能なので、ご興味ある方はぜひ参考にしてみてください！
【 Spoke 】
■「Spoke」の使い方
それでは、Spokeがどのようなサービスなのか詳しく見ていきましょう！
まず最初にトップページにある【Get Started】ボタンをクリックします。
（※この時点ではユーザー登録などは不要です）
テンプレートの選択画面が表示されます。
今回は、画面を下の方向へスクロールすると表示される【新規プロジェクト】の作成ボタンをクリックしてみましょう。
すると、Spokeのオンラインエディタが起動します！
このビジュアルエディタを利用して、VR空間を好きなようにデザイン・構築していくことができるわけです。操作感は、なんとなくゲームエンジンのUnityに似ているのが特徴でしょう。
■Spokeエディタの使い方
Spokeのオンラインエディタですが、画面の構成は以下のように大きく3つに分けることができます。
3つの画面は、簡単にまとめると以下のような特徴があります。
- 【プレビュー】作成中の仮想世界を表示
- 【ヒエラルキー】空間内に配置したオブジェクトの構成
- 【プロパティ】各オブジェクトの詳細設定
プレビュー画面はマウス操作で空間内を自由に見回ることが可能で、【W, E, R】キーを押すことでオブジェクトを移動・回転・拡大・縮小させることもできます。
また、プレビュー画面の下段にはさらに詳細なメニューが提供されています。
このメニューから、仮想世界を自由にデザインするためのオブジェクトを配置したり、外部ファイルの読み込みやライティングの調整などが可能になります。
たとえば、パーティクルエンジンを利用した高度な演出も簡単に実現できます。
これを利用すると、雨や雪などの天候を表現したり水や煙などを効果的に配置することができます。
また、画像や動画などをオブジェクトに貼り付けて楽しむことも可能です。
動画はYouTubeやTwitchなどのリンクを貼り付けたり、搭載されている検索エンジンから探して挿入することができます。
また、手持ちの3Dモデルが無くてもSketchfabやGoogle Polyなどから、ドラッグ＆ドロップで仮想世界に配置する機能も提供されています。
このライブラリには膨大な量の3Dモデルが存在しているので、検索するだけで必要な素材は入手できるでしょう。
ライティングに関しても、空間全体を照らすものからスポット的に光を当てるものまで幅広くそろっています。
このようなエディタ機能を活用することで、自分の思い描いている空間を簡単に作り出すことができます。
たとえば、プレゼン会場のような空間を作り出して、複数人とオンラインでミーティングするような使い方もできるでしょう。
または、無人島のような空間を作って、VRゲームのように遊ぶこともできるわけです。
自由な発想で好きな世界を構築できるのは、想像しているよりずっと楽しい作業になるでしょう。
■Hubsと連携したVRチャットの実現
Spokeには先進的な機能がたくさん搭載されているのですが、なかでも特にユニークな機能が【Hubs】です。
これは、自分が作った仮想世界にPC・スマホ・VRヘッドセットなどから入り込んで、複数人と空間を共有しながらボイスチャットなどを楽しめる機能になります。つまり、自分の世界に不特定多数の人を招待して遊べる機能というわけですね。
Hubsを利用するのは簡単で、最初にSpokeのオンラインエディタ上にある【Publish】ボタンをクリックします。
まだユーザー登録をしてない場合は、ここでメールアドレスを入力して登録しておきましょう。
書き出し画面が表示されるので、プロジェクトの名称などを入力してから【Save and Publish】ボタンをクリックしましょう。
すると、【View Your Scene】と書かれたボタンが表示されるのでクリックします。
これでHubsと連携することができました！（自分の作った仮想世界が背景に表示されていると思います）
画面の中央に配置されている赤いボタンをクリックすることで、仮想世界に入ることができます。
PC・スマホ・VRヘッドセットなど、いずれかのデバイスが利用できるのですが、まずはPCを使ってみましょう。
【Enter Room】ボタンが表示されたらクリックしましょう。
仮想世界で利用する自分のアバターを選択します。
アバターはいくつか種類があるので、好きなものを選択しましょう。
ボイスチャットをするためのマイク設定をしておきます。
（※マイクはミュートにすることも可能です）
すると、ブラウザの画面いっぱいにさきほど自分が作成した仮想世界が広がっているのが分かります。
マウスやキーボードを利用して空間内を自由に動き回ることができます。
また、マウスの右ボタンを押しながら【W,A,S,D】キー押すことで、仮想世界を飛行しながら移動することも可能です。ボイスチャットにも対応しているので、PCやスマホのマイクを利用して話すこともできるし、テキストによるチャットもできます。
■複数人で仮想世界を共有
さて、自分の作った空間に入ることができたら、次は友人・知人を招待してみましょう！
もっとも簡単な招待方法は、画面上部にある【share】ボタンをクリックすることです。同時に6桁の数字も表示されるのでメモしておきましょう！
さきほどはPCを使ったので、今度はスマホを使ってみましょう！
スマホのブラウザから【hub.link】にアクセスして、メモした数字の番号を入力します。
あとは、同じように【Enter Room】ボタンから仮想世界に入ることができます。
スマホでも同じように空間内を動き回ることが可能です！
画面奥に見えているアバターは、さきほどPCから入った私ですね。
また、ジャイロセンサーにも対応しているので、スマホを動かすだけで視点変更ができるのは便利でしょう。
もちろん、VRヘッドセットから入るときも同じようにブラウザから設定することができます。Oculus Questなど、ほとんどの端末に対応しているのも特徴的です。
このように番号を共有するだけなので、デバイスを問わず誰でも招待できるのが大きな魅力でしょう。この特徴を生かして、巨大な仮想イベント会場を作って不特定多数のユーザーを集めたり、勉強会や会議などさまざまな用途に活用できます。
■VRでのリッチ体験について
SpokeはVRヘッドセットを持っていない人でも、PC・スマホを使って簡単に仮想世界を体験できる素晴らしいサービスです。ただ、VRヘッドセットを使うと楽しさは倍増するので、そのあたりの体験について少し紹介しておきます。
VRヘッドセットで仮想世界に入り、空間内を見上げるとメニューが出現するので中央の赤いボタンをクリックしてみましょう。
Google PolyやSketchfabなどから多彩な3Dモデルを選択できるようになるので、試しにどれか1つ選択してみます。
すると、仮想空間内に選択した3Dモデルが現れます。
VRヘッドセットのコントローラーを使うことで、まるで自分の手で触っているように3Dモデルを扱えるようになるのです。
両手を使うことでモデルを拡大・縮小させることもできます。
また、ペンモードを利用すれば空間内に立体的なお絵かきすることもできます！
カラーの選択や、ペンの太さなども自由に変更することができます。
さらに、このペンは遠くにある対象物へらくがきすることも可能で、地面や3Dモデルへ自由に描画することができます。
これらの機能を活用するだけでも十分に楽しい時間が過ごせると思います。PC・スマホでも同様の機能は利用できますが、操作体験はやはりVRヘッドセットを利用した方が快適でしょう。
複数人で同時にらくがきをしてみたり、自分が作成した3Dモデルを立体的に見ながら相談するような場所にしても面白いのではないでしょうか。
とにかくアイデアしだいでどんな用途にでも使える仮想世界を、自ら作り上げることが可能になるのがSpokeの大きな醍醐味と言えます。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、ブラウザだけで独自の仮想世界を作り上げて共有することができるサービスをご紹介しました！
最近はOculus Questなど、手軽に使えるHMDが増えてきたので仮想世界を身近に感じる人も増えてきているのではないでしょうか。また、バーチャルマーケットなど仮想世界でイベントを開催する機会も増えています。
このようなVR体験および仮想世界に興味がある人は、ぜひSpokeを利用してオリジナルの空間を作り上げてみてはいかがでしょうか。
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
