はじめまして。個人開発で「Deep Journal（ディープジャーナル）」というWebアプリを作りました。
日々の記録（ジャーナリング）に対して、AIが専属のパートナーとして寄り添い、分析し、フィードバックをくれるアプリです。
リリースしたアプリはこちら
👉 Deep Journal
(登録なし・無料で即座に試せます)
この記事では、開発に使用した技術スタックや、AIを「機械的なBot」ではなく「パートナー」に近づけるためにこだわった実装ポイントを紹介します。
なぜ作ったのか？
日記やジャーナリングはメンタルヘルスや自己成長に良いと言われますが、「書きっぱなし」で終わってしまうのが悩みでした。
かといって、誰かに見せるのは恥ずかしい。
「もし、自分のことを深く理解してくれて、絶対に秘密を守ってくれるAIのパートナーがいたら？」
そう考えて、Googleの最新AIモデル Gemini API を活用した交換日記アプリを開発しました。
技術スタック
「維持費を抑えつつ、UXはネイティブアプリ並みに」を目指して選定しました。
- Frontend: React (Vite) + Tailwind CSS
- Backend (Auth/DB): Firebase (Authentication, Firestore)
- API Proxy: PHP (レンタルサーバー上の軽量プロキシ)
- AI Model: Google Gemini 2.5 Flash Lite (高速・低遅延な最新モデル)
- Hosting: 独自ドメイン (monozuki.club)
工夫点1: セキュアで安価なAPI構成
通常、Firebaseだけで完結させるとCloud Functions等のコストが気になります。
そこで、すでに契約していたレンタルサーバー(PHP)をプロキシとして活用しました。
- クライアントから直接APIキーを使わず、PHP経由でGemini APIを叩くことでキーを隠蔽。
- Firebase AuthのIDトークンをPHP側で検証し、正規ユーザーからのリクエストのみを許可。
- IPベースのレート制限を独自実装し、APIの使いすぎを防止。
工夫点2: React + PWAでのアプリ体験
Webサイトですが、PWA (Progressive Web Apps) として実装しました。
vite-plugin-pwa を活用し、ホーム画面に追加すればワンタップでアクセス可能です。
- オフライン対応: 地下鉄でも日記が書けるよう、アセットをキャッシュ。
- 確実なアップデート: PWA特有のキャッシュ問題を回避するため、起動時にサーバー上のバージョンを確認し、古い場合は自動で最新版を取得・更新する仕組みを実装。これにより「ユーザーごとにバージョンが違う」問題を解消しました。
"人間らしさ"を生むプロンプトエンジニアリング
一番こだわったのは、AIからの返信の「温度感」です。ただ要約するだけでは面白くありません。
1. 時間と季節の認識 (Time-Awareness)
システムプロンプトに、現在時刻や日付の情報を動的に注入しています。
これにより、AIは以下のように自然に振る舞います。
- 朝: 「おはようございます！今日も良いスタートを。」
- 夜: 「こんばんは。一日お疲れ様でした。」
- お正月: 「あけましておめでとうございます！今年の抱負はありますか？」
「今」を共有している感覚が、対話の没入感を高めてくれます。
2. 人格（ペルソナ）の切り替え
ユーザーの好みに合わせて、AIの口調を切り替えられる機能を実装しました。
- 親友モード: 「〜だよね！」「一緒にやろうよ！」（タメ口・共感重視）
- コーチモード: 「君ならできる！」「次はどう動く？」（熱血・行動重視）
- 分析官モード: 「論理的に考えると〜」（冷静・データ重視）
これはシステムプロンプトの一部をユーザー設定値で書き換えることで実現しています。
開発を支えた「AIペアプログラミング」
実はこのアプリ、コーディングの大部分を GoogleのAIエージェント とペアプログラミングで行いました。
「こういう機能が欲しい」と伝えると、設計からコード実装、Git操作までをエージェントが自律的に実行してくれます。
- 巨大化した
JournalApp.jsx（2000行超）のコンポーネント分割 - CSS変数を用いたテーマ切り替え機能の設計
- バグ（ReferenceErrorなど）の特定と修正
人間は「仕様の決定」と「体験の良し悪しの判断」に集中し、コーディングはAIが行う。
このスタイルのおかげで、個人開発とは思えないスピードで機能改善を回せています。
おわりに
「Deep Journal」 は、登録不要のゲストモードで今すぐ試せます。
「最近モヤモヤするな」「壁打ち相手が欲しいな」という方は、ぜひAIに話しかけてみてください。
もし技術的な詳細や、AI実装について聞きたいことがあれば、コメントでお待ちしています！
#個人開発 #React #Firebase #GeminiAPI #Gemini #生成AI