YouTube (Music) のプレイリスト管理を楽にするウェブアプリを Next.js で作った
はじめに
こんにちは。鈴木です。
個人開発で YouTube、YouTube Music のプレイリストを簡単にするウェブアプリケーション Playlist Manager For YouTube (https://pmfy.suzuki3.jp) を開発しました。
リポジトリはこちらです。
何ができる？
YouTube, YouTube Music のプレイリストを管理できます。
- プレイリストをコピー
- プレイリストのアイテムをシャッフル
- プレイリスト同士を結合
- プレイリストを削除
- プレイリストのアイテムを検索
プレイリストを管理する画面
プレイリストアイテムの検索画面
開発の背景
プレイリスト同士をマージしたい
普段から YouTube Music を使っていて、K-POP, 洋楽などジャンル別のプレイリストを作成しています。
それらのジャンルの曲を含んだ "すべて" のようなプレイリストを作成したかったのですが、当時すでに K-POP プレイリストは150曲ほど、洋楽プレイリストは100曲ほど入っていたので手作業で追加するには大変な量でした。
プレイリストのアイテムをシャッフルしたい
YouTube Music のシャッフル再生はプレイリストから毎回ランダムに曲が選ばれるのではなく、何曲スキップするかを毎回ランダムに決めている（多分）ので "すべて" のようなプレイリストを作成すると、ジャンルそれぞれが固まっているのでランダム再生をしても同じジャンルが続きます。
そのため、真にランダムな再生をするため、プレイリストそもそもをシャッフルするという需要がありました。
使用技術
| Vercel | デプロイ先 Next.jsと相性がいい |
| Next.js | フレームワーク |
| TypeScript | 型最高！ |
| Material UI | コンポーネントライブラリ 今のデザインに満足していないので他のライブラリに乗り換えるかも |
| NextAuth | Google OAuth、永続化が簡単 |
| YouTube Data API v3 | NextAuth で取得したアクセストークンを使用して、APIにリクエスト |
工夫したこと
認証について
Google 認証周りは NextAuth の GoogleProvider がよしなにやってくれました。
ユーザーの機密情報をサーバーに保存したくなかったので、Cookie に JWT 形式で保存する方法を採用しました。
詳しくは以下の記事で紹介しています。
Next.js Server Actions はなるべく小さい粒度で作成する
当初プレイリストの コピー・シャッフル・マージ・削除 の操作を行う Server Action をそれぞれ作成していました。
しかしコピーなどは処理完了までに長い時間が予想されるので、進捗を表示するために state を変更するようなイベントハンドラを Server Actions に渡そうと思ったところ、Server Actions はクライアントサイドで定義された関数を渡せないようで、進捗の表示に行き詰まっていました。
そこで Server Actions を プレイリストを作成する・プレイリストにアイテムを追加する・プレイリストアイテムのポジションを変更する のようになるべく小さな粒度で作成します。
そしてそれらを コピー・シャッフル・マージ の固有のロジックを含んだ純粋な関数から呼び、その関数にクライアントサイドで定義したイベントハンドラを渡すことで進捗の表示を実装しました。
i18n について
今回のアプリケーションでは YouTube Data API を使用しており、Google の OAuth も併せて使用しています。そのため Google の OAuth 関係の審査のために少なくとも英語に対応する必要がありました。
せっかくなので、多言語対応しようと思い、i18n を実装しました。
クライアントサイドとサーバーサイド両方で翻訳を利用できるようにするのに大分詰まりました。
詳しくは以下の記事で紹介しています。
課題と展望
デザイン
当初自分用のツールとして開発をスタートし、localhostで使用することを想定していたため、デザインを凝ることよりも開発速度を優先しました。
そのため、お世辞にもおしゃれとは言えないデザインになっています。
ホストするならもう少しデザインを凝るのも勉強になっていいなと思っています。
エラーハンドリング
これも当初はlocalhostでの使用を想定したことに関係するのですが、Github にソースコードを公開するだけの場合、非エンジニアが利用することは考えずらかったため、現在は YouTube Data API からエラーコードが変えてきた場合やその他エラーが発生した場合など、エラーコードを表示するのみで処理を中断しています。
これをもう少しユーザーフレンドリーな形にアップデートする必要があると感じています。
追加予定の機能
- プレイリストのアイテムを曲名やアーティスト名でソートする
- プレイリストからアーティスト名で曲を抽出する
- プレイリストから手選択でアイテムを抽出する
- 操作で出力されるプレイリストを指定可能にする
- 現在は毎回新しいプレイリストを作成している
- これを指定可能にすることで API quota の節約にもなる
- ユースケースによってはより便利になる
さいごに
今後も継続してメンテナンスを続けていくつもりです。
よければ Github リポジトリにスターをお願いします！
Discussion