Mind-Reading Music API をレベルアップ：気分履歴とスマート設定機能でユーザーアカウントを追加

感情を検知するプレイリストジェネレーターを、あらゆるインタラクションから学習するパーソナライズされた音楽アプリに変身させましょう。このチュートリアルでは、ユーザー認証、気分トラッキング分析、インテリジェントな嗜好学習機能を追加し、真にパーソナライズされた音楽体験を実現します。

本日の開発内容

感情を検知してプレイリストを生成できた Mind-Reading Music API を覚えていますか？本日は、この API をパーソナルなものにしていきます。追加される機能:

実際に機能するユーザー認証 (複雑な OAuth の問題はありません)
美しい分析機能を備えたムード履歴ダッシュボード
ユーザーの行動から学習するスマートなプレイリスト設定
時間の経過とともに改善されるパーソナライズされた推奨事項
データの永続性により、ユーザーが音楽の旅を失わないようにする

このチュートリアルを完了すると、API は、Sarah が悲しいときにインディーロックを好むこと、Mike が集中セッションではクラシック音楽を好むことを記憶するようになります。

必要なもの

前のチュートリアルで完成した Mind-Reading Music API
30 分間の集中的なコーディング時間
MongoDB Atlas アカウント（無料利用枠で問題なく動作します）
データベースの基礎知識（シンプルに説明します！）

ユーザー認証の設定（簡単な方法）

まず、ユーザー管理に必要なパッケージを追加しましょう。

コードエディターでターミナルに移動し、次のコマンドを入力または貼り付けて、Enter キーを押します。

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

手順 1: データベース接続のセットアップ

インストールが完了したら、database.js という新しいファイルを作成し、次のコードを追加します。

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 Connecting to MongoDB...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB が正常に接続されました!'); } catch (error) { console.error('❌ MongoDB 接続に失敗しました:', error.message); process.exit(1); } }; module.exports = connectDB;

そして、cmd + s、ctrl + s、または ファイルを選択して保存 で保存します。

MongoDB Atlas アカウントを作成します

アクセスします: mongodb.com/cloud/atlas
クリックします: 「開始する」ボタン (通常は右上隅にあります)

サインアップオプション

アカウントを作成するには、3つの方法があります。

オプションA：メールサインアップ

「メールでサインアップ」をクリック
メールアドレスを入力
強力なパスワードを作成
「Atlasアカウントを作成」をクリック

オプションB：Googleサインアップ

「Googleでサインアップ」をクリック
Googleアカウントを選択
必要な権限を付与

オプションC：GitHubサインアップ

「GitHubでサインアップ」をクリック
承認MongoDB Atlas を使って GitHub アカウントにアクセスします

メールを確認してください

メールの受信トレイを確認してください
MongoDB からの確認リンクをクリックしてください
これでアカウントが本物であることが確認されます

最初のデータベースクラスターを作成してください

ログイン後にダッシュボードが表示されない場合は、右上隅の名前をクリックして次のドロップダウンを開き、Atlas をクリックしてください。

Atlas ダッシュボードが表示されます。データベースを作成しましょう！

デプロイメントタイプを選択します

左側のサイドバーから「データベース」の下にある 「クラスター」 をクリックします

「クラスターの構築」をクリックします

「無料」を選択します。

クラスターのデプロイページにリダイレクトされるので、無料プランを選択します。

クラウドプロバイダーの選択: 3 つのプロバイダーオプションが表示されます。

AWS (Amazon Web Services) ⭐ 推奨
Google Cloud Platform
Microsoft Azure

選択: AWS (最も人気があり、リージョンが最も多い)

リージョンの選択: AWS を選択すると、多くのリージョンを含むドロップダウンが表示されます。パフォーマンスを向上させるには、お住まいの地域に最も近いものを選択してください。

🇺🇸 米国:

us-east-1 (バージニア州北部) - 東海岸
us-west-2 (オレゴン州) - 西海岸
us-central-1 (アイオワ州) - 中央

🇪🇺 ヨーロッパ:

eu-west-1 (アイルランド) - 西ヨーロッパ
eu-central-1 (フランクフルト) - 中央ヨーロッパ
eu-west-2 (ロンドン) - イギリス

🌏 アジア太平洋:

ap-southeast-1 (シンガポール) - 東南アジア
ap-south-1 (ムンバイ) - インド
ap-northeast-1 (東京) - 日本

💡 プロのヒント: よくわからない場合は、us-east-1 を選択するのが通常最も安全で、機能も豊富です。

次に、[デプロイメントの作成] ボタンをクリックします。

データベースユーザーの作成

ステップ 3.1: データベースユーザーの追加

「セキュリティクイックスタート」画面が表示されます
認証方法: 「ユーザー名とパスワード」を選択したままにします
ユーザー名: ユーザー名を入力します（例: mood-music-user）
パスワード:
- オプション A: 「安全なパスワードを自動生成」をクリックします（推奨）
- オプション B: 独自の強力なパスワードを作成します（少なくとも8文字）
パスワードをすぐにコピーしてください。 接続文字列に必要になります。

⚠️ パスワードをすぐにコピーして保存してください。

クリック:「データベースユーザーの作成」
クリック:「接続方法の選択」

接続方法の選択

いくつかの接続オプションが表示されます:

ドライバー 👈 これは Node.js アプリに必要なものです
Compass (MongoDB のデスクトップ GUI アプリケーション)
Shell (MongoDB コマンドラインインターフェース)
MongoDB for VS Code (VS Code 拡張機能)
Atlas SQL (MongoDB の SQL インターフェース)

選択:「ドライバー」 - Node.js などのアプリケーションの接続文字列が表示されます

ドライバー接続の設定

「ドライバー」を選択した後:

ドライバー: ドロップダウンから「Node.js」を選択します
バージョン: Node.js のバージョンを選択するか、デフォルトのままにします (通常は問題なく動作します)
接続文字列: 以下に接続文字列が表示されます

接続文字列

次のようなものが表示されます:

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

重要: これはテンプレートです。次の手順が必要です。

<username> をデータベースのユーザー名に置き換えます。
<password> をデータベースのパスワードに置き換えます。
.net/ の後にデータベース名を追加します。

変換例

変更前 (テンプレート):

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

変更後 (使用可能):

mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority

注意:

<username> → mood-music-user
<password> → MySecurePassword123
データベース名として /mood-music-db を追加しました

「完了」をクリックします

手順 5: プロジェクトに接続文字列を追加します

.env ファイルを更新します

.env を開きますファイルを開いて以下を追加してください:

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random SESSION_SECRET=another-secret-key-for-sessions-also-long-and-random

強力なシークレットを生成する

JWT_SECRET と SESSION_SECRET には、設定ファイルを壊さないランダムな文字列が必要です。

⚠️ 重要: パスワードには @、#、$、%、/、? などの特殊文字を使用しないでください。接続文字列や JSON ファイルが壊れる可能性があります。

オプション A: シンプルなオンラインジェネレーター (推奨)

アクセス: JWTSECRETS
設定:
- パスワードの数: 1
- パスワードの長さ: 32
- ✅「大文字 (A-Z)」にチェックを入れる
- ✅「大文字 (A-Z)」にチェックを入れる「小文字（a～z）」
- ✅「数字（0～9）」にチェックを入れる
- ❌「句読点」のチェックを外す
「パスワードを取得」をクリックする

オプション B: ブラウザコンソールを使用する（超簡単！）

任意のウェブサイトを開く（google.com など）
F12 キーを押す（または右クリック → 「検証」を選択）
「コンソール」タブをクリックする

このコードを貼り付け、Enter キーを押します:

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)

結果をコピーします - 次のようになります: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

オプション C: 手動の方法 (他の方法がすべて失敗した場合)

次を使用して長いランダム文字列を入力します:

文字: A-Z、a-z
数字: 0-9
例: MyApp2024SecretKey789RandomString456Auth

最終的な .env の例

SPOTIFY_CLIENT_ID=your_spotify_client_id_here SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

重要なポイント:

✅ JWT_SECRET と SESSION_SECRET に特殊文字は使用しない
✅ MongoDB パスワードで URL を分割する文字を避ける
✅ すべてのシークレットは長くランダムである
✅ JSON ファイルと接続文字列で安全に使用できる

ステップ 2: ムード付きユーザーモデルトラッキング

「models」というフォルダを作成し、その中に「User.js」というファイルを追加します。そして、以下のコードをファイルに追加して保存します。

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ text: String,detectedMood: String, confidence: Number,playlistGenerated: [{ trackName: String, artist: String, spotifyId: String,liked: { type: Boolean, default: null } }], timestamp: { type: Date, default: Date.now } });const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, trim: true, minlength: 3 }, email: { type: String, required: true, unique: true, lowercase: true }, password: { type: String, required: true, minlength: 6 }, moodHistory: [moodEntrySchema], preference: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // 保存前にパスワードをハッシュします userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // パスワードを比較します userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // ユーザーの統計を計算します userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // 最も一般的な気分を見つけます const moodCounts = moods.reduce((acc, mood) => { acc[mood] = (acc[mood] || 0) + 1; return acc; }, {}); this.stats.mostCommonMood = Object.keys(moodCounts).reduce((a, b) => moodCounts[a] > moodCounts[b] ? a : b, 'neutral'); // 一日の中で好きな時間帯を決定します const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; if (avgHour < 6) this.stats.favoriteTime = 'night'; else if (avgHour < 12) this.stats.favoriteTime = 'morning'; else if (avgHour < 18) this.stats.favoriteTime = 'afternoon'; else this.stats.favoriteTime = 'evening'; }; module.exports = mongoose.model('User', userSchema);

ステップ 3: 認証ミドルウェア

middleware というフォルダーを作成し、その中に auth.js というファイルを追加します。次に、次のコードをファイルに追加して保存します。

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; if (!token) { return res.status(401).json({ error: 'No token provided' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ error: 'User not found' }); } req.user = user; next(); } catch (error) { res.status(401).json({ error: 'Invalid token' }); } }; module.exports = auth;

美しい分析機能を備えたユーザーダッシュボード

プロジェクトに新しいフォルダーを作成して public という名前を付け、このフォルダー内にファイルを追加して index.html という名前を付けます。

<!DOCTYPE html> <html> <head> <title>Mind-Reading Music API - 個人用ダッシュボード</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .dashboard { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: rgba(255,255,255,0.9); border-radius: 15px; padding: 25px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; margin-bottom: 30px; } .mood-history { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; } .history-item { background: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 15px; border-left: 4px solid #667eea; } .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } button { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; cursor: pointer; font-weight: 600; } button:hover { transform: translateY(-2px); } </style> </head> <body> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 おかえりなさい！</h2> <input type="text" id="loginUsername" placeholder="Username"> <input type="password" id="loginPassword" placeholder="Password"> <button onclick="login()">ログイン</button> <p><a href="#" onclick="showRegister()">アカウントをお持ちではありませんか？サインアップ</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵音楽プロフィールを作成</h2> <input type="text" id="regUsername" placeholder="ユーザー名"> <input type="email" id="regEmail" placeholder="メールアドレス"> <input type="password" id="regPassword" placeholder="パスワード"> <button onclick="register()">アカウントを作成</button> <p><a href="#" onclick="showLogin()">すでにアカウントをお持ちですか？ログイン</a></p> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 あなただけのミュージック マインド リーダー</h1> <p>ようこそ、<span id="username"></span>！ あなたにぴったりのサウンドトラックを見つける準備はできましたか？</p> <button onclick="logout()" style="width:auto; margin-top:10px;">ログアウト</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊合計プレイリスト</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊お気に入りのムード</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐ベストタイム</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 トップジャンル</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 今の気分はどうですか？</h2> <textarea id="moodText" placeholder="今の気分、何が起こっているか、どのように感じたいかを説明してください..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 完璧なプレイリストを生成</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 あなたの気分の旅</h2> <div id="historyContainer"></div> </div> </div> <script src="/js/app.js"></script> </body> </html>

次に、public フォルダー内にフォルダーを作成して js という名前を付け、js フォルダー内に次のコードを含む app.js ファイルを作成します。

let authToken = localStorage.getItem('authToken'); let currentUser = null; if (authToken) { loadDashboard(); } function showLogin() { document.querySelector('.login-section').style.display = 'block'; document.getElementById('registerSection').style.display = 'none'; } function showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } async function login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; if (!username || !password) { alert('すべてのフィールドに入力してください'); return; } try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } else { alert(data.error || 'ログインに失敗しました'); } } catch (error) { console.error('ログイン エラー:', error); alert('ログインに失敗しました。もう一度お試しください。'); } } async function register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!username || !email || !password) { alert('すべてのフィールドに入力してください'); return; } try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) }); const data = await response.json(); if (response.ok) { alert('アカウントが正常に作成されました。ログインしてください。'); showLogin(); } else { alert(data.error || '登録に失敗しました'); } } catch (error) { console.error('登録エラー:', error); alert('登録に失敗しました。もう一度お試しください。'); } } async function loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { logout(); } } catch (error) { console.error('ダッシュボード読み込みエラー:', error); logout(); } } function showDashboard() { document.getElementById('authSection').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('username').textContent = currentUser.username; } function updateStats() { document.getElementById('totalPlaylists').textContent = currentUser.stats.totalPlaylists || 0; document.getElementById('favoriteMood').textContent = currentUser.stats.mostCommonMood || '-'; document.getElementById('bestTime').textContent = currentUser.stats.favoriteTime || '-'; document.getElementById('topGenre').textContent = (currentUser.preferences.favoriteGenres && currentUser.preferences.favoriteGenres[0]) || '-'; } function loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); if (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = '<p>まだムード履歴がありません。最初のプレイリストを生成してください!</p>'; return; } const recentHistory = currentUser.moodHistory.slice(-5).reverse(); historyContainer.innerHTML = recentHistory.map(entry => `<div class="history-item"> <strong>${entry.detectedMood}</strong> - ${new Date(entry.timestamp).toLocaleDateString()} <p>${entry.text}</p> <small>${entry.playlistGenerated.length} tracks generated</small> </div>` ).join(''); } async function generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('あなたの気分を説明してください!'); return; } try { const response = await fetch('/api/personalized-playlist', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ text: moodText }) }); const data = await response.json(); if (response.ok) { displayPersonalizedResults(data); loadDashboard(); } else { alert(data.error || 'プレイリストの生成に失敗しました'); } } catch (error) { console.error('プレイリスト生成エラー:', error); alert('プレイリストの生成に失敗しました。もう一度お試しください。'); } } function displayPersonalizedResults(data) { const resultDiv = document.getElementById('result'); resultDiv.style.display = 'block'; const html = ` <h3>検出された気分: ${data.moodAnalysis.mood} (信頼度: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'これがあなたのプレイリストです!'}</p> <div class="playlist"> ${data.playlist.map(track => ` <div style="display: flex; align-items: center; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 8px;"> ${track.album_image ? `<img src="${track.album_image}" alt="アルバム" style="width:50px;height:50px;border-radius:8px;margin-right:15px;">` : ''} <div style="flex: 1;"> <strong>${track.name}</strong><br> <span style="color: #666;">${track.artist}</span> </div> <div> <button onclick="likeTrack('${track.id}', true)" style="width:auto;padding:5px 10px;margin:0 5px;">👍</button> <button onclick="likeTrack('${track.id}', false)" style="width:auto;padding:5px 10px;margin:0 5px;">👎</button> </div> </div> `).join('')} </div> `; resultDiv.innerHTML = html; } async function likeTrack(trackId, favourite) { try { await fetch('/api/track-feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ trackId: trackId, favourite: favourite }) }); alert(liked ? 'ありがとうございます。このようなトラックをもっとおすすめします。' : '了解しました。同様のトラックは避けます。'); } catch (error) { console.error('フィードバック エラー:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin();

server.js ファイルの置き換え

server.js ファイルのコードを以下のように置き換えます:

require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const jwt = require('jsonwebtoken'); const auth = require('./middleware/auth'); const User = require('./models/User'); const moodAnalyzer = require('./moodAnalyzer'); const PlaylistGenerator = require('./playlistGenerator'); // MongoDB に接続します const connectDB = async () => { try { console.log('🔗 MongoDB に接続しています...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB が正常に接続されました!'); } catch (error) { console.error('❌ MongoDB 接続に失敗しました:', error.message); process.exit(1); } }; connectDB(); const app = express(); const PORT = process.env.PORT || 3000; const playlistGen = new PlaylistGenerator(); app.use(express.json()); app.use(express.static('public')); // メイン ページを提供します app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // ユーザー登録 app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; if (!username || !email || !password) { return res.status(400).json({ error: 'すべてのフィールドが必須です' }); } if (password.length < 6) { return res.status(400).json({ error: 'パスワードは6文字以上でなければなりません' }); } const existingUser = await User.findOne({ $or: {[ email }, { username }] }); if (existingUser) { return res.status(400).json({ error: 'ユーザー名またはメールアドレスが既に存在します' }); } const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'ユーザーが正常に作成されました' }); } catch (error) { console.error('登録エラー:', error); res.status(500).json({ error: '登録に失敗しました' }); } }); // ユーザーログイン app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ $or: {[ username }, { email: username }] }); if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, user: { username: user.username, email: user.email } }); } catch (error) { console.error('ログインエラー:', error); res.status(500).json({ error: 'ログインに失敗しました' }); } });// ユーザー プロファイルを取得します。 app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); await req.user.save(); res.json(req.user); } catch (error) { res.status(500).json({ error: 'プロファイルの読み込みに失敗しました' }); } }); // パーソナライズされたプレイリストの生成 app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'あなたの気分を教えてください!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // ユーザーの履歴に保存 req.user.moodHistory.push({ text,detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, playlistGenerated: playlist.map(track => ({ trackName: track.name, artist: track.artist, spotifyId: track.id })) }); req.user.updateStats(); await req.user.save(); res.json({ moodAnalysis, playlist, personalisedMessage: `あなたの履歴に基づいて、このプレイリストをあなたの${moodAnalysis.mood}の気分に合わせてカスタマイズしました!` }); } catch (error) { console.error('パーソナライズされたプレイリストのエラー:', error); res.status(500).json({ error: 'パーソナライズされたプレイリストを生成できませんでした。もう一度お試しください。' }); } }); // フィードバックを追跡します app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, favourites } = req.body; res.json({ message: 'フィードバックを受信しました。今後の推奨事項を改善します。' }); } catch (error) { console.error('フィードバック エラー:', error); res.status(500).json({ error: 'フィードバックを処理できませんでした' }); } }); app.listen(PORT, () => { console.log(`🚀 Mind-Reading Music API running on http://localhost:${PORT}`); console.log('🧠 Ready to analyze moods and generate playlists!'); });

実行できるようになること

1.匿名ユーザー (オリジナル機能)

ログインせずにウェブサイトにアクセスする
既存の気分分析を使用してプレイリストを生成する
感情に基づいて音楽を推奨する

2. 登録ユーザー (新機能)

アカウントを作成してログインする
時間の経過とともに改善されるパーソナライズされたプレイリストを生成する
気分の履歴と個人の分析を表示する
トラックを高く評価/低く評価して AI をトレーニングする
お気に入りの気分、プレイリストの合計数などの統計情報を表示する

ステップバイステップのテストガイド

テスト 1: サーバーの起動を確認する

node server.js

次のように表示されます。

🔑 Spotify の認証を試行しています... 🎵 Spotify が正常に接続されました。 🔗 MongoDB に接続しています... ✅ MongoDB が正常に接続されました! 🚀 Mind-Reading Music API は http://localhost:3000 で実行されています 🧠 気分を分析してプレイリストを生成する準備ができました!

テスト 2: ウェブサイトにアクセスします

アクセス先: http://localhost:3000

表示される内容:

ユーザー名とパスワードを求めるログインフォーム
「アカウントをお持ちではありませんか? サインアップ」リンク

テスト 3: 最初のアカウントを作成します

クリック:「アカウントをお持ちではありませんか? サインアップ」
入力内容:
- ユーザー名: testuser
- メールアドレス: test@example.com
- パスワード: password123
クリック:「アカウントを作成」
期待される結果:「アカウントが正常に作成されました。ログインしてください。」

テスト 4: ダッシュボードにログイン

作成した認証情報を使用する
クリック:「ログイン」
次の画面が表示されます:
- ユーザー名が記載されたウェルカムメッセージ
- 統計カードにプレイリストが 0 件、お気に入りのムードはまだ表示されていない
- 「今の気分はどうですか？」と尋ねるテキストエリア

テスト 5: 最初のパーソナライズされたプレイリストを生成する

次のような内容を入力します:「新しいプロジェクトにとてもワクワクしています！」
クリック:「自分にぴったりのプレイリストを生成」
表示される内容:
- 検出された気分（おそらく「元気」または「幸せ」）
- アルバムアートワーク付きの曲リスト
- プレビューオーディオプレーヤー（利用可能な場合）
- 各曲の高評価/低評価ボタン

テスト6: 学習システムのテスト

気に入った曲には高評価ボタン 👍 をクリック
気に入らない曲には低評価ボタン 👎 をクリック
期待される結果:「ありがとうございます！似たような曲をもっとおすすめします」というアラートメッセージ

テスト7: 統計の更新を確認する

ページまたは別のプレイリストを生成します
統計情報は次のようになります:
- プレイリストの合計: 1 (またはそれ以上)
- お気に入りのムード: 検出されたムード
- その他の統計情報が表示され始めます

さまざまなシナリオのテスト

さまざまなムードを試します:

「ガールフレンドと別れたばかりで、雨が降っています」(検出される値: 悲しい)
「ワークアウトセッションに向けて気分が盛り上がっています!」 (検出される値: 活発)
「ただ落ち着いて静かに勉強したいだけ」(検出される値: 冷静)
「このデートの夜はロマンチックな気分」(検出される値: ロマンチック)

テストエッジケース:

「」(空 - エラーを表示)
「asdf ランダムテキスト」(デフォルトは中立/冷静)
「私は非常に興奮しています!!!」 (より高い信頼性が検出されるはずです)

一般的な問題とクイック修正

❌「MongoDB 接続に失敗しました」

確認: .env ファイルは MongoDB 接続文字列で適切に設定されていますか?

# これを実行してデータベース接続をテストします node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Set ✅' : 'Missing ❌');"

❌「Spotify への接続に失敗しました」

確認: Spotify API キーが .env ファイルにありますか?

# これを実行して Spotify の資格情報を確認します node -e "require('dotenv').config(); console.log('Spotify Client ID:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ ログイン/登録が機能しない

確認: ブラウザコンソールにエラーメッセージが表示されていますか?

F12 キーを押し、[コンソール] タブを開きます
赤色のエラーメッセージを探します

❌ ページに古いインターフェースが表示されます

解決方法: ページを強制的に更新します

Ctrl+Shift+R キーを押します (Windows/Linux)
Cmd+Shift+R キーを押します (Mac)

機能するはずの機能とまだ基本的な機能

✅ すぐに機能するはずの機能:

ユーザー登録とログイン
基本的な気分の検出とプレイリストの生成
気分の履歴をデータベースに保存します
シンプルな高評価/低評価のフィードバック
統計の追跡（プレイリストの総数、お気に入りのムード）

🚧 まだ基本（高度な機能は後で）:

ユーザーからのフィードバックからの複雑な機械学習
ソーシャル機能とプレイリストの共有
高度な分析とムードパターン
モバイルアプリのインターフェース

テスト後の次のステップ

すべてがうまくいったら:

さまざまなユーザーで試す - 複数のアカウントを作成して、パーソナライズがどのように異なるかを確認する
複数のプレイリストを生成する - 統計と好みがどのように変化するかを確認する
トラックにフィードバックを提供する - システムがあなたの好みをどのように学習するかを確認する
MongoDB Atlas ダッシュボードを確認する - データが保存されていることを確認する

結論

あなたは驚くべきものを構築しました。人間の感情を理解するだけでなく、時間の経過とともに個人の好みを学習して適応する AI です。Mind-Reading Music API には、記憶、個性、そしてユーザーとともに成長する能力が備わりました。

気分検出、ユーザー学習、パーソナライズされた推奨事項の組み合わせにより、インタラクションごとに魔法のようなエクスペリエンスが生まれます。各ユーザーの旅はユニークになり、感情的な生活にパーソナルなサウンドトラックが構築されます。

これで、API はあらゆる気分を記憶し、すべてのインタラクションから学習し、各ユーザーの音楽の好みを包括的に理解できるようになりました。これが、真にパーソナライズされた AI エクスペリエンスの基盤となります。

次のステップ

さらに進化させる準備はできましたか?興味深い方向性をいくつかご紹介します。

高度な分析: 気分のパターン認識と予測的な推奨事項を追加します。
ソーシャル機能: ユーザーがプレイリストを共有し、友人の音楽の好みを発見できるようにします。
モバイルアプリ: iOS/Android 向けの React Native または Flutter アプリを構築します。
音声統合: ハンズフリーで気分を入力できるように音声テキスト変換を追加します。
機械学習: より優れた推奨事項を実現するために協調フィルタリングを実装します。
デプロイ: 適切な環境変数を使用して AWS/Vercel にデプロイします。

実験と構築を続けてください。パーソナライズされた AI エクスペリエンスの未来はあなたの手の中にあります。

次のチャレンジの準備はできていますか？ソーシャル機能と協調フィルタリングを追加して、感情的な体験の共有を通じて人々をつなぐ音楽発見ネットワークを作成する方法に関する今後のチュートリアルにご期待ください。