楽曲のスタッフが気になる人向けの、気になる楽曲をすぐにSpotifyで聴ける検索サイト「CreditsSpot」をリリースしました
はじめに
楽曲のクレジット情報を表示し、Spotifyですぐ聴くことのできる検索サイト「CreditsSpot」をリリースしました。
自己紹介
2021年からフィヨルドブートキャンプで学習をしているふわ(@fuwa-syugyo)と申します。
以前はゲームプランナーをしていましたが、プログラマーの方たちと過ごしていく中で自分でもサービスを開発してみたいと感じるようになり、学習を続けております。
作った経緯
良い曲を聴いたときに、この曲は誰が作ったのかな？と気になることはないでしょうか。
アーティスト名はすぐにわかると思いますが、作詞者作曲者はともかく、編曲者やプロデューサー、エンジニア、演奏者…スタッフの方はCDを買ってブックレットを読まないとなかなかわからないのではと思います。
好きな曲に関わっている人が他に作った曲はきっと良い曲なはず！何か調べる方法はないかと探していたところ、MusicBrainzというサイトを発見しました。情報量は膨大で、調べたい情報は網羅されているように感じました。
しかし、好きな曲に関わっている人の他の曲を探すという目的に絞ると、以下のように改善できる箇所があるのではないかと考えました。
- MusicBrainzよりも検索しやすくする
- 気になる曲をすぐにSpotifyで聴けるようにする
MusicBrainzのサイトの情報は充実していますが、逆に言えば情報量が多く、楽曲クレジットを調べるという観点では使いにくいと感じることもありました。
加えて、気になる曲を発見したらその曲名を音楽サービスで検索する手間が発生してしまいます。普段使っている音楽サービスですぐ聴くことができれば便利だろうと考え、開発に着手しました。
CreditsSpotについて
楽曲名または人物名で検索し、知りたい情報を調べるというシンプルな機能です。楽曲情報画面にはSpotifyへのリンクがあり、すぐに聴くことができます。
加えて楽曲検索結果には絞り込み機能があります。アーティスト名で絞り込んだり、部分一致の曲のみを表示させたりすることができます。
ユーザーログイン機能等は設けておらず、誰でもすぐに使うことができます。
技術スタック
- TypeScript 4.9.5
- Vue 3.2.47
- Vue-router 4.1.6
- Vite 4.1.2
- Tailwind CSS 3.2.7
- vue-tsc 1.6.5
- eslint 8.41.0
- prettier 2.8.8
- Cypress 12.11.0
- MusicBrainz API
- Spotify Web API
技術選定の理由
技術選定について、以下の方針を考えていました。
- できる範囲で、新しい技術に挑戦すること
- 維持費を可能な限り抑えること
新しい技術
TypeScript
前述の通りログイン機能を入れないということでフロントエンドのみで作るのが適切と考えTypeScriptを用いることにしました。フィヨルドブートキャンプのカリキュラムで学習したのはJavaScriptですが、昨今では幅広く使われているということで挑戦しました。
特にVue-routerやCypress周りの型エラーで苦戦したのですが、ドキュメントを読み込んだりデバッグを繰り返したりと良い経験ができたと思います。
Cypress
テストフレームワークとしてCypressを使用しています。E2Eテストもコンポーネントテストも行うことができるという点で選定しました。 JestやVitestも候補だったのですが、E2Eテストを重要視したいと考えたためCypressの方がふさわしいと考えました。
スクリーンショットをお手軽に撮れたり、テスト中の実際の動きを見たりすることもできるので、エラーの特定がしやすいと感じました。
維持費
MusicBrainz API
MusicBrainz APIは楽曲や人物に関する情報をJSON形式で返してくれるAPIです。情報量が膨大であることと、非商用利用なら無料であることから選定しました。
Spotify Web API
国際的な規格である、ISRCに紐づいた楽曲のSpotifyへのリンクを生成する目的で使用しました。
メジャーな音楽プラットフォームであることが大きな選定の理由ですが、無料で使えることも重要でした。
工夫・苦労した点
やることを見つけたら、すぐにカンバンにissueとして登録した
忘れてしまわないようにやることはすぐに登録し、優先度順に並び替えることを心がけていました。 カンバンに「今週やったこと」の項目を作って、毎週水曜に開催されている進捗報告ミーティングまでには最低1つでもそこにissueが登録されるようにしていました。
自分が少しずつでも前に進めているという実感は私にとって大きな励みになっていました。モチベーション維持に役立ちました。
レスポンス速度の問題
楽曲情報の取得手段としてMusicBrainz APIを用いましたが、MusicBrainz Databaseというものも存在していました。
直近でJavaScriptを学んでいたこともあり、DBの扱いについて一から学習するよりコストが低いだろうと考えていたのですが、いざMusicBrainz APIを用いて実装してみるとAPIのレスポンスが遅いという問題が発生してしまいました。 一応許容範囲というご意見をいただき、「読み込み中…」と表示して対応しました。
レスポンス時間について考えきれておらず、最初の段階でDBとAPIのどちらを使うべきか相談しなかったことが大きな反省点です。この件があってからは積極的に質問タイムやペアプロで質問や相談するようにしました。
当初想定していたものが作れないことが判明した
当初は「好きな曲に関わっている人が他に関わっている曲を調べにくい問題」を解決するサービスを検討していました。例えばMusicBrainzのサイトで発生していた「楽曲検索の際に、関係のない曲やカバー曲が上の方に表示され、どれが本家の音源かわからない」という問題を解決したかったです。
しかし、以下の理由で難しいことが判明してしまいました。
- APIのレスポンスに本家音源を示すデータがないこと
- 検索結果をリリース日順にし本家音源を一番上に表示させようとしたが、通信回数制限があり全ての検索結果を一度に取得するのが難しいこと
加えて「調べにくくても、最終的には調べられているのだから問題は発生していないのではないか？」という指摘もいただいてしまいました。ごもっともだと思います。
そこで私の解決したい問題を改めて考え直すことにしました。
MusicBrainzのサイトやその時点での自分のサービスを使ってみて「気になる曲を発見しても別のプラットフォームで検索し直さないと聴けない」という問題があると気づきました。 YouTubeへのリンクはあったのですが、公式ではない動画が散見されているのに加え、動画としてしか聴けないのはお気に入りやプレイリスト作成ができず不便だと感じました。
そのためにどうすればすぐに気になる曲が音楽プラットフォームで聴けるようになるのか調べて、Spotifyへのリンクを貼ることが技術的に可能ということが判明して実装しました。
結果的により良いサービスになったからよかったものの、解決したい問題が発生していなかったというのは大きな反省点です。
あえて実装しなかったもの
ログイン機能
お気に入りや検索履歴の保存を目的にログイン機能を作ることも考えはしましたが、その役割はSpotifyに任せれば良いと考え実装しませんでした。
レコメンド機能
Spotify Web APIを使えば「この曲を聴いた人にオススメの曲」のような感じでレコメンド機能を実装することも可能のようです。 面白そうな機能ではありますが、このサービスでは楽曲クレジットに着目して新しいお気に入りの曲を見つけてほしいという気持ちがあります。そのため、今回は見送りました。
終わりに
紆余曲折ありましたが、最後まで自作サービスを作りきれたことは私にとって大きな自信と財産になりました。 同時に、自分の見通しの甘さや調査不足など反省するところは枚挙にいとまがありません。
何度も自作サービスが頓挫してしまうのではないかという状況に陥ったのですが、それでも前を向こうと思えたのは駒形さんや町田さん、メンターの方々、受講生のみなさんの励ましのおかげです。
本当にありがとうございます。
反省点でばかりで辛いこともたくさんありましたが、自分が作りたいものを形にしていく楽しさやわからないところが理解できたときの喜び、自作サービスに取り組んだこの約半年間は何にも代えがたい貴重な経験ができた時間だと思います。
この経験で得られたことを糧に、これから進んでいこうと思います。
ありがとうございました！！
