ストリーミングサービスで聴けるアイドルマスターシリーズの楽曲を簡単に見つけられる・シェアできるWebサービスをリリースしました。

STREAM@S

動機

アイドルマスターシリーズの楽曲のストリーミングサービスへの開放以降、SNSに楽曲を貼る方が多く出ていますが、次のような問題が出ていました。

• SpotifyやApple Musicといったプラットフォームへのリンクになっており、当該のプラットフォームを使っていない場合検索する必要があった
• それを回避するために楽曲の名前だけを貼るPが出ていた

また公式側のまとめはブランドごとにバラバラ、どの楽曲が開放されているのかがわかりづらい、といった問題もありました。これらの問題はアルバムごとに主要プラットフォームのプレーヤーを埋め込むWebサービスを作ることで解決できるのではないかと考えました。

仕上がり

現状ではブランドはシャイニーカラーズおよびシンデレラガールズ、配信プラットフォームはSpotify、Apple Music、Amazon Musicに対応しています。

技術スタック

バックエンド側はそのうち使ってみたかったものを、フロントエンド側は使い慣れたReactを使いつつフレームワークには初挑戦のNextを、それぞれ混ぜたような感じになっています。

フロントエンド

• React + Next
• TypeScript
• Tailwind
• Vercel

Nextはルーティングを作り込むのが楽だったりはするのですが、こういった小規模サイトの構築には大袈裟な感があり、ちょうどSvelteKitも1.0に到達したのでそちらも試してみようか、という矢先にアイドルマスターポータルがリリースされ、そちらがNextを採用していたので公式と同じフレームワークを使っているという見栄で採用し続けることになりました。

バックエンド/API

• Deno
• TypeScript
• Oak
• Deno Deploy

DenoはPHPペライチに近いお手軽さでモダンな開発体験が得られる、ということで、こういった小規模APIの作成にはピッタリではないかと思い採用しました。Deno Deployもgit pushしてから5秒ぐらいで世界中のエッジにデプロイされる、ということでサクサクと開発ができます。エッジは日本にも置かれているので安心です。

今後実装したいもの

「シェアを楽にする」という所は後付けなので、そこは疎かになっています。

• ブランド追加対応
• OGP対応
• SNSシェアボタン
• バックエンドのフレームワークをHonoに移行