耳が遠い人とのコミュニケーション促進アプリ

・名前：みみとも

・主な動作

①目で見る補聴器：対話相手の言葉を文字で表示 　　　　　　　　　大きな文字で短く 　　　　　　　　　方言にも対応

②会話モード：使用者との気軽な雑談に応じる 　　　　　　　入力は使用者の声、回答は文字と音声の両方 　　　　　　　家族や親せき、地域の情報も活用 　　　　　　　さりげなく認知症防止の行動を誘導する 　　　　　　　身近な人とのコミュニケーションを誘導する

③リマインダー機能：毎日の薬や体操の時間をお知らせ 　　　　　　　簡単登録、簡単操作 　　　　　　　何のリマインダーか、色や音で分かりやすい

④写真・思い出アルバムモード 　　　　　　　お気に入りの画像をスライド上映 　　　　　　　遠隔地からクラウドなどにデータを登録可能

・ポイント

　簡単：声とタッチだけで操作できる

　あんしん：ユーザーとまわりの人の不安を解消する工夫

　ふれあい：コミュニケーションを促進する機能

アーキテクチャ概要

みみともは、高齢者の聞こえと会話をサポートするWebアプリケーションです。音声認識・合成技術とAIを組み合わせて、自然な会話体験を提供します。

フロントエンド技術

React 19.1.1

• 用途: メインのUIフレームワーク
• 特徴: 最新のReact 19を使用、関数コンポーネントとHooksを活用
• コンポーネント構成:
  • Conversation.tsx - 音声会話機能
  • Profile.tsx - プロフィール管理
  • Reminders.tsx - リマインダー機能
  • Memories.tsx - 思い出管理
  • HearingAid.tsx - 補聴器機能
  • BottomNav.tsx - ナビゲーション

TypeScript 5.8.2

• 用途: 型安全性の確保
• 設定: ES2022ターゲット、React JSX対応
• 型定義: カスタム型定義ファイル（types.ts）でインターフェース管理

Vite 6.2.0

• 用途: ビルドツール・開発サーバー
• 特徴: 高速なHMR、ESモジュール対応
• 設定: パスエイリアス（@/）設定済み

Tailwind CSS

• 用途: スタイリング
• 特徴: ユーティリティファースト、レスポンシブデザイン
• デザイン: 高齢者向けの大きなフォント、見やすい色使い

バックエンド・データベース

Supabase

• 用途: BaaS（Backend as a Service）
• 機能:
  • PostgreSQL データベース
  • リアルタイム機能
  • 認証システム
  • ローカル開発環境

PostgreSQL

• テーブル構成:

  - users (ユーザー基本情報)
  - profile_items (プロフィール詳細)
  - reminders (リマインダー)
  - memories (思い出)
  - chat_messages (会話履歴)
  

• RLS: Row Level Security でセキュリティ管理

Supabase CLI

• 用途: ローカル開発・マイグレーション管理
• コマンド:
  • supabase start - ローカル環境起動
  • supabase db reset - データベースリセット
  • supabase studio - 管理画面

🤖 AI・音声技術

Google Gemini AI

• 用途: 会話AIエンジン
• ライブラリ: @google/genai v1.13.0
• 機能:
  • 自然な会話応答
  • ユーザープロフィールを考慮した文脈理解
  • リマインダー抽出機能

Web Speech API

音声認識: SpeechRecognition / webkitSpeechRecognition

• 日本語音声認識（ja-JP）
• リアルタイム音声入力
• エラーハンドリング

音声合成: SpeechSynthesis

• 日本語音声読み上げ
• 音声速度・音量調整
• 日本語音声優先選択

🔧 開発環境・ツール

Node.js

• バージョン: 最新LTS
• パッケージ管理: npm

開発スクリプト

{
  "dev": "vite",                    // 開発サーバー起動
  "build": "vite build",           // 本番ビルド
  "supabase:start": "supabase start", // Supabase起動
  "supabase:reset": "supabase db reset" // DBリセット
}

環境変数

• VITE_GEMINI_API_KEY - Gemini API キー
• VITE_SUPABASE_URL - Supabase URL
• VITE_SUPABASE_ANON_KEY - Supabase 匿名キー

セキュリティ

• RLS: Row Level Security でデータアクセス制御
• 環境変数: 機密情報の安全な管理
• CORS: 適切なクロスオリジン設定

🚀 デプロイメント

開発環境

• ローカルSupabase
• Vite開発サーバー
• ホットリロード対応

本番環境

• Supabase Cloud
• Viteビルド
• 静的ホスティング対応

📊 パフォーマンス

• Vite: 高速なビルド・HMR
• React 19: 最新の最適化機能
• Supabase: リアルタイム・高速クエリ
• 音声API: ブラウザネイティブ機能