Unity で DJ サービスを作りたい

初めての Qiita だ．備忘録として使っていこうかなと思っているが，同じ考えや悩みを持つ人にも見ていただければ嬉しいなと思っている．

# 0. はじめに
意気込みだけここに書いておく．随時更新していく．

実は，この記事を書いている時点で，ほんのちょっとは開発を進めている．手元の Notion にちょくちょくメモを取りながら進めているのだが，全然整理できていないので，折角なら Qiita で残していこうかなということで記事にした．現状は最後の章に雑に書くだけにする（ まとまってないので ）．

# 1. 既存の DJ サービス
一般的にイメージする DJ ではなく，自分のお気に入りの動画プレイリストを流すという感じだ．これまでにも DJ サービスは色々あった．下記に代表的なサービスを挙げる．もちろん，この何倍（ 5 倍くらい？ ）もの数のサービスはあるが，下記よりも人口は多くないので割愛する．
|サービス名|稼働中|備考|
|:-|:-:|:-|
|[plug.dj](https://plug.dj/)|$\times$|財政的な理由で閉鎖．また再開するとは言っている．|
|[Ameba Pigg](https://s.pigg.ameba.jp/)|$\times$|PC 版は終了．Pigg Party というものに移行したらしい．|
|[BeatSense](https://www.beatsense.com/)|$\circ$|plug.dj の（ 一時的な？ ）後継者のようだ．|

## 1.1. 構成要素
DJ サービスの構成要素は上記のどれも同じだ．
|構成要素|内容|
|:-|:-|
|DJ ブース|動画を流す人が乗る台|
|観客広場|聞き専 or 順番待ちの人がいる場|
|プレイリスト|流したい曲のリスト．動画は YouTube からリンクさせる．|
|モニター|DJ の流す動画を再生する大きな画面．サイズ調整可能だったりもする．|
|リアクション|YouTube にもある高評価/低評価の機能．低評価はあまりみない．|
|チャット欄|ユーザー同士で会話する欄|

## 1.2. 様式

サービスによって，仮想空間の様式は違う．
|様式|アバター有無|自由に移動できる|備考|
|:-:|:-:|:-:|:-|
|plug.dj|$\circ$|$\times$|奥行き感のある 2D 空間|
|Ameba Pigg|$\circ$|$\circ$|固定視点の 3D 空間|
|BeatSense |$\times$|$\times$|モニターのみ|

Ameba Pigg が最も高い作りこみだと思う．DJ サービスは飽くまで Ameba Pigg サービスの一部だというのに．流せる動画が 10 分未満までという制約はあったが特に不便はしなかった．ただ，かなり広いジャンルのコンテンツを提供していたのもあって，一時期は荒らしが大量発生していた．plug.dj などの，音楽方面に特化したニッチなコンテンツだと，自ずとユーザーも絞られて平和だった印象がある．

上記したサービスには長い間お世話になったし不便に思うところは特になかった．それだけに，現状サービスが止まっているのがキツい．だから，ショボくてもよいので自分で再現してみたい．気を紛らわせる意味も含めて．しかし，同じものを作っても意味がない．もっと体験が向上するようなものを作りたい．

欲しい要素は，仮想空間への没入と自由な移動，およびそれに付随する立体音響だ．いきなり全部作れるとは思っていないので，地道にやっていく．


# 2. 自分なりに作ってみたい

F/S が十分とは言えない状態だが，必要なツールを挙げてみる．

|ツール|内容|
|:-|:-|
|Unity|根幹になる 3D ゲームエンジン．仮想空間上にプレイヤーを配置する．|
|[YouTube Data API v3](https://developers.google.com/youtube/v3/getting-started?hl=ja)|GAS と呼ばれる業務自動化スクリプトの中の YouTube 用 API．使用経験なし．|
|Meta Quest 2|VR デバイス．俺が持ってるのはこれ．|
|[Oculus Audio SDK](https://developer.oculus.com/documentation/unity/unity-audio/)|Unity とのオーディオ I/F．使用経験なし．|

もちろんこれで全部ではない．Unity 内の細かなライブラリーなどは一旦スルーしたし，始めは VR デバイスも使わずとも Unity Editor 上での動作確認で十分だと思っている．本当は基本設計的なことをしたいが，行き当たりばったりでやっていきたい気分．ゲームエンジンについては Unreal Engine でも問題ないと思うが，俺の使用経験のある Unity を書いた．

Unity で作った仮想空間内にユーザー（ Unity ではプレイヤー ）を配置し，2D UI としてプレイリストやチャット欄を表示，3D UI として動画を見せる感じかな．妄想を膨らませると，動画に応じて 3D シーンが構成されるとかできたら面白いよな．2D 画像から 3D シーンを再構成するフォトグラメトリー技術とか色々あるけど，処理負荷はエグそう．

# 3. 現状

本当は [WebGL Publisher](https://indiegamesjp.dev/?p=2773) でアプリを公開したいのだが，WebGL ビルドがうまくいかないのでローカルビルドでデバッグ作業をしている最中だ．

備忘として書くに留める．エラーのトレースを全部吐いてみると [`Google.Apis.Http.ConfigurableMessageHandler.SendAsync`](https://googleapis.dev/dotnet/Google.Apis.Core/1.54.0/api/Google.Apis.Http.ConfigurableMessageHandler.html#Google_Apis_Http_ConfigurableMessageHandler_SendAsync_System_Net_Http_HttpRequestMessage_System_Threading_CancellationToken_) のところ（ スクレイピング時 ）で止まっているのだが，こいつが [`System.Threading.Tasks.Task`](https://docs.microsoft.com/ja-jp/dotnet/api/system.threading.tasks.task?view=net-6.0) を返すようになっている．そして，Unity の WebGL ビルドでは `System.Threading` がサポートされていない（ [Ref](https://docs.unity3d.com/ja/2018.4/Manual/webgl-gettingstarted.html) ）という詰み状態だ．しばらくは実行ファイルの生成で進めていくことになるだろう．WebGL ビルドで `Task` クラスを疑似的に扱えるようにしてくれるライブラリーに [UniTask](https://github.com/Cysharp/UniTask) というやつがあるので，回避方法としてはあるのだろうが，元々がブラックボックスなのでどうしたものか．勝手に YouTube をスクレイピングするのも禁止されているし．


## 3.1. 動画表示

Unity の仮想空間上に Quad オブジェクトを配置し，YouTube 動画を流している様子（ 動画は[これ](https://www.youtube.com/watch?v=eXYUNrgqWUU) ）．ドラゴンはプレイヤーのアバターのつもりで仮置き中．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708376/0b860bf6-17da-e9cf-ae44-a208ae1144cb.png)

## 3.2. 動画検索

動画プレイリストを作るための動画検索をテストしている様子．[Gru](https://grumusic.bandcamp.com/album/cosmogenesis) は俺の好きなインストゥルメンタル・プログレッシヴ・メタルのバンドだ．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708376/c6eefb55-9b5b-7c55-b1e4-db7ad7b3ea25.png)