Spotify のアルバムをランダムに聴くためのPWAを開発した話
はじめに
SpotifyのAPIを用いてランダムなアルバムを再生するためのPWAを開発しました。（現在はまだBeta版）
Phonograph
利用にはSpotifyアカウントが必要です。
GitHub Repository: https://github.com/kenjiwilkins/phonograph
背景
音楽のストリーミングサービスが始まってシングル楽曲をプレイリストでシャッフルして聴くことが一番多いと思います。
CDをアルバム単位で聴いていた世代としては、たまに何でもいいからアルバム単位で音楽を聴きたくなる時があります。しかし、LIKEしたアルバムの中から適当なアルバムを再生する機能がなく、自分で作ってみました。
現在の機能としては、
- ユーザーのLIKEしたアルバム一覧から任意・ランダムなアルバムを再生する
- ユーザーの作成したプレイリストから任意・ランダムな楽曲の収録されているアルバムを再生する
上記のふたつの機能を搭載しています。
SpotifyはWeb Playerも提供しているので再生も考えましたが、音楽体験はNativeアプリなどの方が良いため、このアプリはあくまで再生までのブリッジとするスコープにしました。
Tech Stack
- Build&Dev server - Vite
- Frontend framework - Vue
- State Management - pinia
- Styling - Tailwind CSS
- Code Formatter - Prettier
- Unit Test - Vitest + Testing-library/vue
- CI - GitHub Actions
- PWA - Vite PWA
開発上で気にした部分
最低限の機能とかは早々に開発できたんですが、期限切れのトークンの扱いや、認証に失敗した場合の処理などに時間がかかった形でした。
またアルバムやアーティスト画像の形を変えたり、一部隠すようなアイコンをつけるデザインなどはSpotify APIの規約で禁止されているので、エフェクトやスタイルではその辺り気をつけました。
現在の課題・今後の機能
Lintの導入
Lintを導入してCIに組み込みたかったのですが、最新のeslintが開発環境でエラーを吐いており、原因を見つけるのに時間がかかりそうだったのでCIから見送りました。
Unit testの充実
とりあえず導入しただけなのでカバレッジはまだまだ低い、/src 配下のファイルだけでも全項目80%以上のカバレッジを目指したいです。
プレイリスト一覧の充実
現在のプレイリストの一覧はAPIのエンドポイントが違うため、ユーザーが作成したプレイリストのみになっていてLIKEしたプレイリストは入っていません。どちらも取得できるようにしたいですね
再生履歴
再生履歴からアルバムを選択できる機能があっても良いかと思います。
Transition APIの導入
折角のPWAなのでTransition APIを用いてNative-likeな挙動を実装したいですね。
コンポーネントの共通化
いくつかまとめられそうなコンポーネントを今のうちに分けておけるようにリファクタリングしておかないと、後から地獄になりそうです。
Figma設定
デザインをfigmaで作成して確認できるようにしたいです。ついでにtailwindとfigmaのdev modeが噛み合うか模索したいですね。
最後に
なんとなく作ってみてオープンに新機能やFixしていきたいので、なにかのレポジトリにコミットしてみたいという方ウェルカムです。
Discussion