🌙 YumeTree — モルペウスと育てるAI夢ノート
YumeTree（ユメツリー） は、朝の夢を忘れる前に記録し、モルペウスと一緒に感情や画像で振り返るAI夢ノートです。
夢の内容を記録すると、OpenAI API が分析文と感情タグを返し、日々の夢を単なるメモではなく、自分や大切な人と振り返るきっかけに変えます。
音声入力、AI分析、感情タグ、夢の画像生成を通じて、ひとりでも、家族・恋人・友達とも楽しめるプライベートな夢の記録体験を目指しています。
🌐 本番URL: https://dreamjournal-app.vercel.app
概要
YumeTree（ユメツリー）は、夢の記録・AI 分析・感情タグの可視化・夢の画像生成を組み合わせた、プライベートなAI夢ノートです。
フロントエンドは Next.js 16、バックエンドは Rails 7.2 API を採用し、認証、AI 連携、寄付・月額課金、監視、テストまでを個人開発で一貫して構築しています。
技術選定では「モダンだから」ではなく、ひとりでも、大切な人とも迷わず使える UX と、継続運用しやすい構成になるかを重視しています。
1. 解決する課題とプロダクト体験
夢の記録と AI 分析
子どもでも扱いやすく、大人も迷わず使えるよう、ひらがなを多めに使った表現やシンプルな入力導線を意識しています。
記録した夢は OpenAI API（デフォルト gpt-4o-mini）で分析し、短い解釈文と感情タグを返します。使用モデルは OPENAI_CHAT_MODEL 環境変数で切り替え可能な設計にしており、本番挙動を変えずにコスト・品質の比較検証ができます。日々の夢を単なるメモで終わらせず、自分のセルフケアや、大切な人との会話のきっかけに変えることを狙っています。
音声入力による夢の記録
Whisper API を使った音声録音→テキスト変換→分析の一連フローを実装しています。
「朝起きたばかりで文字を打つのが面倒」という場面に対応し、録音ボタン一つで夢を記録できます。
gpt-image-1 による夢のビジュアル化
夢の内容や AI 分析結果をもとに OpenAI の画像生成モデル（gpt-image-1）で画像を生成し、夢の世界をビジュアルで表現できます。
月次 31 枚上限（check_monthly_image_limit）でコストを管理し、Rack::Attack による追加のレート制限も設けています。
2026 年 5 月廃止予定だった dall-e-3 から gpt-image-1 へ移行済みで、b64_json レスポンスを直接 DB に保存することで期限切れ URL の問題を解消しています。
月次サマリーと統計
月別アーカイブページでは、その月の記録数・記録日数・感情 Top 3 などの統計をまとめて表示します。
連続記録のストリークバッジも用意し、日々の記録継続を楽しめる仕組みを取り入れています。
さらに「きもちインサイト」ダッシュボード（/insights）では、今月の振り返りを 1 ページに集約しています。KPI・ムードカレンダー（各日を最頻感情色で塗るヒートマップ）・モルペウスの月まとめ・きもち TOP5・半年分の記録トレンドを、追加の API を増やさずクライアント側の集計で表示します。
夢の森と今週のゆめニュース
記録を「続けたくなる」体験にするため、夢を残すたびに木が育つ「夢の森」を用意しています。プロフィール（自分・家族など）ごとの森を俯瞰でき、収穫演出やモルペウスの案内で、記録の継続そのものが小さな達成になるよう設計しています。
ホームには「今週のゆめニュース」ウィジェットを配置し、直近 7 日間の夢をプロフィールごとに要約します。新しい API を追加せず、ホームが既に取得済みの夢・プロフィールデータをその場で集計する軽量な実装にしています。
認証・寄付・月額課金
認証は JWT を HttpOnly Cookie で扱い、フロントエンドとバックエンドを分離した構成でも安全にセッションを維持できるようにしています。
決済は2種類の Stripe フローを実装し、いずれも本番稼働済みです。
- 寄付（一回払い）: Stripe Checkout →
checkout.session.completed Webhook → Payment 永続化
- プレミアム月額課金（¥500/月）: Stripe Subscription → Webhook 3イベント（
checkout.session.completed / invoice.payment_succeeded / customer.subscription.deleted）→ users.premium フラグ更新
- Stripe Billing Portal: 解約・カード変更・請求履歴をホスト型ポータルに委譲し、PCI 対応の負担なく会員管理を実現
2. システムアーキテクチャと技術選定
graph TD
Browser["Browser"]
FE["Next.js 16<br/>(Vercel)"]
BE["Rails 7.2 API<br/>(Render)"]
DB[("PostgreSQL")]
AI["OpenAI API<br/>(gpt-4o-mini / whisper-1 / gpt-image-1)"]
Stripe["Stripe"]
Sentry["Sentry"]
Browser -->|HTTPS| FE
FE -->|REST API + Cookie| BE
BE --> DB
BE -->|Dream analysis / Image generation| AI
BE -->|Checkout Session| Stripe
Stripe -->|Webhook POST| BE
この構成を選んだ理由
- フロントエンド: Next.js (App Router)
毎日使うアプリとして、初期表示の軽さと操作感の両立を重視しました。Server / Client Components を使い分けつつ、インタラクティブな UI は Framer Motion で補っています。
- バックエンド: Rails API
認証、AI 連携、決済、Webhook 処理のようなドメインロジックを、短いサイクルで安全に改善しやすい構成として採用しました。RSpec による回帰確認もしやすい点を重視しています。
- 認証設計: JWT + HttpOnly Cookie
XSS 耐性を意識し、トークンをブラウザの JavaScript から直接触らせない構成にしています。クロスドメイン環境では Vercel 側の API 経由で Cookie を安定して扱えるようにしています。
- インフラ: Vercel / Render
インフラ運用を過度に抱えず、機能改善と UX 検証に集中しやすいフルマネージド構成を選びました。
3. 設計・実装上の工夫
① 利用者フィードバック前提の UX 改善
「ひらがな中心の表示」「夢詳細の閲覧モードと編集モードの分離」「パスワード可視化トグル」「ライト / ダークモード切り替え」など、使いながら分かりにくかった点を小さく改善してきました。
- パスワード強度バー: 登録フォームに 弱い / 普通 / 強い の3段階インジケーターを追加。英字・数字・記号の組み合わせと文字数に応じてリアルタイムでフィードバックし、入力ミスを事前に防ぎます。
- Trial UX 改善: トライアルページに「残りAI分析: ○回」バッジを常時表示し、上限到達時は登録を促すアップグレードカードを表示。ユーザーが価値を体験してから自然に登録に進める導線を整えました。
- モバイル / デスクトップ両対応のナビゲーション: スマホでは親指で届く
BottomTabBar（ホーム / きもち / 記録 / もり / 設定）、デスクトップでは常駐サイドバーと ⌘K コマンドパレットを提供し、画面移動や最近の夢へのアクセスを各デバイスに適した操作で行えるようにしています。ランディングページも 2 カラムのデスクトップ向けレイアウトへ刷新しました。
個人開発でも変更を積み重ねやすいよう、Jest・RSpec・Playwright を併用して回帰確認しやすい状態を保っています。
② ガイドキャラクター「モルペウス」による画面統一
夢の番人キャラクター「モルペウス」を全11画面にそれぞれ配置し、アプリ全体のトーンを統一しています。
MorpheusImage コンポーネントがバリアント（home / analysis / login など）に応じた画像を切り替え、画像読み込みエラー時は SVG フォールバックで表示を保証します。
variant 変更時にエラー状態を useEffect でリセットすることで、画面遷移をまたいだ状態リークも防いでいます。
③ Value-First Onboarding — ログイン前でもアプリ体験を提供
未ログインユーザーを即座に /login へリダイレクトするのではなく、ページ自身が MorpheusLoginRequired コンポーネントでやさしく案内する設計にしています。
バックエンドの API 認証は維持したままフロントの導線を緩和することで、新規ユーザーがアプリの価値を感じてからアカウント登録できる流れを作っています。
さらに /trial ページでは、アカウント登録なしに AI 分析を最大3回体験できるトライアルフローを提供しています。初回のボタン押下時にバックエンドでトライアルアカウントを自動生成し、分析結果をその場で確認できます。残り分析回数のカウントダウン表示と、上限到達時のアップグレード誘導カードを組み合わせることで、「体験 → 価値実感 → 登録」の自然な流れを設計しています。
④ 多対多リレーションとレガシーデータ共存
夢と感情の関係は多対多で表現しています。さらに、AI 分析結果の保存形式が変わった後も既存データを壊さず扱えるよう、表示側で新旧フォーマットを吸収する実装にしています。
⑤ dream_profiles による家族・大切な人ごとの夢記録
dream_profiles により、「自分」「子ども」「家族」「ペット」など、誰の夢かを分けて記録できるようにしています。
既存ユーザーには self プロフィールを補完し、「自分」プロフィールはアーカイブ不可にすることで、既存の夢データの基準が失われないようにしました。
この機能では、モデル・API・フロントエンドUIの実装に加えて、本番DB migration、既存ユーザー補完、本番ブラウザでの /profiles 動作確認、一時的な補完処理の撤去まで行いました。
さらに Supabase Security Advisor の rls_disabled_in_public 警告に対応し、フロントエンドから Supabase へ直接アクセスしていない構成を確認した上で、public.dream_profiles の Row Level Security を有効化しました。policy なしの Default Deny 方針により、Rails API という正規ルートは維持しつつ、Supabase の直接アクセス口を閉じています。
⑥ 監視・セキュリティ・レート制限を後回しにしない
Sentry をフロントエンドとバックエンドの両方に導入し、本番での例外や不安定な挙動を検知しやすくしています。
加えて、CORS 設定、HttpOnly Cookie、環境変数管理のほか、Rack::Attack によるレート制限（登録・分析 API・画像生成を個別に制御）を整備しています。
パスワードポリシーはバックエンドのモデルバリデーションとフロントの入力チェックを一致させ、「8文字以上・英字と数字を各1文字以上含む」を二重に保証しています。登録フォームには3段階の強度バーをリアルタイム表示し、入力中にポリシー充足状況を視覚的にフィードバックします。
認証基盤の強化（2026年7月）: 当初は 1 ユーザーにつき平文リフレッシュトークン 1 本という構成でしたが、以下のように多端末・漏洩耐性を意識した設計へ作り直しました。
- セッションの永続化とトークンの digest 化:
user_sessions テーブルを新設し、リフレッシュトークンは SHA-256 digest のみを保存。有効期限・失効時刻・端末情報（user_agent / ip_address / last_used_at）を持たせ、複数端末でのログイン維持とセッション単位の失効に対応します。ログアウト時は該当セッションのみを失効します。旧 users.refresh_token（平文カラム）は、既存ログインを切らさないための一時的な互換経路として残し、使用時に消去する移行方式にしています。
- メールアドレス有効化: 登録後に確認メールのトークン（同じく digest 保存）でメールアドレスを検証するフローを追加。未確認ユーザーにはホームで
EmailVerificationBanner を表示し、再送・確認導線を案内します。
- パスワードリセットトークンの digest 化: リセットトークンも平文保存をやめ、
reset_password_token_digest として保存する方式に統一しました。
⑦ Stripe 決済フローの堅牢化
寄付（一回払い）と月額サブスクリプション（¥500/月）の2フローを実装し、いずれも本番稼働済みです。
共通の設計方針として、ensure_stripe_customer_id! による顧客再利用、Webhook 署名検証（STRIPE_WEBHOOK_SECRET）、ProcessedWebhookEvent による重複イベント排除、PaymentsObservability による構造化ログを整備しています。
Subscription フローでは client_reference_id → stripe_customer_id → email の3段階フォールバックでユーザーを解決し、解約時には customer.subscription.deleted を受けて premium フラグを安全に降ろす設計にしています。
一次切り分け用に docs/runbook-payments.md も用意し、機能実装だけでなく運用時の対応手順まで残しています。
⑧ 日時処理の一元化とバグ予防
日本時間（JST）での日付処理を lib/date.ts に集約し、toLocaleString("ja-JP") が返す「2026年」のような日本語文字列が URL パラメータに混入するバグを防いでいます。
en-CA ロケールで YYYY-MM-DD 形式を取得し、.slice(0,7) で月キーを生成することで、Vercel（UTC 環境）でも JST 基準の月グループが正確に機能します。
4. 開発の記録（技術記事）
実装の背景・設計判断・はまりポイントを Zenn にまとめています。
5. 今後の展望・課題
- 画像生成・AI 分析の利用量に連動したプレミアムプラン設計と課金導線の整備
- N+1 の解消やクエリ改善など、データ量増加を見据えたバックエンド最適化
- 自動テストの拡充と、より安全な CI/CD の継続改善
- INP の計測と改善（PageSpeed Insights で現状把握後に着手予定）
- OpenAI モデルの比較検証（
OPENAI_CHAT_MODEL 環境変数を活用して gpt-5-mini / gpt-5-nano の品質・コストを評価）
Tech Stack & Project Info
- Frontend: Next.js 16, React 18, TypeScript, Tailwind CSS, Framer Motion
- Backend: Ruby on Rails 7.2 (API mode), Ruby 3.3, PostgreSQL
- Testing: Playwright, RSpec, Jest
- AI / External Services: OpenAI API (
gpt-4o-mini, whisper-1, gpt-image-1), Stripe Checkout / Subscription / Billing Portal, Sentry
- Security: Rack::Attack (rate limiting), JWT + HttpOnly Cookie, CORS
- DevOps: Vercel, Render, Docker Compose, GitHub Actions
git clone https://github.com/isekaisaru/dream-journal-app.git
cd dream-journal-app
cp backend/.env.example backend/.env
make dev-up
GitHub Actions で main への Push / PR 時に Playwright、RSpec、Jest を実行し、主要フローの回帰を検知できるようにしています。
Playwright E2E カバレッジ（CI 実行分）
CI（GitHub Actions）では認証不要・APIモック済みのシナリオを自動実行しています。
| シナリオファイル | カバー内容 |
|---|
smoke.spec.ts | アプリ起動・ログインリンク表示 |
donation.spec.ts | 寄付フロー・Stripe Checkout 遷移 |
dream-detail-flow.spec.ts | 夢詳細表示・編集モード切り替え |
registration-flow.spec.ts | パスワード強度バー（弱い/普通/強い）・バリデーション・登録成功→/home 遷移 |
trial-flow.spec.ts | 残り分析回数バッジ・AI分析成功・上限到達時のアップグレードカード表示 |
認証が必要なシナリオ（home-flow.spec.ts、month-summary-flow.spec.ts）はローカル環境で実行します。
Author
Tyougorou
物流・現場マネジメント経験を経て、手触りのあるソフトウェアで課題解決を行うため Web 開発技術を習得。要件定義から実装、デプロイ、運用改善まで一貫して取り組んでいます。
