1週間で完成！Spotifyタイアップ検索アプリを作った話（駆け出し9年目）

どうも、Web業界で働き始めて9年目の駆け出しエンジニア、silverbirderです。

Spotifyで音楽を聴いていると「この曲、どこかで聞いたことがあるけど、何の主題歌だったかな？」と思うこと、ありませんか？特にドライブ中や作業中に、ふと気になることが多いですよね。
私もそんな経験があり、気になったその曲が主題歌だったアニメを見始めたことがきっかけで、「簡単にタイアップ情報（アニメやドラマなど）を調べられるアプリがあったら便利だな」と思い、このアプリを作ることにしました。

以下が、実際に作成したWebアプリの画面とリンクです。

タイアップ検索 デモ画像

https://tie-track.vercel.app

この記事では、このアプリの技術的な部分について詳しく紹介します。
ちなみに、SpotifyでよくAnime Nowを聴いています。タイアップ情報の検索にはもってこいです！

アーキテクチャ概要

このアプリは、Spotifyで再生中の曲のタイアップ情報を素早く取得し、ユーザーに表示します。以下がそのアーキテクチャ図です。

タイアップ検索アーキテクチャ図

使用した技術スタックは以下の通りです。

• Spotify API: 再生中の曲情報を取得
• Google Custom Search API: タイアップ情報をGoogle検索
• OpenAI API: 検索結果からタイアップ情報を抽出
• Next.js: アプリケーションフレームワーク
  • デザイン参考: v0.dev/chat
• Icon生成: AI Icon Generator - perchance.org

開発の流れ

タイアップ情報の取得

最初に、タイアップ情報を取得するためのAPIを探しましたが、直接的にタイアップ情報を提供するものは見つかりませんでした。レコチョクなどのサービスも検討しましたが、必要な情報が不足していたため、断念しました。

次に、ChatGPTを使ってタイアップ情報を取得する方法を試しました。ChatGPTは、Web検索結果を含めた回答を返してくれるため、うまくいくこともありました。しかし、OpenAI APIを使う場合はWeb検索が行われないため、タイアップ情報を取得するには不十分でした。

Google Custom Search API + OpenAI API

そこで、Google Custom Search APIを使い、タイアップ情報が掲載されているWebページを取得し、その情報をOpenAI APIに渡して解析させる手法を採用しました。
この組み合わせにより、精度の高いタイアップ情報を得ることができました。

データの保存

API使用は従量課金のため、コスト管理が重要です。そこで、Google検索結果とOpenAI APIの結果をデータベースに保存し、同じ情報を何度も検索しないようにしています。

結果: Spotifyでアニメ主題歌を楽しむ

このアプリを使えば、Spotifyで再生中の曲がどのアニメやドラマの主題歌なのか、すぐに確認できます。特に、秋のアニメシーズンが近づいている今、気になる曲があればすぐに関連作品をチェックできるので、これからが楽しみです！

1週間で完成！

アイデアを思いついてから完成までにかかった時間は、わずか1週間。
思いついたアイデアを形にするのは、本当に楽しい経験でした。

興味がある方はぜひ、アプリをお試しください！