😁

感情記録アプリ Emotype Pro を Next.js + Supabase + OpenAI で作った話

に公開
Next.js
Supabase
OpenAI API
idea

感情記録アプリ Emotype Pro を Next.js + Supabase + OpenAI で作った話

はじめに

こんにちは！メンタルヘルスと睡眠の質を追跡できる感情記録アプリ「Emotype Pro」を開発しました。この記事では、なぜこのアプリを作ったのか、どんな技術を使ったのか、そして開発中に学んだことを共有します。

🔗 アプリURL: https://emotype-pro.vercel.app
🚀 Product Hunt: 2025年12月1日公開予定

作ろうと思ったきっかけ

メンタルヘルスの記録アプリは世の中にたくさんありますが、多くは以下のような課題を抱えていました：

  • 😓 機能が多すぎて複雑
  • 📊 データはあるけど、具体的な改善アクションが分からない
  • 🔗 睡眠や他の要因との相関が見えない
  • 🤖 AI活用が表面的

そこで、シンプルで使いやすく、AI による具体的なインサイトが得られるアプリを目指しました。

主な機能

1. AI 感情分析 🤖

  • OpenAI GPT-4o-mini を使用
  • 過去の投稿から感情パターンを分析
  • 週次でのトレンド比較

2. 睡眠品質トラッキング 😴

  • 睡眠時間、質、起床時の気分を記録
  • 時系列グラフで可視化

3. メンタルヘルスダッシュボード 🧠

  • リカバリースコア、ストレスレベル、不安レベルを追跡
  • 感情との相関分析機能

4. 医療レポート生成 📄 (Pro機能)

  • PDF形式で総合レポートを出力
  • 医療機関への提出に使える

技術スタック

{
  "frontend": "Next.js 14 (App Router)",
  "backend": "Next.js API Routes",
  "database": "Supabase (PostgreSQL)",
  "auth": "Supabase Auth (Google + Apple Sign-In)",
  "ai": "OpenAI GPT-4o-mini",
  "payment": "Stripe",
  "hosting": "Vercel",
  "styling": "Tailwind CSS",
  "i18n": "next-intl (日英対応)"
}

技術的なポイント

1. AI インサイト生成の最適化

コスト削減のため、gpt-4o-mini を使用し、プロンプトを最適化しました。

export async function generateInsight(options: GenerateInsightOptions) {
  const { recentPosts, previousPosts, totalPosts, locale = 'ja' } = options

  // 感情タグの集計（効率化）
  const recentEmotions: Record<string, number> = {}
  recentPosts.forEach(p => {
    recentEmotions[p.emotion_tag] = (recentEmotions[p.emotion_tag] || 0) + 1
  })

  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: prompt }],
    max_tokens: 300,
    temperature: 0.7,
    response_format: { type: 'json_object' },
  })

  return JSON.parse(completion.choices[0]?.message?.content || '{}')
}

ポイント:
トークン数削減のため、不要な空白・改行を削除
response_format: { type: 'json_object' } でJSON形式を強制
max_tokens を 300 に制限してコスト削減

2. Supabase での認証とデータ管理

Apple Sign-In と Google Sign-In の両方をサポート。

const handleAppleLogin = async () => {
  const redirectUrl = `${window.location.origin}/auth/callback`
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'apple',
    options: { redirectTo: redirectUrl }
  })
}

Apple Sign-In の実装では、Apple Developer Console での Service ID 設定と JWT 生成が必要でした。

3. 多言語対応（i18n）

next-intl を使って日英両対応を実現。AI インサイトも locale パラメータを渡すことで、言語に応じたプロンプトを生成しています。

4. Stripe サブスクリプション

Pro プラン（月額 1280円）を Stripe で実装。Product Hunt ローンチ用に、3ヶ月無料のプロモコード「PRODUCTHUNT」も用意しました。

苦労したポイント

1. Apple Sign-In の実装

Apple Developer Console での設定が複雑で、特に JWT 生成に苦戦しました。Node.js スクリプトで JWT を生成し、Supabase に設定する必要がありました。

2. AI コストの最適化

最初は gpt-4o を使っていましたが、コストが高すぎたため gpt-4o-mini に変更。プロンプトも最適化して、1リクエストあたりのコストを約 1/10 に削減しました。

3. 相関分析の実装

睡眠の質と感情の相関を計算するロジックの実装に時間がかかりました。最終的には Pearson相関係数 を使って実装。

function calculateCorrelation(x: number[], y: number[]): number {
  const n = x.length
  const numerator = n * sumXY - sumX * sumY
  const denominator = Math.sqrt((n * sumX2 - sumX * sumX) * (n * sumY2 - sumY * sumY))
  return denominator === 0 ? 0 : numerator / denominator
}

学んだこと

1.Next.js 14 App Router は本当に便利

・Server Components でパフォーマンス向上
・Route Handlers で API 実装が簡潔に

2.Supabase は個人開発に最適

・認証、DB、Storage がオールインワン
・無料枠でも十分実用的

3.AI コストは侮れない

・モデル選定とプロンプト最適化が重要
・キャッシュ機能で無駄なリクエストを削減

4.Product Hunt 準備は大変

・スクリーンショットは英語版を用意
・説明文は 500 文字以内に収める工夫が必要

今後の展望

・✅ Product Hunt ローンチ（2025年12月1日）
・📱 モバイルアプリ版の開発
・🤝 コミュニティ機能の追加
・📊 より高度な分析機能

おわりに

Emotype Pro は、メンタルヘルスと睡眠を総合的に管理できるアプリです。Product Hunt での公開は 2025年12月1日を予定しています。ぜひ試してみてください！ プロモコード「PRODUCTHUNT」で3ヶ月無料でお試しいただけます（12月15日まで）。 🔗 https://emotype-pro.vercel.app フィードバックや質問があれば、コメント欄や X (@ossbug_kun) でお気軽にどうぞ！

Discussion