「ブラウザのみで通話もできるメタバースアプリを開発して」と言われたら？　困難な開発に遭遇した時に意識したい“手持ちの武器を並べる”こと

株式会社ブイキューブについて

藤本諭志氏：株式会社ブイキューブの藤本です。15年ほどブイキューブに勤めています。入社当時は、VODやライブ配信の開発をしていました。現在はソリューションアーキテクトとして、映像・音声に関するPaaSである「Agora」や「Tencent Cloud」の導入に関する技術サポートを行っています。本日はよろしくお願いします。

まず本題に入る前に、当社ブイキューブに関して紹介します。ブイキューブは、東京に本社がある、ITプライム上場企業です。

もともとは代表の間下（間下直晃氏）が大学時代に始めたベンチャーです。Web制作から始め、アメリカに子会社を作った時に、アメリカと日本の間でのコミュニケーションツールに困り、自分たちで作ってしまおうとWeb会議ツールを作り始めました。その後、Web会議だけではなく、ウェビナーツールやさまざまな海外のツールも取り扱うようになって、現在に至ります。導入実績は7,000社以上で、多くの企業に選ばれてきました。

その中で、主に3つの事業領域があります。1つ目がエンタープライズDX、社内外のコミュニケーションDXです。顧客事業やサービスの中に映像音声を組み込んで提供する事業、エンターテイメントのファンサービスでのライブ配信や、オンラインお見合い、遠隔診療や遠隔教育などがこれに当たります。

2つ目はイベントDX事業です。イベントやセミナーのオンライン化。Web講演会やバーチャル株主総会、IR決算会などに、ツールの提供だけではなく、SaaS＋サービスとして、当日の配信サポートを行っています。コロナ以降、非常に伸びている領域となっています。

3つ目がサードプレイスDX事業です。会議室や公共機関などの空きスペースを活用して、フォンブースやWeb会議ブースの提供をしています。最近はテレキューブなどを設置している施設が増えています。

以上3つの事業領域で、弊社のミッションである「Evenな社会の実現」を目指しています。

映像・音声の送受信をサポートするPaaS「Agora」

メインテーマの前に、少し「Agora」の紹介をします。メインテーマの開発に関するPaaSです。Agoraは、映像・音声の送受信をサポートするPaaSとなっています。イメージ的に近いサービスとしては、「Amazon IVS」「Amazon Chime」「Twilio」です。クライアント用SDKとインフラを提供しています。

UIは提供されていないので、自由なUIで自社のサービスに組み込むことができます。エンタメ系から医療系、業務系など、さまざまなアプリに組み込まれています。

Agoraについての記事は、「Qiita」に弊社ブイキューブやほかの開発者からの投稿があります。今までで累計100件を超える記事が投稿されていますので、ぜひご覧ください。ユースケースに合わせた記事も投稿されています。

インストールレスかつ音声通話付きのメタバースアプリ、どう開発する？

では、メインテーマについて話をしていきます。（スライドを示して）自分のところに次のような案件が降ってきたと仮定をします。「インストールレスでメタバースアプリをリリースしたい」「音声通話も付けたい」「なるはやでお願い」というようなオーダーです。

開発者としてどのように実現していくか、順を追って考えてみます。

まず大前提で、インストールレスということは、ブラウザアプリとなります。次に、メタバースなので、リッチな3D映像が必要になってきます。現在、ブラウザでリッチな3D映像となると、WebGLが真っ先に思い浮かびます。

WebGLの開発方法はいろいろとありますが、ポピュラーなのは「Unity」を用いた開発になると思います。そして音声通話の実装に関しては、冒頭で少し話したAgoraの利用が候補として挙がります。

AgoraがUnity版のWebGLにどこまで対応しているかを確認してみます。Agoraの「GitHub」にUnity版WebGLのリポジトリが公開されています。しかし、現在はコミュニティ版としての公開になっています。コミュニティ版は将来的なリリースの候補となっている製品で、現在はサポート対象外です。

できればこのSDKを利用したいところですが、GA（General Availability）が出される気配が今のところありません。

正直なところ、正式リリース前のSDKを使うのは心配だし、最終的にGAされずに消滅したら作り直しになってしまいます。かといって、独自で音声通話の実装は難しそうです。頼りのGoogle先生からもいい情報は出てきませんでした。

ここで諦めてしまっては、開発は終了してしまいます。今ある手持ちの武器でなんとかできないかを考えていきます。

今ある手持ちの武器でなんとかできないか

（スライドを示して）手持ちの技術で考えた構成が、このようになります。UIやUX部分は、正攻法でWebGLを利用します。開発環境はUnityを採用します。音声通話部分はWebGLと切り離して、外部のJavaScriptで実装します。そして、AgoraのWeb SDKを活用して開発していきます。Web SDKはGAされているので、利用に心配はありません。

この構成の場合、WebGL側から外部のJavaScriptの呼び出しや、逆にWebGL側の呼び出しが可能かどうかを調べる必要が出てきます。つまり、図の「Information」の部分がポイントとなります。

ここまでは机上の空論なので、いきなり製品を開発するのではなく、一度プロトタイプをサクッと作ってみます。プロトタイプを作ることで実現可否の判断ができ、かつ今後の開発がスムーズに行えます。

WebGLから音声通話へ入室指示をする

今回のプロトタイプの機能としては、ボタンクリックでボイスチャットに入室、他拠点が入室してきたら、その情報をWebGL上の画面に反映させることとします。要求される技術としては、WebGL内のボタンオブジェクトから外部のJavaScriptの実行、そしてJavaScriptでキャッチしたイベントをWebGLで反映することとなります。

「外部のJavaScriptを使用」で推奨される方法は、JavaScriptソースをプロジェクトに追加し、次にスクリプトコードからそれぞれの関数を直接呼び出すことです。そのためには「.jslib」拡張子を利用して、Assetsフォルダ内のPluginsサブフォルダにJavaScriptコードのあるファイルを配置します。詳しくはUnityの公式ドキュメントに記載があります。

（スライドを示して）プラグインとC#スクリプトの一部を抜粋しています。すべてのコードはQiitaに記載しているので、そちらをご覧ください。プラグインファイルは、スライドに記載したような構文を持つ必要があります。

次に、C#スクリプトからプラグインで定義した関数を呼び出します。

（スライドを示して）こちらが外部のJavaScriptの実装です。「Agora SDK」のチャンネルに接続するまでのシンプルな構造になっています。Agoraは音声通話を少ないコードで実装することが可能となっています。

こちらのコードもQiitaに記載がありますので、ぜひご覧ください。

以上の実装で、WebGLから音声通話への入室指示ができるようになりました。

JavaScriptからC#スクリプトの呼び出しをする

次に、JavaScriptからUnityスクリプトにデータや通知の送信が必要な場合があります。推奨される方法は、コンテンツ内でゲームオブジェクトのメソッドを呼び出すことです。呼び出す場合は、SendMessageを利用します。こちらもUnityの公式ドキュメントに詳細な解説が記載されています。送信できるデータは文字列や数字のみとなっています。

（スライドを示して）これは、WebGLアプリをUnityからビルドした際に生成されるJavaScriptコードの一部です。Unityインスタンスをグローバルで利用できるように、少し修正を加えています。

（スライドを示して）こちらは音声通話側のJavaScriptの実装になります。Agora SDKでは、他拠点の入室があった際、そのイベントをキャッチできるAPIがあります。そのイベントを受け取った際に、WebGL側へ情報を返してあげる実装となっています。

今回は、簡易的に他拠点のユーザーのIDをデータとして渡しています。第2引数にはC#側の関数名を指定しています。

（スライドを示して）これはC#側の実装です。先ほど定義した関数を実装しています。中の実装は、受け取った文字列を表示するだけのシンプルなものになっています。

以上の実装で、JavaScriptからC#スクリプトの呼び出しが完了しました。

壁を超えていくための試行錯誤のポイント

ここまでの壁を超えていく試行錯誤のポイントです。まずは、WebGL内だけで実装が必要と思い込まずに、ブラウザで動作をさせる前提を見直してみました。ブラウザで動作させるということはJavaScriptも動作するので、「音声通話だけWebGLの外に出してもいいのでは？」という発想になります。

幸いなことに要件は音声通話で、JavaScript側で映像などをレンダリングすることはないので、この方法で十分対応ができます。

そして、使い慣れた技術をそのまま利用することも大事です。このあたりは経験を積んでいく必要がありますが、使い慣れた技術の組み合わせによって、困難な要件をクリアすることができます。

そして、仮説で考えた構成が実際に実現できるかを、簡易なプロトタイプを実装して検証しました。この検証をしておかないと、プロジェクト進行中に根本的な技術の問題が発生したら、イチから作り直しという事態になってしまいます。

プロトタイプの完成形

（スライドを示して）こちらがプロトタイプの完成形になります。他拠点のユーザーIDが表示されています。実際のメタバースアプリでは、このような文字ではなく、人物アイコンやキャラクターが画面上で動作する実装になりますが、そこまで詳細な実装はプロトタイプの段階では不要なので、この程度にとどめています。

重要なのは、JavaScriptからWebGL内のスクリプトを呼び出せるかの確認になります。画像では少しわかりづらいですが、音声通話もできる状態になっています。

ひとまず、このプロトタイプをベースに開発が進んでリリースを達成したと仮定をしてみます。しかしながら、サービスはニーズに合わせて機能追加が必要となってきます。また、ビジネスサイドからのオーダーが来たとします。

ライブ視聴機能を付けるという追加オーダー、どう開発する？

次のような追加オーダーが来ました。「ライブ映像をメタバース空間上に流し込みたい。それを見ながらみんなで会話したい」「なるはやでね」という内容でした。（スライドを示して）赤矢印の部分あたりにライブ映像を流したいようです。

ここで1つ問題が発生します。JavaScriptからC#スクリプトに渡すことができるデータは、テキストのみとなっています。Agora Web SDKで受け取った映像をWebGLのViewに渡すことは、このフローではできません。この問題を超えていく方法を考えてみます。

この課題に対しては、WebViewを活用してみます。まず、ライブ映像をレンダリングするだけのWebページを準備します。「live.html」の部分になります。次に、WebGL側でWebViewを実装し、そのライブ映像をレンダリングしているWebページを表示させてみようと思います。

（スライドを示して）まず、こちらの実装がライブ映像を表示するWebページになります。Agora SDKのAPIを利用してライブ映像を「subscribe」して、画面上にレンダリングをさせています。

次にWebGL側のWebViewの実装になります。今回、WebView用のライブラリとして、グリーさまが公開しているものを利用しました。

（スライドを示して）こちらがC#スクリプトのWebViewの実装になります。レンダリングさせたいWebページのURLを指定します。数行のコードで簡単に実装ができます。

これでライブ視聴機能がついたプロトタイプが完成しました。ひとまず、これでメタバースアプリのサービス展開は、順調に進んでいくと仮定をします。

なんやかんやでユーザー数の増加に伴い、機能追加がどんどんされていったとします。ホワイトボードを付けたり、簡易なミニゲームを付けたり、文字起こしを付けたりなど、いろいろな機能をどんどん追加していったとします。

ブラウザの処理能力を超えた場合の対応

結果、メモリの使用率上昇などで、ブラウザの処理能力を超えてしまうこともあるようです。ここまで来てしまうと、ブラウザのみですべての解決は厳しそうです。

このようなケースでは、クラウドレンダリングという解決方法があります。重たい処理はクラウド上のバーチャルマシンで実行し、その映像をブラウザなどにストリーミングをするという方法になります。

また、各種操作については、ブラウザをコントローラーとして、バーチャルマシンに情報をインプットさせます。インプットする情報としては、キー入力などの情報になります。この方法であればブラウザは映像を受信するだけなので、負荷はさほどかかりません。

このようなクラウドレンダリングは、「Unreal Engine」の「Pixel Streaming」やTencent Cloudの「CAR」というPaaS製品が対応しています。ブイキューブでは、Tencent Cloudの取り扱いもありますので、必要な方はぜひお問い合わせください。

手持ちの武器を並べ、創意工夫で1個ずつ壁を超えていく

それでは、最後にまとめです。困難な開発に遭遇した場合は、すぐに諦めるのではなく、手持ちの武器を並べてみる。創意工夫で1個ずつ壁を超えていく。プロトタイプを作ってみる、というステップで手を動かしてみると良いかと思います。

以上がメインテーマのお話になります。

Agoraで提供されているメタバースに効果的なAPI

今回は、メタバースを取り上げたので、Agoraで提供されているメタバースに効果的なAPIを一部紹介します。

まずは3Dオーディオです。空間オーディオとも言います。こちらは描画されているユーザーごとの配置によって、右から声が聞こえたり、左から声が聞こえたり、遠くの人は声が小さく聞こえたりと、没入感が向上する音声通話を簡単に実現できる機能です。

次はAIノイズキャンセルです。騒がしい場所で音声通話に参加することもあるかと思います。特に音声通話では映像がないので、よりクリアな音声が求められます。そのようなニーズに対応するのが、このAIノイズキャンセルです。

最後にリアルタイム翻訳です。グローバルに展開されているサービスでは、さまざまな言語で交流されると思います。どうしても翻訳が必要な場合もあると思います。Agoraはリアルタイム翻訳機能も提供予定があります。以上の機能はAgoraのデモサイトで試せますので、ぜひお試しください。

ほかにも、弊社ブイキューブのコーポレートサイトでは、Agoraのさまざまな事例が公開されています。メタバースの事例も最近では増えてきました。開発の参考やサービス設計などにも活かせると思うので、ぜひご覧ください。

最後にセミナーなどのお知らせです。ブイキューブでは、自社主催の技術セミナーを開催したり、Qiitaへの投稿も行っています。興味があればぜひこちらもご覧ください。

ブイキューブやAgoraは、SDKに対するリファレンスの提供だけではなく、ユースケースに合わせた多くのサンプルコードを提供しています。実装難易度の高い開発でも、サンプルコードをプロトタイプとして触ってみると、技術理解が速やかに行えます。開発経験が豊富なソリューションアーキテクトが技術サポートをしっかりとしていて、開発者へ寄り添ったサポートを心掛けています。

技術の進歩やニーズの変化で、開発者に求められることが増えています。ブイキューブは、多くの開発者やビジネスを可能な限りサポートしていきます。本日はご清聴ありがとうございました。