Spotify Tag Manager

Spotify Tag Managerは、Spotifyで再生中の楽曲にタグを付けて管理し、タグによる絞り込みでプレイリストを作成できるWebアプリケーションです。

主な機能

• 🎵 楽曲へのタグ付け: 再生中の曲に好きなタグを付けて整理できます
• 🔍 タグによる検索: 保存した曲をタグで絞り込んで検索できます
• 📋 プレイリスト作成: タグで絞り込んだ曲からSpotifyプレイリストを作成できます
• 🎧 プレイバック制御: アプリ内から直接Spotifyの再生をコントロール（Premium会員のみ）
• 📱 レスポンシブ対応: デスクトップからモバイルまで、様々な画面サイズに対応

システム要件

• Spotifyアカウント（無料版またはPremium）
• モダンなWebブラウザ（Chrome, Firefox, Safari, Edge等の最新版）
• インターネット接続

使い方

1. Spotify Web Playerを開く
2. 好きな曲やプレイリストを再生する
3. Spotify Tag Managerにログイン
4. 再生中の曲にタグを付ける
5. タグを使って曲を整理・検索
6. 気に入った組み合わせでプレイリストを作成

検索機能

• AND検索: 選択したすべてのタグを含む曲を表示
• OR検索: 選択したタグのいずれかを含む曲を表示
• タグの絞り込み: 入力した文字列でタグをフィルタリング

プレイリスト作成

1. タグで曲を絞り込む
2. プレイリストに含めたい曲を選択
3. プレイリスト名と説明を入力
4. 「プレイリストを作成」をクリック

技術スタック

• フロントエンド: React (Vite)
• データベース: Supabase
• API: Spotify Web API
• デプロイ: Vercel

開発中の機能

• ✨ タグのカテゴリ分け
• 🔄 タグの一括編集
• 📊 タグの使用統計
• 🎨 カスタムテーマ

ライセンス

このプロジェクトは MIT License のもとで公開されています。

開発者向け情報

ローカル開発環境のセットアップ

# リポジトリのクローン
git clone [repository-url]
cd spotify-tag-manager

# 依存パッケージのインストール
npm install

# 環境変数の設定
cp .env.example .env
# .envファイルを編集して必要な環境変数を設定

# 開発サーバーの起動
npm run dev

必要な環境変数

• VITE_SPOTIFY_CLIENT_ID: SpotifyアプリケーションのClient ID
• VITE_SUPABASE_URL: SupabaseのプロジェクトURL
• VITE_SUPABASE_ANON_KEY: Supabaseの匿名認証キー

フィードバック・貢献

• バグ報告や機能リクエストはIssueページで受け付けています
• プロジェクトへの貢献はコントリビューションガイドラインをご確認ください

注意事項

• このアプリケーションは現在ベータ版として運用されています
• 予告なく機能の変更や運用の停止が行われる可能性があります
• 利用にはSpotifyの開発者向けアプリケーションの承認が必要です