1週間で完成！Spotifyタイアップ検索アプリを作った話（駆け出し9年目）
どうも、Web業界で働き始めて9年目の駆け出しエンジニア、silverbirderです。
Spotifyで音楽を聴いていると「 この曲、どこかで聞いたことがあるけど、何の主題歌だったかな？ 」と思うこと、ありませんか？特にドライブ中や作業中に、ふと気になることが多いですよね。
私もそんな経験があり、気になったその曲が主題歌だったアニメを見始めたことがきっかけで、「 簡単にタイアップ情報（アニメやドラマなど）を調べられるアプリがあったら便利だな 」と思い、このアプリを作ることにしました。
以下が、実際に作成したWebアプリの画面とリンクです。
この記事では、このアプリの 技術的な部分 について詳しく紹介します。
ちなみに、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週間。
思いついたアイデアを形にする のは、本当に楽しい経験でした。
興味がある方はぜひ、アプリをお試しください！
-
コメント
0
読み込み中...
シェアする
フォローする
購読する
関連する記事
タグ「サービス」の記事
結論 `iframe.contentWindow` から `twttr` オブジェクトを見つけて、`event.bind("rendered", () => {})` の第二引数に、表示処理を書くことです。 背景 `https://twitter.com/openwc/status/1427617679427440643` のような URL から、埋め込みコンテンツをブログサイトなどに表示したいです。 `https://publish.twitter.com/oembed?url=${URL}` のレスポンスの中の html が、埋め込みコンテンツになります。これを iframe の srcdoc に設定することで、埋め込みコンテンツを表示することができます。
TikTokへスクレイプするバッチをGCP上で構築しました。GCP構築のシステム設計話と、その構築時に、ハマったことを共有します。
みなさん、Zoom使っていますか？ ZoomのMeetingを自動生成するGASライブラリを公開しましたので、そのきっかけと使い方について紹介しようと思います。
タグ「AI」の記事
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
最近、AI エージェントに Playwright MCP を設定した状態で、CSS の調整作業を行っていました。 デザイン上どうしても原因を特定できず、修正に行き詰まっていたスタイルがあったのですが、Playwright MCP を使って調
タグ「Google」の記事
ERNIE-ViLG というのが、"二次元キャラ" に強いという記事を目にしました。実際に使ってみようと、次のページで試したんですが、レスポンスがイマイチでした。そこで、次の記事を参考にして、ERNIE-ViLG を Google Colaboratory で動かすようにしました。
みなさん、ご自身のプロフィール画像ってどう管理していますか？例えば、zennのプロフィール画像って、更新していますか？ 私は、プロフィール画像の更新は面倒なので、放置することが多いです。(GravatarみたいなSaaSが使えたら良いのに...)
みなさん、Zoom使っていますか？ ZoomのMeetingを自動生成するGASライブラリを公開しましたので、そのきっかけと使い方について紹介しようと思います。
タグ「成果物」の記事
個人サイトリニューアルを機に、記事を書く執筆環境Webアプリを用意しました。 https://silverbirder.github.io/blog/contents/20260128/ どのようなものか簡単に紹介します。 入力とプレビュー
2026年02月20日
個人サイト（ジブンノート）をリニューアルしました。本記事では、個人サイトをリニューアルした際にあった出来事などを振り返りたいと思います。ちなみに、個人サイトは以下のページです。ノート風デザインで、ブログ記事が読めるようになりました！🎉
個人サイトをリニューアルしました！🎉 https://silverbirder.github.io リニューアルは、今回で6回目です。制作期間は、去年の12月27日から今年の1月28日までの約1ヶ月間です。個人的には最速の開発期間でした。AIの力は偉大ですね。本記事では、個人サイトのリニューアルでこだわったポイントについて紹介します。
2026年01月28日