みなさんこんにちは！

今回はYouTubeの動画を複数人で同時視聴できるサービスを作りましたので紹介したいと思います。
ブラウザを開くだけで、友達や恋人と同じ動画を見ることができます！

複数人で同じ動画を見て、あーでもないこーでもないと意見を交わすのはめちゃめちゃ楽しいです。
これはぜひ皆さんにも体験してもらいたいです！

YouTube同時再生サービス DJ7
https://dj7.io

初回のアクセスは音がならないように設定してありますのでご安心ください。

できること

同期再生

サービスの要です。複数のデバイス間で再生の状態が同期され、離れている場所でも同じタイミングで同じ動画を視聴できます。
右下をクリックすると動画を画面に大きく表示します。これによって複数人で同じ動画を見ることができます😋

シークバー共有

DJ7ではシークバーの状態もユーザ間で共有されます。これはYouTube Liveでは得られない体験です。
ユーザが自由に操作できて、かつ状態が共有されるサービスは他にないと思います笑
DJ7ではユーザができることに優劣がないので全員が同じ操作をすることができます。

動画の検索

YouTube上の動画を検索して、一番関連度が高いものを追加でします。もちろんURLを直接入れたり、プレイリストの追加にも対応してます！
ちなみにテキストボックスの上のアイコンは同じ部屋にいるユーザです

割り込み

あまり馴染みがない機能だと思います。例えば長い動画を流しているときに有効です。
再生中の動画とキューの動画を入れ替えることができます。入れ替わった動画はキューの一番上に追加され、どこまで再生されていたかなどの情報が保存されます。

曲の順番の入れ替え

DJ7には再生待ちの動画のリストがあり、その順番をドラッグ・アンド・ドロップで変えることができます。
ちなみにDJ7では再生待ちのリストのことをQueueと呼んでいます。

履歴

再生した動画は履歴に保存されるようになっており、そこからも曲の追加ができます。
履歴の保存はログインが必要ですので、その点だけご了承ください。

部屋の作成

自分で部屋を作成して、誰かを呼ぶことも一人で使うこともできます。適当な部屋名を入れてJumpしていただくだけで部屋が作成されます。
こちらの機能もログインが必要です。

DJ7で可能になること

もともと、DJ7はDiscordのMusicBotと同じことがWebでできるようになることを目指して開発していました。
ちなみに、MusicBotとはDiscordの同じチャンネルにいる人同士で音楽を聞くためのサービスです。

しかし、MusicBotには一度に曲を複数追加できない、そもそもインストールがめんどくさいなど、私の中で数多のフラストレーションがありました。
そこでもっとカジュアルに同時視聴を楽しみたいという思いのもと今回のDJ7を開発しました。

最初はMusicBotの代替を目指していたのでYouTubeの動画を読み込んでいても、音楽を聞くことに専念するアプリにしようと考えていました。
しかし、複数人で同じ動画を視聴することが想像以上に楽しい体験だったので結局残すことにしました笑

複数人で同じ動画を見ることができるようになり、以下のようなことが可能になります。

同じ動画を、同じタイミングで見て意見を交わす

これは最初にも書きましたね。これは誰かと通話していることが前提となっていますが、ぜひやってみてほしいです。
生放送を見るのとはまた違った楽しみがあります。

DJ7に集まって作業用BGMを流す

これが元々のMusicBotがメインでできたことになります。MusicBotとは違い通話する必要はないので、よりカジュアルに参加でき、自分の作業にも集中することができます。
また、この用途ではリアルで集合したときにも使えます。どこかに集まったときにBGMを流す役を人を立てるけど、自分が流したい曲があったときに皆さんはどうしてましたか？ DJ7ではいちいちリクエストして流してもらうという手間はいりません。

動画を共有する

なにか面白い動画があったときにURLで共有することがあると思います。DJ7ではURLを共有する手間も、URLをクリックして開いてもらう手間も必要ありません。

動画を流してリモートで授業

これはやったことがありませんが、可能だと思います。同じ動画をみて、重要な点は一時停止して解説をするといったことができます。

ほかにもこんな使い方はどうですか？

• オンラインでカラオケ
• お笑いのライブを一緒にみて笑う
• ライブコーディングの同時視聴
• 製品発表や商品レビューをみんなで思ったことを言いながら視聴
• 勉強会

私が知らないだけで使い方はもっとたくさんあると思います。ぜひみなさん思い思いの使い方をしてみてください！！

開発スケジュール

今回の開発スケジュールは以下のような感じです。

工程	工数
デモ作成	3日程度
ロジック実装	10日程度
デザイン	10日程度
その他	7日程度

最初の3日で同時視聴ができるデモを簡単に作り、知り合いに見せました。このときポジティブな感想をもらえたのがモチベーションになりました。
そこから仲間内で実際に1ユーザとして使ってもらい意見をもらいながら開発を進めました。
また、1ヶ月で作るということを最初に決めていましたので、機能の実装は最低限必要なものだけに絞り、機能を追加するよりは、すでにある機能のブラッシュアップを優先させること常に意識していました。

次回は今回学んだことを活かして、もっと早くサービスのローンチまで漕ぎ着けたいです。

技術スタック

今回はフロントエンドにVue、バックエンドにFirebaseを使いました。
とくに同期再生といった根幹の部分はFirestoreだけで実装されています。
Cloud Functionsなども使いませんでしたので、コーディングはフロントエンドだけに集中できました。

Firebase最高。

苦労した点

モバイルについてです。AndroidやiOSでは、OS側の制約により、YouTubeの音をミュートにしなければサイトを訪れたときに自動で再生されません。そのため、サイトを訪れてから最初にYouTubeのプレイヤーを操作していただきミュートを解除していただく必要があります。この点だけご了承していただきたく・・・

また、今回の場合ではあまり難しいロジックはありませんでしたので、実装自体にはあまり苦労しませんでした。

まとめ

今回は公開のためにあまり機能をつけませんでしたが、私自身欲しい機能がまだまだたくさんあるのでバージョンアップを重ねていきたいと思います。
技術についての詳しい話や、サービスの途中経過も適時報告したいと思います。

質問はTwitter @imataka7 または @dj7app までお願いします！

また、こちらのDiscordのサーバでWebサービスを個人開発する人たちで切磋琢磨するコミュニティを運営しています！
Dj7のリリースに至るまでこのコミュニティで沢山のフィードバックを貰えたのはかなり大きかったです。
Webサービスをこれから作りたいという初心者でも大歓迎なので気軽に参加してみて下さい！
https://discord.gg/hNWjDBd

YouTube同期再生プラットフォーム DJ7 https://dj7.io