💨

今の気分にあった曲をオススメ！楽曲レコメンドアプリ「MOOD TUNE」をチームで開発した【Best Award受賞】

2024/04/01に公開

Next.js

API

アプリ開発

tech

はじめに

3/25～3/31の1週間にわたりチーム開発を行いました。
昨年12月末にチーム開発に続き今回は２回目になります。
１回目のまとめはこちら↓

今回もBest Mentor Awardを受賞できました。
特に同じ受講生からの「使ってみたい」というコメントが多く、ユーザーの心を動かせる良いアプリが出来たのではないかと思います。

チーム開発の概要

内定直結型のエンジニア実習「アプレンティスシップ」に参加しています。
プログラムに沿ってほぼ独学で学習をしていますが課題のうちの１つがチーム開発です。

今回の課題は「ワクワクするものを開発せよ」
チームメンバーがオンライン上で打ち合わせを重ね、アイデア出し～要件定義～実装まで行いました。

https://www.youtube.com/@apprentice_jp

プロダクト

MOOD TUNE
「どんな気分になりたい？」ボタンと音楽ジャンルのボタンを押すと、そんな気分になれる曲をレコメンドしてくれるアプリです。

TOP画面
背景にはJavaScriptで作られた四角形がふわふわ浮いています
なりたい気分のボタン、ジャンルボタンを選択します
決定ボタンを押すと楽曲がレコメンドされます
聴きたい曲をクリックすると再生されます。背景はジャケットの色に合わせて変化するので見ても楽しめるようになっています。

アプリのコンセプト

音楽好きの人はうすうす気づいていること

SpotifyやApple Music、YouTubeでもそうなのですが、自動で自分の視聴履歴から楽曲をレコメンドしてくれるため、好みの曲が探しやすいものの

「いつも似たようなアーティストや同じ曲をきいている」
「聴いたことがないジャンルだけど意外に良かった！という経験が出来ない」

という欠点もあります。

また音楽を聴くときは「元気になりたい」「泣いてひたってみたい」等、その日の気分に合わせてセレクトしているという話がメンバーから出てきました。

この機能をもった一石二鳥のアプリを作ってみることになりました。

アプリのデザイン

音楽分野はデザインが古いとユーザーにそっぽを向かれるので力を入れました。
メンバーで「こんなデザインがいいのではないか」と思うものを画像資料として集めました。

それらをメンバーで検討し
・シンプル
・ジャケットデザインや音がメイン。それを邪魔しないデザイン
・色を使いすぎない
方向性でいくことにしました。

開発時のポイント

技術面で懸念しているポイントが３つありました。

1. APIとの連携＆楽曲のレコメンドが技術的に可能か？

楽曲を提供してくれるサービスのAPIに値を渡す際に

感情をどう数値化するか
APIがその数値を渡したら答えられる構造になっているか？
APIへの接続はスムーズにいくか？

2. 楽曲に合わせた背景

音楽がかかっている間に背景も変化させたい
しかも音楽に合った背景がいい

3. AIを使用したチャットレコメンド

AIを使用して会話の中で曲をレコメンドしてもらう機能を想定

ChatGPTとの連携

以上の技術的な課題がありました。

開発期間が決まっているので開発に入ってから「やっぱり出来なかった」では間に合いません。
開発前にこれらの技術的な課題を解決できるかを検証する必要がありました。
そこで開発ウィークまでに試作品を作ることにしました。

試作と検証の結果

メンバーでそれぞれ試作品を作り以下の結果になりました。

課題	検証結果
APIとの連携＆楽曲のレコメンド	OK
楽曲に合わせた背景	OK
AIチャットレコメンド	NG

AIチャットレコメンドについては、技術不足でChatGPTとの連携を突破できず今回は見送ることにしました。結果的にこの判断によってリソースを１つの機能に集中することができ
・納期を守る
・メイン機能のクオリティを上げる
・その結果シンプルで使い勝手がいいアプリができる
結果につながりました。

使用技術と構成

楽曲のデータ取得にはSpotifyのAPIを利用。
Spotify API
Get Recommendations

動作の流れ

ボタンを押す→ 感情を数値に変換する
数値をSpotify APIにわたす
Spotify APIからレコメンドリストが渡される
楽曲の再生ボタンをおす
Spotify APIにリクエストをおくる
楽曲のジャケットイメージから色を取得する
取得した色を背景を構成しているプログラムに渡す
背景と音楽が再生される

担当した開発について

1. ロゴ作成
数年前から流行しているY2Kテイストを取り入れシンプルなTOP画面に合わせたロゴに。

2. フロントのデザイン＆実装
フロントのデザインはFigmaで行いました。
ボタンの色は感情に合わせた色にし、パッと見た時に選択しやすく。
色は濁りを抑えたクリアな色で統一しコンセプトに沿ったポップさを出しました。
※背景の四角形はJavaScriptで追加したもので画面内をふわふわと漂っています

3. WEBフォントの導入
今回使用したWEBフォントはこちら。
FOT-UD角ゴ_ラージ Pr6N

AdobeのライセンスであるためGoogle fontに比べNext.jsでの使用はあまり例がなかったのですが、dangerouslySetInnerHTMLを使用することで導入することができました。

WEBフォントは動作が重くなるリスクもある一方でデザインが良くなるのは事実なので、コンセプトと目的によっては検討事項の1つになるのではないかと思います。

4. 再生履歴の保存と再生
再生履歴をAPIから取得し保存する機能も予定していましたが、このAPIのみ認証が複雑で実装のめどがつきませんでした。
ただし、この部分は当初より「メイン機能ではないので可能であれば搭載する」予定であったため今後の開発課題として持ち越すことになりました。

良かった点

- Best Mentor Awardを受賞できた
特に同じ受講生からの「使ってみたい」のコメントが多くその点でユーザーの心を動かせる良いアプリが出来たのではないかと思います。

- チームで協力して楽しく開発できた
チームの連携をとるため、もくもく会の開催、ミーティングではgood&newをそれぞれ話す、等の工夫をしました。その結果、チームで意見も言えて連携もとれる関係性が構築できました。

- 納期に余裕をもたせた開発ができた
事前に「ここまで出来たらOK」の開発ラインを決め、その部分の開発に集中してリソースを割いたことでプレゼンテーションができない状態を避けることができ、精神的な余裕をもって開発ができた。

- GitHubをやっと理解できた（まだ序の口ですが）
これまでは開発のたびにGitHubでのマージでトラブル続きだったのですが、やっと仕組みを理解し問題なく開発の一連の動きができるようになりました。

GitHubのチーム開発でのお作法を記事にまとめたのでぜひご覧ください

改善点

- JavaScriptの学習
Next.jsもReactも大元はJavaScriptであるため、JavaScriptをしっかり理解していないとフロントエンドは立ち行かない事が身に沁みました。
まだJavaScriptを理解している状態とは程遠いのでこちらも力を入れていきたいと思います。

- 認証機能の学習
今回は認証機能を突破できなかったのが悔しかったです。業務ではGoogleの認証機能作成を初日に振られるなどの話も伺ったので、こちらの学習もすすめていきたいと思います。

まとめ

前回に引き続き今回もチームメンバーで協力して良いアプリを作れたので満足です。
引き続き開発と学習を続けていきます。

このアプリを使いたい方へ

使ってみたいという声もあるのですが、現段階では使用する際にSpotifyのアクセストークンの埋め込みが必要であるため外部にコードを提供をしていません。
メンバーが引き続き開発をすすめる話がありますので、もし完成した際にはTwitterで紹介させていただきます。