音楽のリリースを発売順にたどれるWebサービス「Release Order」をリリースしました

こんにちは、ゆきおです。

このたび、音楽のWebサービス 「Release Order（リリースオーダー）」 をリリースしました🎉

好きなアーティストのシングルやアルバムを発売順に並べて、リリースの歴史をたどれるサービスです。ふだんはFlutterでスマホアプリを作ることが多いのですが、今回はWebサービスに挑戦しました。

これから何回かに分けて、作るなかで困ったことや工夫したことを書いていく予定です。第1回の今回は、まずリリースのご報告と、どんなサービスなのかを紹介します。

Release Orderとは

Release Orderは、アーティスト名で検索すると、そのアーティストの作品を発売日順の一本の年表のように表示してくれるWebサービスです。無料で使えて、会員登録しなくても検索や閲覧はできます。

好きなアーティストができると、「デビュー曲は何だったんだろう」「このアルバムはどの時期の作品なんだろう」と、最初から歩みをたどりたくなりませんか？

でも実際に調べてみると、配信サービスや公式サイトでは作品が人気順や種類ごとに分かれていることが多く、シングル・アルバム・EPをまたいで発売順に追うのは意外と手間でした。

そこで、「好きなアーティストのリリースの歴史を、サクッとたどれる場所があったらいいな」と思ったのが、Release Orderを作ったきっかけです。

今のところ、大きく分けて次の4つができます。

アーティストのページでは、シングル・アルバム・EPを発売日順に並べて表示します。種類ごとの絞り込みもできます。

ページの上には「◯◯はこれまでに40作品をリリースしています（シングル30作・アルバム7作・EP3作）。最初のリリースは…」というように、歩みの要約も自動で出るようにしました。

「あの曲はいつ出たんだっけ？」に答えるために、曲を発売順に並べた一覧も作りました。シングルとアルバムの両方に入っている曲は、最初に収録された作品で1回だけ表示します。インスト版やTVサイズなどのバージョン違いはまとめています。

各作品のページには、収録曲と、Spotify・Apple Music・Amazon Music・YouTube Musicへのリンクをつけています。気になった作品を、そのまま聴きに行けます。

無料の会員登録をすると、お気に入りのアーティストや作品を保存できます。よく使う配信サービスを設定しておくと、そのリンクが一番上に来ます。

使い方はとてもシンプルです。

初めて検索されたアーティストは、その場でデータの取り込みを始めます。作品の多いアーティストだと数分かかるので、取り込み中は「リリース情報を取得しています（12 / 40件）」のように進み具合を表示して、終わったら自動で更新されるようにしています。

個人開発なので、すべて無料プランで月額0円で動かしています。その分、無料枠の制約との戦いもいろいろありました……。

役割	使っているもの	プラン
フロントエンド	Next.js 15 + TypeScript + Tailwind CSS（Cloudflare Workersで配信）	無料
バックエンド	Django + Django REST Framework（Render）	無料
データベース	PostgreSQL（Supabase）	無料
キャッシュ	Redis（Upstash）	無料
定期処理・CI/CD	GitHub Actions	無料
音楽データ	MusicBrainz（誰でも編集できるオープンな音楽データベース）	無料

サーバーやデータベースは、日本から近いシンガポールにまとめています。

音楽のサービスは、著作権まわりを少しでも雑に扱うとすぐに問題になります。そのため、最初から次のルールを決めて作りました。

画像ひとつとっても、利用条件を調べてみると「この使い方はNGだった」という発見がいくつもありました。このあたりの話も、あとの回でまとめる予定です。

次回からは、作るなかでぶつかったことをテーマごとに書いていきます。

困ったこと：使っていた外部APIが終了していた話、本番でだけ時々500エラーが出た話、シングルから曲が消えていた話
大変だったこと：月額0円で動かすための構成づくり、Google AdSenseの審査に落ちてからの改善
工夫したこと：同じ曲やバージョン違いのまとめ方、取り込み中の進み具合の見せ方、画像がないときの表示
技術的におもしろかったこと：Cloudflare WorkersでのNext.jsの動かし方、広告のためのセキュリティ設定（CSP）、著作権や個人情報まわりの調べもの

順番や内容は、書きながら変わるかもしれません。