😴

【Next.js・FastAPI】カンタン曲探しサービスを作ってみた

2023/09/18に公開

Next.js

こんにちは。

ご無沙汰です。ここ約2年間ほど、バックエンドチームに在籍しつつも、時折フロントエンドやインフラの設計・開発も担当させていただいてました。
フルスタックのキャリアを積む為に様々な事に挑戦しつつ、合間にソシャゲもやってだらだらしてると...なんと1年近くもブログ更新を放置してしまっておりました。勉強がてら発信続けるハズだったのですが。。。
お詫びとして、ウチのネッコを置いときます。これで許してください。申し訳ありませんでした。
届いたケンタッキーに寄ってくるネッコ

さて、社会人らしくお詫びもしっかり済ませたところで本題に移ります。
今回は趣味50％勉強50％くらいの気持ちで作ったサービスがあるので紹介したいと思います。
（2023/9/19現在デプロイ準備中。初サービスですのであたたかい目で見て頂けると嬉しいです）

サービス紹介

内容は至ってシンプル、 『Web上で楽曲の検索と再生、お気に入り保存』 が出来るサービスです。
「え、それだけ？」って感じですが、盛り上がる箇所をサッと試聴できて容易に楽曲管理できる所が気に入ってます。
また、よくあるストリーミングサービスを起動するより遥かにすぴーーでぃです（当たり前）。

サービス操作中の画面

また、その曲が一番盛り上がる箇所を抽出した「約30秒」だけ試聴できます。
なので好みでなければ別の楽曲へ。気に入ったらお気に入り登録。全編聴きたかったら他のストリーミングサービスへ。
サクサク探し出せる事が出来ます。

動画紹介

以下のツイートをご確認下さい。

なお、著作権の都合上楽曲の音声をOFFにしております。

できること

検索ワードを入力し、出てきた楽曲を確認できる
検索結果の楽曲を試聴できる
楽曲を右側の”お気に入りリスト”に登録・削除できる
また、”お気に入りリスト”に登録した楽曲一覧は(DBに残るため)いつでも確認できる

こんな人にオススメしたい

楽曲の”盛り上がる箇所”だけを聴いてみたい人
TikTokや動画再生に使う曲を探している人
結婚式等で用いる曲を探している人

など。

使用技術

使用技術（一部）

使用技術の選定基準など、詳細に関しては(後編)[https://zenn.dev/ichimia111/articles/0945740f9abef2]に記載しています。

（余談）なぜ音楽サービスを？

私は音楽が好きで、学生時代は楽器演奏に打ち込んでました。邦楽洋楽、ジャンル問わず多少は通ってきました。音楽が好きなので音楽サービスを選んだ、という単純明快な理由です。

...しかしご存知の通り、音楽サービスは優れたモノで溢れており飽和状態です。模倣しても面白くないので、最近の音楽の傾向を少し分析してみました。

すると2010年→2020年にかけて、ヒット曲TOP10ののイントロが"約5秒"、さらにイントロが0秒の曲が3曲もランクインしていたようです。
ビルボードランキング
詳細はサブスクは人の忍耐力を奪う！？本当にヒット曲のイントロが短くなっているのか調べてみたをご確認下さい。

この記事はあくまでTOP10を比較した結論を述べておりますが、実際に私もここ数年の楽曲を聴いていて同様の傾向を感じ取っておりました。明らかにイントロが短くなっている楽曲、イントロ無しで冒頭から歌い出す楽曲も増えました。これに慣れてしまうとプログレなんて聴けたもんじゃないでしょう（私はそこそこ好きです）。

恐らくTikTokやSNSによる”バズり”が背景にあると感じ、「じゃあただ単にその動画編集などに使える曲を探せるようなサービスを作るぜ」という結論に至りました。
そのため再生出来る楽曲は　"約30秒"、更にサビ前後の盛り上がる箇所に絞って試聴できる訳です。

振り返り

サービスの改善点

検索機能のアップデート
- 曲名やアーティスト名だけでなくジャンル等でも検索可能にすることで、音楽に詳しくない人でも利用しやすくします。
曲を容易に"ディグ"る仕組みの提供
- 本サービスは検索サービスとして提供してますが、ターゲット顧客の状況を考慮すると、音楽を見つけられる方法を検索以外でも提供するべきかもしれません。
- 例えば人気の高い楽曲をランキング形式で表示し、試聴や好みの楽曲の発見を促すなど。
- レコメンド機能の追加なども有効かもしれません。
その他、レスポンス遅延時の表示やパフォーマンス改善など

開発の反省点

コストを抑えるための工夫の余地があった
- （後編の記事にある通り）DB選定の見直し。
- 今後は要件に応じて見直していきます。
コンポーネント設計とパフォーマンスを並行して考えきれていなかった
- 特に"use client"の最適解が見えず、時間を浪費してしまいました。こちらが参考になりました。
  サービスを開発する中で経験を積んでいくことで慣れるでしょう。
スケジュール管理を厳密にすべきだった
- 趣味の一環でもあるが、ダラダラと続けてしまいました。
  今後はnotionを使用して管理を行っていきます。

おわりに

今後もサービスを展開していく上で意識すべき事項：

サービスの需要を上げる工夫
- 市場調査に半分以上時間費やしても面白そう
- 経営戦略としてサービスを捉える
ユーザー体験の追求
- レスポンスに数秒待つ程度でも何かしら表示するなど、ユーザーが"使いやすい"と感じるような工夫を行うこと
- 短期間の開発でも、このユーザー体験を最優先にすること

ひとまずこれから1ヶ月〜1ヶ月半単位でリリースできるように努めます。