Skip to content

Latest commit

 

History

History
181 lines (120 loc) · 8.45 KB

prd.md

File metadata and controls

181 lines (120 loc) · 8.45 KB
Raw

Relaym PRD (プロダクト要求仕様書)

概要

Relaym（リレイム）は、それぞれが聴きたいSpotifyの楽曲を1つのスピーカーで楽しめるWebアプリです。

どんな問題を解決するプロダクトか？

  • ドライブ中に曲を流すことがあるが、複数人の場合、みんなが口々に流したい曲を言い合って、スマホを操作している人が大変、、、
  • 作業用BGMを募集したいけど、別々のサービスのURLが送られてきて作業が中断される、、、

誰のために問題を解決するのか？

  • 友人同士でドライブに行く大学生
  • 一緒に勉強・作業している大学生
  • 家に集まって一緒にご飯を食べている大学生
  • 作業用BGMを募集したい人

シーケーンス

Relaymを開いてから曲の再生まで

  1. 曲を再生する人がRelaymにログインする
  2. 新規のセッションを作成する
  3. 招待リンクをLINEで友人らに伝える
  4. 友人らがRelaymを開く
  5. 各々が検索画面から好きな曲を追加する
  6. 曲を再生する人が再生ボタンを押して再生を始める

招待リンクを受け取ってからセッションに参加するまで

  1. 招待リンクをクリックする
  2. セッションページが開かれる

ゴール

上のコンセプトを実現する最低限の機能を良いUXで提供して、リリースすることを目標にする。

機能追加はできるだけ絞って、素早くリリースできるように心がける。

プロトタイプ

あくまでプロトタイプであり、この通り実装するわけではないことに注意。

カラーパレット

https://coolors.co/dc4a5e-14213d-707070-eeeeee-ffffff

各種リンク

機能要求

ユーザ (user)

  • セッションを作成するユーザはSpotifyのプレミアムアカウントを持っている必要がある
  • セッションに参加するだけのユーザはSpotifyのアカウントを持っている必要はない
  • 一度ログインすると、クッキーを消す or サーバ側でクッキー情報を削除した場合のみログアウトされる

セッション (session)

セッションは一つの集まり (ex. 一緒にドライブに行く友人ら)を表す。ユーザが行う曲に関連する操作はすべてセッションを通じて行われる。

セッションの作成

  • セッションはSpotifyのプレミアム会員のユーザのみ作成できる。
    • プレミアム会員しか好きな曲を好きなタイミングで再生できない
  • セッション作成時に好きな名前をつけることができる。
    • 現状は変更不可 (変更したいユースケースが思いつかない)
  • セッション作成時に、作成者以外にが再生/一時停止ボタンを操作できるか指定出来る
    • 作業用BGM募集などのユースケースでは他人に操作されると困るので
  • セッション作成時にセッションに参加するための招待リンクを作成できる
  • セッションの作成者は作成者 (creator) と呼ばれる。

セッションのメイン画面

  • 現在再生中の曲 or 一時停止中の曲が画面上に目立って表示されている
  • 追加された曲がキュー(queue)に追加されていて、表示されている
  • 再生が終わった曲は上にスクロールすると表示できる
  • 右下のボタンを押すと検索画面に推移できる
  • 左下のボタンを押すと再生デバイスの選択ポップアップが出現する
  • 作成者は中央下のボタンを押すことで再生(PLAY)・一時停止(PAUSE)を行うことができる
  • 作成者以外の操作が許可されていた場合のみ、中央下のボタンを押すことで再生(PLAY)・一時停止(PAUSE)を行うことができる
  • シークバーがリアルタイムで更新される
    • クライアント側でタイマーを持つ
  • 次の曲に移るとトップに表示されている情報が切り替わる
  • 作成者はセッションをアーカイブできる
  • 作成者はセッションのアーカイブを解除できる
  • アーカイブされたセッションは再生できない

曲の追加

  • 検索画面で検索クエリを用いて曲を検索することができる
    • 20件の検索結果が表示される
    • リコメンドではなく自分で具体的な検索クエリを打つので、検索順位が低い曲を見ることは少ないので、Lazy Loadは行わない。
  • +ボタンを押して曲をキューに追加すると、追加された旨がスナックバーで表示される
  • 曲を追加しても検索画面が閉じることはなく、そのまま別の曲も追加できる
    • あるアーティストの曲を何曲も流したいという状況が想定されるため
  • 一つのセッションに同じ曲を複数回登録することができる
  • 追加できる曲数に制限はない
  • キューの曲順の変更はできない
  • キューにした曲の削除はできない (いまのところ)

セッションの状態

名前 説明
PLAY 曲が再生されている状態
PAUSE 曲を再生していたが途中で一時停止ボタンを押した状態
STOP 曲の再生を一度も開始していない or すべての曲の再生が終了した状態
ARCHIVED セッションがアーカイブされた状態

状態遷移パターン

  • STOP → PLAY
  • PLAY → STOP
  • PLAY → PAUSE
  • PAUSE → PLAY
  • PAUSE → STOP
  • PLAY | PAUSE | STOP → ARCHIVED (session作成者のみ可能)
  • ARCHIVED → STOP (session作成者のみ可能)

曲の再生

  • 流している曲が終了して次の曲がキューに存在する場合、自動で次の曲がスタートする
  • 流している曲が終了して次の曲がキューに存在しない場合、再生が終了(STOP)する
  • 再生しようとしたが、再生するデバイスが存在しない場合はモーダルが表示される
    • そのモーダルをタップすると自動でSpotifyアプリが開く
    • SpotifyアプリからRelaymに戻ってきたら、再生したかった曲が再生される

Spotifyとの同期チェック

Spotify本体側のアプリを操作されると、Relaymの情報とSpotify側の情報に齟齬が生じてしまう。
Relaym側を完全に正として扱うのは技術的に極めて難しいので、Spotify側で操作されたら同期をとるのは諦める。

  • 同期のチェックは現在再生している曲とされる曲の終了時間 + 5秒後に行う。
    • 次の曲が存在する場合、Spotify側の「次に再生する曲」に曲が詰まれていて、それがこのタイミングで再生されているはず。
    • ここで違う曲が流れていたらSpotify側で操作されたとみなす。
    • 想定される曲が流れていた場合、現在の再生時間から次のチェック時間を計算してタイマーをセットする 。
  • GET /sessions/:id を叩いたときにも同期チェックを行う

Spotifyとの曲の同期に失敗したとき

  • 想定外の操作があったら、STOPに移行する
  • 想定外の操作が起こったことををモーダルでユーザに表示される

競合

Spotify コラボプレイリスト

https://support.spotify.com/jp/using_spotify/playlists/create-playlists-with-your-friends/

友達を誘ってオリジナルプレイリストを一緒に作ろう！プレイリストをコラボに設定すると、だれでも曲の追加や削除、再生順の変更などを自由にできるようになります。

  • 公式で似たような機能を出している()