🌊

Fragment #9 – emotion に基づく音楽・映像コンテンツの提案

に公開

✅ 概要

Fragment ではユーザーの感情を起点に、癒しや刺激となるコンテンツを提案する試みを行っています。本記事では、感情に応じて音楽や映像コンテンツを提示するまでの流れを紹介します。


🧰 使用技術

  • Expo(React Native)
  • Firebase(Firestore / Cloud Functions / Auth)
  • YouTube Data API

🔧 構築ステップまとめ

1. Firebase プロジェクト構築

  • Firestore を default DB として有効化
  • Functions デプロイ時にはリージョン指定
  • セキュリティルール:Functions 経由での読み書きのみ許可
service cloud.firestore {
  match /databases/{database}/documents {
    match /emotionContents/{document=**} {
      allow read: if request.auth != null;
      allow write: if false;
    }
  }
}

2. 感情ごとのコンテンツ収集

  • YouTube Data API で "solitude" などの感情に対応した動画を検索
  • Functions 経由で Firestore に保存
  • スキーマ:emotion コレクション内に YouTube の videoId を持つ構造
// Firestore schema example
emotion (collection)
  └── solitude (document)
        └── contents: [
              {
                title: "夜の静けさに寄り添うピアノ",
                videoId: "abc123def",
                source: "youtube"
              },
              ...
            ]

3. React Native での UI 表現

  • Complete 画面から波紋が広がるアニメーション
  • 中央のテキストをタップすると暗転し、感情別コンテンツ画面に遷移

4. 認証とセキュリティ

  • Firebase Auth で匿名ログイン対応
  • API キー管理は .env を用いて外部化

💡 工夫したポイント

  • 感情の種類に応じた背景色や遷移演出
  • アプリ内に埋め込むのではなく、外部リンクとして表示することでライセンス面を回避
  • Firebase Functions によりサーバーサイドの安全な API アクセスを実現

🎬 動画デモ

以下は実際の動作デモです


📝 今後の展望

  • コンテンツの質向上(キュレーションや評価軸の追加)
  • 管理画面の導入(Firebase Firestore の更新を簡易化)
  • 感情パターンの追加(solitude, joy, anxiety など)
  • おすすめコンテンツの自動抽出や機械学習導入の検討
  • コミュニティ内でオリジナルコンテンツをシェアできるプラットフォーム機能の導入

Discussion