🎵 好きな音楽を共有するライブラリアプリを作成しました。
MUSIC LIBRARY
https://music-library-rouge.vercel.app/login
概要
楽曲を棚で整理・共有し、フレンドのギャラリーに「いいね」やコメントで反応できるコレクションアプリ。
カードをホバーで再生、一時停止、リンクをコピー、spotifyで開く、削除のボタンが表示。
曲カードをクリックで画像のようなモーダルが表示される↓
画像のようにモーダルには曲名、アーティスト名、アルバム名、ライブラリ作成者のこの曲に対してのメモ、各種ボタンが配置。いいねやコメントの一覧も見ることができます。モーダル内の左右に曲移動ボタンを配置して、左右の曲に移動することができます。曲カードはドラッグで入れ替えることができ、自分の好きな順番に入れ替えることができます。将来的には追加日やアーティスト名、いいね数、コメントうすうなどで並び替えの機能も使えるようにしたいです。
再生時にグローバルプレイヤーが表示され、再生、停止、次、前へ、指定の分数の場所へジャンプすることができます。今回の制作ではボタンを押してからの反応が遅く、ここは改善点だと思いました。それとなぜかゲストアカウントでログインすると再生に失敗してしまい、これもいずれ直したいです。
楽曲を追加したい場合は右上の入力欄に題名、アーティスト名などを入力してそこから追加する形です。
ホーム画面の右上にあるフレンドボタンからフレンドのギャラリーを見に行くことができます。
フレンドのギャラリーも同じようにカードをクリックで詳細を見ることができ、コメントやいいねをすることができます。
使い方（ゲストで試す）
-
Outlook にログインし、ゲストメールを受信できる状態にする
Outlook にログイン -
Spotify に以下のゲスト情報でログイン
- メール:
guest.kosotsu@outlook.jp - パスワード:
1234abcd!!
- メール:
-
Outlook で受信した Spotify の認証メールを確認し、認証を完了
-
トップの「ログインページへ」から遷移し、「Spotifyでログイン」を実行
画面とUI
-
ダークテーマの配色例:
#000000,#1a1a1a,#333333,#4d4d4d,#666666 -
フレンドギャラリーカード:
画像比率最適化／ホバーで操作ボタン表示 -
モーダル:
上部余白・タイトル・フッターボタン群の調整、水平線、矢印ナビ、薄い灰ホバー -
「いいね一覧」「コメント」モーダル:
ユーザー名クリックでそのユーザーのギャラリーへ
リアルタイム／永続化の仕様
- いいね・コメント: 楽観的UI更新（即時反映）＋遅延再取得
- ハート状態の保持: 過去にいいねしたアイテムは再入場時も赤色表示
-
コメント一覧:
- 並び順：いいね数降順 → 新着順
- 3行省略＋「全文を表示」対応
エラーハンドリング／UX
-
Spotify再生時のトークン欠如／401エラー:
「Spotifyに再ログインしてください」トーストを表示（モーダル内再生ボタン限定） - 削除操作: 確認モーダルで統一
- useSearchParams: Suspense でラップ処理
技術スタック
| 分類 | 使用技術 |
|---|---|
| フロントエンド | Next.js (App Router), React, TypeScript, Tailwind CSS |
| UI／モーション | Radix UI（Dialog）, framer-motion |
| DnD | dnd-kit |
| 認証／DB／ストレージ | Supabase（RLS, Server Actions, @supabase/ssr） |
| 外部API | Spotify Web API（再生・認証） |
| デプロイ | Vercel |
| 品質 | ESLint（ビルド時一時的に無効化設定あり） |
データモデル（主なテーブル）
| テーブル名 | 内容 |
|---|---|
shelves |
棚情報 |
shelf_items |
棚内の楽曲 |
likes |
楽曲へのいいね |
comments |
コメント本体 |
comment_likes |
コメントへのいいね |
users |
プロフィール（username, display_name, avatar_urlなど） |
重要なUI要件（抜粋）
-
コメントモーダル
- 画面幅：約70%
- 入力欄：下固定／1行→2行自動拡張（スクロールバーなし）
- ダブルEnter：送信
- 単Enter：改行
-
いいね／コメントボタン
- 並び順・位置・ホバー色などピクセル単位で調整
- 枠線／アウトラインを除去
-
入力フォーム（棚作成）
- 「＋」トグル→展開→入力→「作成」ボタン／✕で閉じる
- Enter連打対策あり
開発上のポイント
- Server Actions と Client Component の適切な分離
- RLS（Row Level Security）を意識したクエリ設計
- Supabaseスキーマキャッシュ問題の回避（
getLikesでユーザー別取得） - Spotify再生フローの安定化（トークン／デバイス転送／ポーリング／リトライ）
既知の制約
- Spotifyの開発者設定・ユーザーモードに依存（リダイレクトURI・ユーザー管理）
- Vercel本番環境では ESLint／TS ビルドエラーを一時的に無視設定で回避中
課題と将来的な拡張性
今回のアプリではなるべく直感的で、使いやすいシステムになるように心がけましたが、再生ボタンを押してからのタイムラグやログインシステムの不自由さなどを含めてユーザーの利便性をうまく満たせるようなものにはなりませんでした。それと個人の開発では今回のアプリケーションではspotifyのapiを利用しログインの仕組みを作ったため手動でユーザーを認証しなければ使えないという課題を作った後に知りました。そのほかにもログインしてから時間が経つと再ログインが必要になったり、フレンドギャラリーに行く時のロードに時間がかかりすぎることも改善点の一つです。今回はspotiyをメインにして作りましたが将来的にはどのサブスミュージックアプリでも使えるようにしたいのと、もう少しかっこいいアプリ名をつけたいです。笑
自分の好きな音楽を使ってアプリを作れたことを幸せに感じますし、これからも作ってみたいです。
ほかにも映画や本、ファッションなどの分野でも同じようなことはできると思うのでそこにも挑戦したいです。