content【PWA】YouTubeをみんなでワイワイ見るためのサービス、DJ7をローンチしました!JavaScriptVue.jsFirebase個人開発PWAみなさんこんにちは!今回はYouTubeの動画を複数人で同時視聴できるサービスを作りましたので紹介したいと思います。ブラウザを開くだけで、友達や恋人と同じ動画を見ることができます!複数人で同じ動画を見て、あーでもないこーでもないと意見を交わすのはめちゃめちゃ楽しいです。DJ7https://dj7.io初回のアクセスは音がならないように設定してありますのでご安心ください。できること同期再生サービスの要です。複数のデバイス間で再生の状態が同期され、離れている場所でも同じタイミングで同じ動画を視聴できます。右下をクリックすると動画を画面に大きく表示します。これによって複数人で同じ動画を見ることができます😋シークバー共有DJ7ではシークバーの状態もユーザ間で共有されます。Liveでは得られない体験です。ユーザが自由に操作できて、かつ状態が共有されるサービスは他にないと思います笑DJ7ではユーザができることに優劣がないので全員が同じ操作をすることができます。動画の検索YouTube上の動画を検索して、一番関連度が高いものを追加でします。URLを直接入れたり、プレイリストの追加にも対応してます!ちなみにテキストボックスの上のアイコンは同じ部屋にいるユーザです割り込みあまり馴染みがない機能だと思います。長い動画を流しているときに有効です。再生中の動画とキューの動画を入れ替えることができます。入れ替わった動画はキューの一番上に追加され、どこまで再生されていたかなどの情報が保存されます。曲の順番の入れ替えDJ7には再生待ちの動画のリストがあり、その順番をドラッグ・アンド・ドロップで変えることができます。ちなみにDJ7では再生待ちのリストのことをQueueと呼んでいます。再生した動画は履歴に保存されるようになっており、そこからも曲の追加ができます。履歴の保存はログインが必要ですので、その点だけご了承ください。自分で部屋を作成して、誰かを呼ぶことも一人で使うこともできます。適当な部屋名を入れてJumpしていただくだけで部屋が作成されます。こちらの機能もログインが必要です。DJ7で可能になることもともと、DJ7はDiscordのMusicBotと同じことがWebでできるようになることを目指して開発していました。ちなみに、MusicBotとはDiscordの同じチャンネルにいる人同士で音楽を聞くためのサービスです。MusicBotには一度に曲を複数追加できない、そもそもインストールがめんどくさいなど、私の中で数多のフラストレーションがありました。そこでもっとカジュアルに同時視聴を楽しみたいという思いのもと今回のDJ7を開発しました。最初はMusicBotの代替を目指していたのでYouTubeの動画を読み込んでいても、音楽を聞くことに専念するアプリにしようと考えていました。複数人で同じ動画を見ることができるようになり、以下のようなことが可能になります。同じ動画を、同じタイミングで見て意見を交わすこれは最初にも書きましたね。これは誰かと通話していることが前提となっていますが、ぜひやってみてほしいです。生放送を見るのとはまた違った楽しみがあります。DJ7に集まって作業用BGMを流すこれが元々のMusicBotがメインでできたことになります。MusicBotとは違い通話する必要はないので、よりカジュアルに参加でき、自分の作業にも集中することができます。この用途ではリアルで集合したときにも使えます。DJ7ではいちいちリクエストして流してもらうという手間はいりません。動画を共有するなにか面白い動画があったときにURLで共有することがあると思います。DJ7ではURLを共有する手間も、URLをクリックして開いてもらう手間も必要ありません。動画を流してリモートで授業これはやったことがありませんが、可能だと思います。同じ動画をみて、重要な点は一時停止して解説をするといったことができます。私が知らないだけで使い方はもっとたくさんあると思います。みなさん思い思いの使い方をしてみてください!!開発スケジュール今回の開発スケジュールは以下のような感じです。最初の3日で同時視聴ができるデモを簡単に作り、知り合いに見せました。このときポジティブな感想をもらえたのがモチベーションになりました。そこから仲間内で実際に1ユーザとして使ってもらい意見をもらいながら開発を進めました。1ヶ月で作るということを最初に決めていましたので、機能の実装は最低限必要なものだけに絞り、機能を追加するよりは、すでにある機能のブラッシュアップを優先させること常に意識していました。次回は今回学んだことを活かして、もっと早くサービスのローンチまで漕ぎ着けたいです。技術スタック今回はフロントエンドにVue、バックエンドにFirebaseを使いました。同期再生といった根幹の部分はFirestoreだけで実装されています。Functionsなども使いませんでしたので、コーディングはフロントエンドだけに集中できました。Firebase最高。苦労した点モバイルについてです。AndroidやiOSでは、OS側の制約により、YouTubeの音をミュートにしなければサイトを訪れたときに自動で再生されません。そのため、サイトを訪れてから最初にYouTubeのプレイヤーを操作していただきミュートを解除していただく必要があります。この点だけご了承していただきたく・・・また、今回の場合ではあまり難しいロジックはありませんでしたので、実装自体にはあまり苦労しませんでした。まとめ今回は公開のためにあまり機能をつけませんでしたが、私自身欲しい機能がまだまだたくさんあるのでバージョンアップを重ねていきたいと思います。技術についての詳しい話や、サービスの途中経過も適時報告したいと思います。までお願いします!また、こちらのDiscordのサーバでWebサービスを個人開発する人たちで切磋琢磨するコミュニティを運営しています!Dj7のリリースに至るまでこのコミュニティで沢山のフィードバックを貰えたのはかなり大きかったです。Chromeの導入コンサル・提案業務をしています。upLoginユーザーは見つかりませんでした。