Mind-Reading Music API に友達を追加する: リアルタイムのソーシャル共有

Mind-Reading Music API を本当にソーシャルなものにする準備はできましたか? このチュートリアルでは、強力な友達システムと、データベースに保存されるプレイリスト共有を追加します。これにより、ユーザーはオンラインでないときでも友達が共有したプレイリストを表示できるようになります。リアルタイム更新には Socket.io を、永続ストレージには MongoDB を使用します。

構築するもの

友達システム – ObjectId を使用して、ユーザー名で相互の友達関係にある友達を追加および管理します。
永続的なプレイリストの共有 – 共有されたプレイリストはデータベースに保存され、いつでも表示できます。
リアルタイム通知 – 友達が共有したときにすぐに通知を受け取ります (オンラインの場合)。
アクティビティフィード – クリック可能なプレイリストプレビューで最近の友達の共有を確認します。
強化されたムード分析 – 検索フォールバックを備えたスマートなプレイリスト生成。

前提条件

完成した Mind-Reading Music API (パート 2
MongoDB、Node.js、npm のインストール
Spotify API 認証情報 (クライアント ID とシークレット)
コーディング時間 30～45 分

パート 2 では、気分の履歴とスマート設定を備えたユーザーアカウントを作成しました。次は、これをソーシャルなものにしてみましょう。ユーザーを接続し、プレイリストをリアルタイムと永続的に共有する方法や、友達が気分に基づいて何を聴いているかを確認する方法を学びます。

主要な概念の理解

コードの説明に入る前に、何を構築しているのかを理解しましょう。

Socket.io – サーバーとブラウザー間のリアルタイムの双方向通信を可能にするライブラリです。テキストメッセージではなく電話のようなものだと考えてください。ページを更新することなく、情報を瞬時に送受信できます。
永続ストレージ – データを MongoDB データベースに保存し、ユーザーがログアウトしてもそこに残ります。これは、ファイルをメモリ内に保持するのではなく、ハードドライブに保存するようなものです。
オブジェクト ID 参照 – MongoDB がデータ間の関係を作成する方法です。友達の情報をすべて自分のプロフィールにコピーするのではなく、友達のプロフィールへの参照（ポインタなど）を保存するだけです。
スキーマ – これらは、データの構造を定義する設計図と考えてください。これらは、各ドキュメントに必要なフィールドと、各フィールドに入力するデータの種類を MongoDB に指示します。

ステップ 1: 必要な依存関係のインストール

プロジェクトディレクトリでターミナルを開き、リアルタイム機能のために Socket.io をインストールします。

npm install socket.io

このコマンドの実行内容: このコマンドは、Socket.io ライブラリをダウンロードしてプロジェクトにインストールします。 npm install コマンドは、npm レジストリ (JavaScript コードの巨大なライブラリ) からパッケージを取得し、それらを node_modules フォルダーに追加します。

その他の依存関係 (sentiment、spotify-web-api-node、bcryptjs、jsonwebtoken、mongoose、express、dotenv) は、パート 2 で既にインストールされているはずです。

ステップ 2: ソーシャル機能を使用してユーザーモデルを更新する

パート 2 で既にユーザーモデルを作成しているため、これを更新してソーシャル機能を追加します。ユーザーモデルは、データベースに各ユーザーについてどのような情報を保存するかを定義するテンプレートのようなものです。

追加するもの:

friends 配列 – 他のユーザーへの ObjectId 参照のリスト。完全なユーザー情報を保存する代わりに、データベース内の他のユーザードキュメントを指す ID のみを保存します。
sharedWith フィールドと isShared フィールド – これらは、どのムードエントリが共有され、誰と共有されたかを追跡します。
sharedPlaylistSchema – 共有プレイリストがどのようになるかを定義する新しいスキーマ (ブループリント)。共有者、そのムードの内容、トラック、共有日時を定義します。
sharedPlaylists 配列 – 友人があなたと共有したすべてのプレイリストを保存するリストです。

models/User.js を次のコードに置き換えます。

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // 個々のムードエントリのスキーマ（ユーザーがプレイリストを生成するたびに生成されます） const moodEntrySchema = new mongoose.Schema({ text: String, // ユーザーが入力した内容（例：「今日は幸せな気分」）detectedMood: String, // アナライザーが検出したムード（例：「幸せな」） confidence: Number, // 信頼度（0～10）playlistGenerated: [{ // 推奨するトラックの配列 trackName: String, artist: String, spotifyId: String, favourites: { type: Boolean, default: null } // null = 評価なし、true = 気に入った、false = 気に入らなかった }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // 誰と共有したか？ isShared: { type: Boolean, default: false }, // 共有されたか？ 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 sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // 共有した友人への ObjectId 参照 sharedByUsername: String, // 簡単に表示するためのユーザー名 (パフォーマンスのために非正規化) mood: String, // このプレイリストはどんな気分でしたか? playlist: [{ // 実際のトラック name: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // いつ共有されましたか? }); // メイン ユーザー スキーマ - ユーザー ドキュメントの構造を定義します。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 }, friends: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // 友達への ObjectId 参照の配列 moodHistory: [moodEntrySchema], // このユーザーが生成したすべてのプレイリスト sharedPlaylists: [sharedPlaylistSchema], // 友達がこのユーザーと共有しているプレイリスト preference: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // createdAt フィールドと updatedAt フィールドを自動的に追加します // ミドルウェア: ユーザーを保存する前にこの関数を実行します (パスワードをハッシュするため) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // パスワードが変更された場合にのみハッシュします this.password = await bcrypt.hash(this.password, 12); // 12 ラウンドのソルトでハッシュします next(); }); // メソッド: パスワードがハッシュされたパスワードと一致するかどうかを確認します userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // メソッド: 気分の履歴に基づいてユーザー統計を更新します。 userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // 空でないすべての気分を取得します。 this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // 各気分の出現回数をカウントします。 const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // 最も高いカウントを持つ気分を見つけます。 this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // プレイリストが生成された時間に基づいて、一日のうちのお気に入りの時間を計算しま const hours = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h)); if (hours.length) { const avg = hours.reduce((a, b) => a + b, 0) / hours.length; this.stats.favoriteTime = avg < 6 ? 'night' : avg < 12 ? 'morning' : avg < 18 ? 'afternoon' : 'evening'; } }; // モデルをエクスポートして、他のファイルで使用できるようにします。 module.exports = mongoose.model('User', userSchema);

主要な概念の説明:

ObjectId 参照 – friends 配列には、ユーザーオブジェクト全体が保存されるわけではありません。代わりに、他のユーザーを指す ObjectId (一意の識別子) が格納されます。これは、友人がユーザー名を変更した場合に、すべてのユーザー名を更新する必要がなく、参照に従うだけで済むため効率的です。
非正規化 – sharedBy (ObjectId) と sharedByUsername (文字列) の両方が格納されていることに注意してください。これは、パフォーマンスのために同じデータを複数の場所に格納することを非正規化といいます。ユーザー名を保存しておくことで、共有プレイリストを表示するたびにユーザーを検索する必要がなくなります。
ミドルウェア (.pre()) – これは特定の操作の前に自動的に実行されます。ここでは、セキュリティのために、データベースに保存する前にパスワードをハッシュします。
インスタンスメソッド (.methods) – これらは、user.comparePassword() や user.updateStats() など、個々のユーザードキュメントで呼び出すことができる関数です。

ステップ 3: ソーシャル機能を追加して HTML フロントエンドを更新する

次に、ユーザーインターフェースを更新して、友達管理とアクティビティフィードを追加しましょう。 HTML は、Web ページの構造 (表示される要素とその配置場所) を定義します。

UI に追加する内容:

友達リストセクション – 現在の友達を表示します。
友達追加入力 – 友達のユーザー名を入力するテキストフィールド
最近のアクティビティフィード – 友達が共有したプレイリストを表示します (クリックするとプレイリスト全体が表示されます)。
共有チェックボックス – 生成したプレイリストを友達と共有するオプションです。
通知領域 – リアルタイム更新のポップアップ通知です。

public/index.html を次のコードに置き換えます。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Mind-Reading Music API - Social</title> <style> /* デフォルトのブラウザスタイルをリセット */ * { margin: 0; padding: 0; box-sizing: border-box; } /* グラデーション背景を使用した本体のスタイル設定 */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* ダッシュボード全体のコンテナー */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* ウェルカムメッセージ付きのヘッダーセクション */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* glassmorphism のぼかし効果 */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* 2列のグリッドレイアウト: プレイリストセクション (大きい) とフレンドセクション (小さい) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* 両方のセクションのカードスタイル */ .playlist-section, .friends-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* フォーム要素のスタイル設定 */ 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: #fff; border: none; cursor: pointer; font-weight: 600; } /* ボタン上の微妙なホバー効果 */ button:hover { transform: translateY(-2px); } /* 個別のフレンドアイテムのスタイル設定 */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* 左側のアクセントカラー */ } /* 通知ポップアップのスタイル設定 (デフォルトでは非表示、右からスライドイン) */ .notification { position: fixed; top: 20px; right: 20px; background: rgba(102,126,234,0.95); color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateX(400px); /* オフスクリーンで開始 */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* 通知を表示 (スライドイン) */ .notification.show { transform: translateX(0); } /* ログインおよび登録フォーム */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* 共有用のチェックボックスコントロール */ .share-controls { display: flex; gap: 10px; margin: 10px 0; } .share-controls input[type=checkbox] { width: auto; margin-right: 5px; } </style> </head> <body> <div class="dashboard"> <!-- 認証セクション (ログイン/登録フォーム) --> <div id="authSection"> <!-- ログインフォーム --> <div class="login-section"> <h2>🧠🎵 おかえりなさい！</h2> <input type="text" id="loginUsername" placeholder="ユーザー名"/> <input type="password" id="loginPassword" placeholder="パスワード"/> <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> <!-- 2 列レイアウト: 左側にプレイリスト セクション、右側に友達セクション --> <div class="main-content"> <!-- 左の列: プレイリストの生成 --> <div class="playlist-section"> <h2>💭 気分はどうですか?</h2> <textarea id="moodText" placeholder="あなたの気分を説明してください..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>友達と共有</label> </div> <button onclick="generatePlaylist()">🎧 プレイリストを生成</button> <!-- プレイリストを生成すると、ここに結果が表示されます --> <div id="result" style="display:none"></div> </div> <!-- 右側の列: 友達とアクティビティ --> <div class="friends-section"> <h3>👥私の友達</h3> <div id="friendsList"></div> <h4>友達を追加</h4> <input type="text" id="friendUsername" placeholder="友達のユーザー名"/> <button onclick="addFriend()">友達を追加</button> <h4>最近のアクティビティ</h4> <!-- 友達が共有しているプレイリストがここに表示されます --> <div id="friendActivity">友達のアクティビティがここに表示されます...</div> </div> </div> <!-- 通知ポップアップのコンテナー --> <div id="通知エリア"></div><!-- Socket.io ライブラリをインクルードします (サーバーによって自動的に提供されます) --> <script src="/socket.io/socket.io.js"></script> <!-- カスタム JavaScript をインクルードします --> <script src="./js/app.js"></script> </body> </html>

HTML 構造について:

2 つのメインセクション: authSection (ログイン/登録) と dashboardSection (メインアプリ)。一度に表示されるのは 1 つだけです。
グリッドレイアウト: .main-content は CSS グリッドを使用して 2 つの列を作成します (2fr はプレイリスト用、1fr は友達用)。これは、プレイリストセクションの幅が 2 倍になることを意味します。
イベントハンドラー: onclick="functionName()" は、要素がクリックされたときに JavaScript 関数を呼び出すようにブラウザーに指示します。
ID: 要素には一意の ID (id="friendsList" など) があるため、JavaScript で後でそれらを見つけて変更できます。

手順 4: Socket.io、フレンドエンドポイント、および永続的な共有を使用して server.js を更新する

次に、フレンドリクエスト、プレイリストの共有、およびリアルタイム通信を処理できるようにサーバーを更新します。サーバーはアプリの「頭脳」であり、リクエストを処理し、データベースと通信し、ユーザーにレスポンスを返します。

サーバーに追加される機能:

Socket.io サーバー – サーバーとクライアント間のリアルタイムの双方向通信を可能にします
/api/add-friend エンドポイント – 友達リクエスト（相互の友情）を処理します
/api/shared-playlists エンドポイント – 友達があなたと共有したプレイリストを返します
強化された /api/personalized-playlist – 共有されたプレイリストを友達のデータベースに保存できるようになりました
ソケットイベントハンドラー – リアルタイムイベント（認証、共有）をリッスンして発行します

server.js に次のコードを記述:

// .env ファイルから環境変数を読み込み require('dotenv').config(); // 必要なモジュールをインポート const path = require('path'); const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); 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'); // プレイリスト ジェネレーターを初期化 const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // MongoDB データベースに接続します async function connectDB() { try { console.log('🔗 MongoDB に接続しています…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB が正常に接続されました!'); } catch (err) { console.error('❌ MongoDB 接続に失敗しました:', err.message); process.exit(1); // データベース接続が失敗した場合は終了します } } connectDB(); // Express アプリと HTTP サーバーを作成します const app = express(); const server = http.createServer(app); // HTTP サーバー上で Socket.io を初期化します const io = socketIo(server); // オンライン ユーザーを追跡するためのマップ: userId => socketId // これにより、現在接続している特定のユーザーにメッセージを送信できます const connectedUsers = new Map(); // Socket.io 接続ハンドラー - クライアントが接続したときに実行されます io.on('connection', socket => { console.log('🔗 ソケットが接続されました:', socket.id); // 'authenticate' イベントを処理 - クライアントが誰であるかを伝えます socket.on('authenticate', ({ userId, username }) => { // このユーザーのソケット ID を保存して、後でメッセージを送信できるようにします connectedUsers.set(userId, socket.id); socket.userId = userId; // このソケットに userId を添付します socket.username = username; // このソケットに username を添付します console.log(`✅ 認証されたユーザー: ${username}`); }); // 'share_playlist' イベントを処理 - ユーザーが友達と共有したい場合 socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // すべての友達 ID をループします for (let friendId of friendIds) { // 取得この友達のソケット ID (オンラインの場合) const sid = connectedUsers.get(friendId.toString()); if (sid) { // 友達がオンラインです。リアルタイム通知を送信します io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // 友達がオフラインの場合は、ログイン時にアクティビティ フィードにプレイリストが表示されます } } catch (err) { console.error('Share playlist error:', err); } }); // 切断を処理 - オンライン マップからユーザーを削除します socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Disconnected: ${socket.username}`); } }); }); // JSON リクエスト本体を解析するミドルウェア app.use(express.json()); // 'public' フォルダーから静的ファイル (HTML、CSS、画像) を提供します app.use(express.static(path.join(__dirname, 'public'))); // ===== API エンドポイント ===== // POST /api/register - 新しいユーザー アカウントを作成します 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 exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: 'ユーザー名またはメール アドレスが既に存在します' }); } // 新しいユーザーを作成して保存します (パスワードは保存前ミドルウェアによって自動的にハッシュされます) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'ユーザーの作成に成功しました' }); } catch (err) { console.error('登録エラー:', err); res.status(500).json({ error: '登録に失敗しました' }); } }); // POST /api/login - ユーザーを認証し、JWT トークンを返します。 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' }); } // JWT トークンを作成します (一時的な ID カードのようなもの)。 const token = jwt.sign( { userId: user._id }, // ペイロード (エンコードするもの) process.env.JWT_SECRET, // 秘密鍵 (安全に保つ) { expiresIn: '7d' } // トークンは 7 日後に期限切れになります ); // トークンをクライアントに送り返します res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('ログイン エラー:', err); res.status(500).json({ error: 'ログインに失敗しました' }); } }); // GET /api/profile - 現在のユーザーのプロフィールを取得します // 'auth' ミドルウェアは JWT トークンを検証し、ユーザーを req.user に関連付けます app.get('/api/profile', auth, async (req, res) => { try { // ユーザーの統計情報を更新します req.user.updateStats(); await req.user.save(); // 友達の配列を入力します (ObjectIds を実際のユーザー オブジェクトに置き換えます) await req.user.populate('friends', 'username _id'); const { username, email, friends } = req.user; res.json({ _id: req.user._id, username, email, friends: friends.map(f => ({ username: f.username, _id: f._id })) }); } catch (err) { console.error('Profile error:', err); res.status(500).json({ error: 'プロファイルの読み込みに失敗しました' }); } }); // GET /api/shared-playlists - 友達があなたと共有したプレイリストを取得します app.get('/api/shared-playlists', auth, async (req, res) => { try { // 最新のものから順に、最後の 10 件の共有プレイリストを取得します const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // タイムスタンプで降順に並べ替えます .slice(0, 10); // 最初の 10 件を取得します res.json({ sharedPlaylists }); } catch (err) { console.error('共有プレイリスト エラー:', err); res.status(500).json({ error: '共有プレイリストの読み込みに失敗しました' }); } }); // POST /api/add-friend - 友達を追加（相互の友情） app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // ユーザー名で友達を検索 const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'ユーザーが見つかりません' }); } // 既に友達かどうかを確認する if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'このユーザーは既に友達です' }); } // 各ユーザーを相手の友達リストに追加（相互の友情） req.user.friends.push(friend._id); friend.friends.push(req.user._id); // 両方のユーザーを保存します await req.user.save(); await friend.save(); res.json({ message: '友達が正常に追加されました', friendId: friend._id }); } catch (err) { console.error('友達追加エラー:', err); console.error('エラースタック:', err.stack); res.status(500).json({ error: '友達の追加に失敗しました' }); } }); // POST /api/personalized-playlist - 気分に基づいたプレイリストを生成します。 app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, shareWithFriends = false, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Please tell me how you are feeling!' }); } // 1. ユーザーのテキストから気分を分析します。 const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. 気分に基づいてプレイリストを生成します。 const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. ユーザーの気分の履歴に保存します。 const entry = { text,detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence、isShared: shareWithFriends、shareWith: shareWithFriends ? req.user.friends : []、playlistGenerated: playlist.map(t => ({ trackName: t.name、 artist: t.artist、 spotifyId: t.id })) }; req.user.moodHistory.push(entry); req.user.updateStats(); await req.user.save(); // 4. 共有が有効になっている場合は、各友達のsharedPlaylists配列に保存します if (shareWithFriends && req.user.friends.length > 0) { const sharedPlaylistData = { sharedBy: req.user._id、sharedByUsername: req.user.username、mood: moodAnalysis.mood、playlist: playlist.slice(0、5).map(t => ({ // 最初の5トラックを共有 name: t.name、 artist: t.artist、album_image: t.album_image、id: t.id })) }; // すべての友達をループして、このプレイリストを彼らの sharedPlaylists に追加します for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. クライアントに応答を返します res.json({ moodAnalysis、playlist、personalizedMessage: `あなたの履歴に基づいて、これがあなたにぴったりの ${moodAnalysis.mood} プレイリストです!` }); } catch (err) { console.error('パーソナライズされたプレイリストのエラー:'、err); console.error('エラー スタック:'、err.stack); res.status(500).json({ error: 'パーソナライズされたプレイリストを生成できませんでした。もう一度お試しください。' }); } }); // フォールバック: API 以外のルートに対して index.html を提供します (SPA ルーティング用) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // グローバル エラー ハンドラー app.use((err, req, res, next) => { console.error('グローバル エラー:', err); res.status(500).json({ error: '内部サーバー エラー', details: err.message }); }); // サーバーを起動します server.listen(PORT, () => { console.log(`🚀 Server running on http://localhost:${PORT}`); });

主要なサーバー概念の説明:

ミドルウェア – リクエストがルートハンドラーに到達する前にそれを処理する関数。 express.json() はリクエスト本体から JSON を解析し、 auth は JWT トークンを検証します。
async/await – 非同期操作 (データベースクエリなど) を処理するための最新の JavaScript 構文。 await は、promise が解決されるまで実行を一時停止します。
HTTP ステータスコード – 結果を示す数字: 200 = 成功、201 = 作成済み、400 = 不正なリクエスト、401 = 未承認、404 = 見つかりません、500 = サーバーエラー。
Socket.io イベント – クライアントとサーバー間でやり取りされる名前付きメッセージ。socket.on() はイベントをリッスンし、socket.emit() はイベントを送信します。
JWT (JSON Web Token) – ユーザーを識別する安全な方法です。ユーザーがログインすると、トークンが付与されます。彼らは、自分が誰であるかを証明するために、各リクエストとともにこのトークンを送信します。

ステップ 5: フロントエンドの JavaScript (public/js/app.js) を更新する

最後に、フロントエンドをインタラクティブにする JavaScript を追加しましょう。このコードはユーザーのブラウザで実行され、ボタンのクリック、API リクエスト、リアルタイム更新などを処理します。

この JavaScript の機能:

認証を管理 – ログイン、登録、ログアウト、トークンの保存
Socket.io を初期化 – サーバーに接続し、リアルタイムイベントをリッスンします
API リクエストを送信 – fetch() を使用してサーバーのエンドポイントと通信します
UI を更新 – サーバーからのデータに基づいて HTML 要素を動的に作成します
ユーザーインタラクションを処理 – ボタンのクリック、フォームの送信など

public/js/app.js をチュートリアルに示されている完全なコードに置き換えます...

(app.js コード

ステップ 6: Social Music API をテストする

いよいよすべてをテストします。以下の手順を注意深く実行してください。

サーバーを起動します: ターミナルで、npm start を実行します。「MongoDB が接続されました!」や「サーバーが http://localhost:3000 で実行されています」などのメッセージが表示されます。
ブラウザーウィンドウを 2 つ開きます: 2 つの別のブラウザーウィンドウ (または通常のウィンドウとシークレットウィンドウ) で http://localhost:3000 を開きます。これは 2 人の異なるユーザーをシミュレートします。
ユーザー 1 を登録: 最初のウィンドウで、「サインアップ」をクリックし、ユーザーを作成します (例: ユーザー名:「alice」)。
ユーザー 2 を登録: 2 番目のウィンドウで、別のユーザーを作成します (例: ユーザー名:「bob」)。
お互いを友達として追加: Alice のウィンドウで、「友達を追加」フィールドに「bob」と入力し、「友達を追加」をクリックします。Bob のウィンドウでも同じ操作 (「alice」と入力) を行います。お互いの友達リストに表示されるはずです。
プレイリストを共有: Alice のウィンドウで、気分のテキストボックスに「今日はすごく幸せな気分！」などと入力します。「友達と共有」チェックボックスをオンにして、「プレイリストを生成」をクリックします。
魔法のようなことが起こります:
- ボブがオンラインの場合（ウィンドウがまだ開いている場合）、右側から通知がスライド表示されます。
- ボブの「最近のアクティビティ」セクションには、アリスの共有プレイリストが表示されます。
- ボブは共有プレイリストをクリックして、曲の全リストを表示できます。
- ボブがログアウトして後でログインし直しても、共有プレイリストはそのまま残っています。

すべての仕組みを理解する

アリスがボブとプレイリストを共有するときに何が起こるかを見てみましょう。

アリスは「友達と共有」をチェックし、「プレイリストを生成」をクリックします。
フロントエンドは、shareWithFriends: true を指定した POST リクエストを /api/personalized-playlist に送信します。
サーバーはアリスの気分を分析し、Spotify API を使用してプレイリストを生成します。
サーバーはプレイリストをアリスの moodHistory 配列に保存します。
サーバーはアリスの友達（ボブを含む）をループし、プレイリストを各友達の MongoDB の sharedPlaylists 配列に追加します。
フロントエンドはshare_playlist オンラインの友達に通知する Socket.io イベント
サーバー がイベントを受信し、ボブがオンラインかどうかを確認します (connectedUsers マップを参照)
ボブがオンラインの場合、サーバーはプレイリストのプレビューを含む friend_shared_playlist イベントをボブに送信します
ボブのブラウザ がイベントを受信し、showNotification() を呼び出してポップアップを表示します
ボブのブラウザ は loadSharedPlaylists() も呼び出してアクティビティフィードを更新します
ボブがオフラインの場合、ボブが次にログインしたときにアクティビティフィードにプレイリストが表示されます (プレイリストはボブの sharedPlaylists 配列に保存されているため)

構築したもの

おめでとうございます！フル機能のソーシャルミュージックアプリの構築に成功しました。達成したことは次のとおりです。

🤝 フレンドシステム – ユーザーはユーザー名でフレンドを追加できます。フレンド関係は相互に有効で (両方のユーザーがお互いにフレンドになります)、MongoDB に ObjectId 参照として保存されます。
💾 永続的なプレイリストの共有 – 共有されたプレイリストは、各フレンドの sharedPlaylists 配列内のデータベースに保存されます。つまり、ユーザーがログアウトした後もデータが保持されます。
📡 リアルタイム通知 – Socket.io を使用すると、オンラインユーザーはフレンドがプレイリストを共有したときに即座に通知を受け取ります。ページの更新は不要です！
📰 アクティビティフィード – ユーザーはすべてのフレンドが最近共有したプレイリストを、新しい順に表示できます。プレイリストをクリックすると、完全なトラックリストが表示されます。
🔐 安全な認証 – パスワードは bcrypt でハッシュされ（プレーンテキストとして保存されることはありません）、API リクエストの認証には JWT トークンが使用されます。
⏱️ オフライン対応 – プレイリストが共有されたときにオンラインでなかったとしても、友人は共有されたプレイリストを表示できます。すべてがデータベースに保存されます！

学習した主要な概念

Socket.io (WebSocket) を使用したリアルタイム通信
MongoDB ObjectId 参照を使用したデータベースリレーションシップ
非正規化 (パフォーマンス向上のため ObjectId とユーザー名の両方を保存)
RESTful API 設計 (適切な HTTP ステータスコードを持つ GET、POST エンドポイント)
ミドルウェアパターン (認証とリクエスト処理のため)
非同期操作を処理するための async/await
DOM 操作 (UI を動的に更新するため)
Socket.io イベントを使用したイベント駆動型アーキテクチャ

一般的な問題のトラブルシューティング

「接続できませんMongoDB へ" – MongoDB サーバーが実行中であること、および .env 内の MONGODB_URI が正しいことを確認してください。
ログイン時に「認証情報が無効です」 – ユーザー名とパスワードをもう一度確認してください。大文字と小文字が区別されることに注意してください。
友達追加時に「ユーザーが見つかりません」 – 正確なユーザー名（大文字と小文字が区別されます）を入力していることを確認してください。相手が先に登録している必要があります。
共有プレイリストが表示されない – ブラウザのコンソール（F12）にエラーがないか確認してください。両方のユーザーが友達であり、「友達と共有」チェックボックスがオンになっていることを確認してください。
リアルタイム通知が機能しない – Socket.io が接続されていることを確認してください。ブラウザコンソールに「🔗 サーバーに接続されました」と表示されていることを確認してください。

次のステップと拡張のアイデア

ソーシャルミュージックアプリが完成したので、さらに発展させるためのアイデアをいくつかご紹介します。

友達リクエスト – すぐに友達になるのではなく、承認または拒否できるリクエストをユーザーに送信させる
プライベートメッセージング – Socket.io を使用してチャットシステムを追加し、友達同士がメッセージを送り合えるようにします
プレイリストのコメント – ユーザーが共有プレイリストにコメントできるようにします
トラックの高評価/低評価 – プレイリスト内の各トラックに親指のアップ/ダウンボタンを追加します
音楽の好みの互換性 – 2 人のユーザーの音楽の好みがどの程度似ているかに基づいてパーセンテージを計算します
ユーザーの検索 – ユーザー名でユーザーを見つけるための検索機能を追加します
削除/友達解除 – 友達を削除したり、共有プレイリストを削除したりする機能を追加
プロフィールページ – ユーザーの統計情報、お気に入りのムード、最近のプレイリストを表示
共同プレイリスト – 複数の友達が共有プレイリストにトラックを追加できるようにします
プレイリスト履歴 – 以前に作成したすべてのプレイリストを表示します

リアルタイム機能と永続的なデータストレージを備えたフルスタックのソーシャルミュージックアプリを構築しました。これは、最新のWeb開発を理解するための確固たる基盤となります。実験と構築を続けてください！🎵✨