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週間。
思いついたアイデアを形にするのは、本当に楽しい経験でした。
興味がある方はぜひ、アプリをお試しください！
-
シェアする
フォローする
関連する記事
タグ「サービス」の記事
結論 `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」の記事
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
最近、AI エージェントに Playwright MCP を設定した状態で、CSS の調整作業を行っていました。 デザイン上どうしても原因を特定できず、修正に行き詰まっていたスタイルがあったのですが、Playwright MCP を使って調
なんでやねん！AIに指摘をしたとき、なんかモヤっとする。「するどい指摘です！」とか言われると、褒められてるようでいて、微妙にずれてる感じ。反論しても不毛なので、冷静に淡々と指示を出そう。「いい気づきです！」みたいな返事もあるけれど……ぬぬぬ。
2025-11-11
タグ「Google」の記事
ERNIE-ViLG というのが、"二次元キャラ" に強いという記事を目にしました。実際に使ってみようと、次のページで試したんですが、レスポンスがイマイチでした。そこで、次の記事を参考にして、ERNIE-ViLG を Google Colaboratory で動かすようにしました。
みなさん、ご自身のプロフィール画像ってどう管理していますか？例えば、zennのプロフィール画像って、更新していますか？ 私は、プロフィール画像の更新は面倒なので、放置することが多いです。(GravatarみたいなSaaSが使えたら良いのに...)
みなさん、Zoom使っていますか？ ZoomのMeetingを自動生成するGASライブラリを公開しましたので、そのきっかけと使い方について紹介しようと思います。
タグ「成果物」の記事
個人サイト（ジブンノート）をリニューアルしました。本記事では、個人サイトをリニューアルした際にあった出来事などを振り返りたいと思います。ちなみに、個人サイトは以下のページです。ノート風デザインで、ブログ記事が読めるようになりました！🎉
個人サイトをリニューアルしました！🎉 https://silverbirder.github.io リニューアルは、今回で6回目です。制作期間は、去年の12月27日から今年の1月28日までの約1ヶ月間です。個人的には最速の開発期間でした。AIの力は偉大ですね。本記事では、個人サイトのリニューアルでこだわったポイントについて紹介します。
2026-01-28
個人開発として、機能リクエスト投稿サービスを作成しました。 サービス名は Fequest で、Feature Request の略です。 Fequest は、プロダクトに対して「この機能を追加してほしい」「ここを改善してほしい」といった要望
2025-12-28