Twitchクリップのプレイリストを作成・管理するWebアプリを開発した話

はじめに

こんにちは。アプレンティス2期生のsakanaです。

https://apprentice.jp/

アプレンティスでは、カリキュラムの最後にそれまでの集大成としてオリジナルプロダクト製作を行います。

その製作物として、Twitchクリップのプレイリストを作成・管理するWebアプリ「List It Bro!」を開発したので、紹介します。

サービス概要

前提として、Twitchという配信プラットフォームがあります。イメージとしては、配信に特化したYoutubeのようなサイトです。

Twitchでは、Youtubeとは違い、視聴者が簡単にカット編集を行い、クリップと呼ばれる切り抜き動画を作成することができます。

開発したのは、そのTwitchクリップのプレイリストを作成・管理することができるWebアプリです。

クリップの検索にも対応しているので、クリップ探しの普段使いにもご利用いただけます。

URL: https://list-it-bro.com

開発のきっかけ

アプレンティスのチーム開発で、チームメンバーの1人がTwitchのクリップの検索性の悪さ・共有のしにくさについて話していたことがきっかけです。

Twitchクリップは、その面白さに反して検索性がすこぶる悪いです。そもそもタイトルでの検索はできないし、配信者毎にしか表示できず、シリーズものをまとめておくこともできません。

これを解決するべく、Twitchクリップのプレイリストを作成するサービス「List It Bro!」をチームで開発することにしました。

そのときの記事がこちらです。

チームで開発したのはあくまでデモ版までで、その後チームメンバーは、皆新たに開発を始めたいということだったので、List It Bro!の開発には私1人が残ることになりました。

デモ版では、ハリボテになっている部分があったり、検索機能を実装していなかったりしたので、その辺りを踏まえて最初から作り直しました。

アプリ名の由来は、配信界隈における、スーパープレイなどの盛り上がった場面で「Clip It Bro!」と言ってクリップを作成してもらう文化から来ています。

ページ紹介

トップページ	ライブラリページ
クリップとプレイリストのランキングが表示され、3時間ごとに内容が更新されるようになっています。	ユーザーの作成/お気に入り登録したすべてのプレイリストの一覧を閲覧できます。特に、自分のライブラリの場合は、プレイリストの新規作成も可能です。

プレイリストページ	クリップ閲覧ページ
プレイリストの詳細を確認できます。特に、自分のプレイリストの場合は、プレイリスト名の変更、プレイリストの削除、クリップの並び替えも可能です。	クリップを閲覧できます。プレイリスト情報がある場合は、右側にプレイリストが表示され、選択することで別のクリップへ遷移することができます。

検索ページ	ログインページ
クリップとプレイリストの検索ができます。検索時には、期間、並び順、検索対象を指定することができます。	Twitchアカウントで認証することで、ログインができます。

Aboutページ	アップデート情報ページ
サイトの使い方や、各種情報が載っています。	今後のアップデート展望や、これまでのアップデート履歴が載っています。

工夫した点

プレイリスト内クリップの自動再生

• 通常、ページ遷移するとミュート状態で動画が再生されるので、クエリパラメータのみを変更してSPA的遷移を行うことで、プレイリスト内の2つ目以降の動画を再生する際に、音ありの状態で自動再生されるようにしました。

ドラッグアンドドロップ

• プレイリスト内のクリップの順番を、ドラッグアンドドロップによって変更できるようにしました。

すべての検索

• クリップのDBにタイトル、配信者名、ゲームタイトルを半角スペースで区切ったカラムを作成することで、これらすべてを対象とした検索をできるようにしました。
• 同様に、プレイリストもタイトルと作成者名を対象として、すべての検索をできるようにしました。

登録不要で使用可能

• Twitchアカウントをお持ちの場合は、Twitchアカウントで認証することでログインすることができます。

まとめ

Twitchクリップを閲覧する際に「検索しにくい」とか、「まとめて共有したい」と思ったことがある方に使ってほしいアプリになっています。

気になったらList It Bro!にアクセスして、是非使ってみてください！

詳細や実際のソースコードが気になる方は、Githubで公開しているので、そちらも合わせてご覧ください。