Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】How I Built VoiceMax: Reading Emotion From a Voice Recording With Three Small AI Flows

2026年09月25日に「Dev.to」が公開したITニュース「How I Built VoiceMax: Reading Emotion From a Voice Recording With Three Small AI Flows」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

音声から感情を読み取るAIアプリVoiceMaxの開発手法。GeminiモデルとGenkitを使い、AI処理を3つの小フロー(音声分析・感情提案・フィードバック)に分割。各フローの役割分担、ブラウザでの音声録音、エラー処理など、具体的な実装と工夫を解説する。

ITニュース解説

VoiceMaxは、ユーザーが自分の声を録音し、その音声に隠された感情をAIが分析して、率直な読み解きとサポート的なフィードバックを提供するWebアプリケーションである。このプロジェクトはハッカソンで開発され、声が持つ無意識の感情情報を可視化し、人々に気づきを与えることを目的としている。システムエンジニアを目指す初心者にとって、このプロジェクトは現代のWeb開発とAI活用の一例として非常に参考になるだろう。

VoiceMaxの技術基盤は、フロントエンドにNext.js、TypeScript、shadcn/ui、Tailwind CSSを採用している。これらはモダンなWebアプリケーション開発でよく用いられる技術で、高速で使いやすいユーザーインターフェースを構築するのに役立つ。一方、音声分析の核となるAI部分は、Google AIの機能を利用するためのフレームワークであるGenkitと、Googleが開発した大規模なAIモデルであるGeminiを組み合わせて実現されている。

このアプリケーションのAI層の設計には特に注目すべき点がある。通常、ハッカソンのような短期間の開発では、一つの大きなプロンプト(AIへの指示文)ですべての処理をまかなおうとしがちだが、VoiceMaxではこのアプローチを避け、AIの処理を三つの独立した「フロー」に分割している。 一つ目のフロー「analyzeAudioEmotion」は、ユーザーの音声を直接受け取り、その中に含まれる感情の情報を分析して記述する。 二つ目のフロー「suggestAdditionalEmotions」は、一つ目のフローで得られた記述をもとに、さらに詳細な二次的な感情を提案する。 三つ目のフロー「providePersonalizedFeedback」は、主要な感情だけを受け取り、それに応じたパーソナライズされたフィードバックメッセージを作成する。もし感情がネガティブなものであれば、特定の「ツール」を呼び出して具体的なアドバイスを提供する仕組みになっている。

このように処理を細かくフローに分けることで、それぞれのAIフローが単一の明確な役割を持つことになり、入力と出力の形式もそれぞれ個別に定義できるため、開発やデバッグが格段に容易になったという。特定の機能の動作がおかしい場合でも、どのフローのプロンプトや設定を変更すればよいのかが明確になるため、迅速な改善が可能になる。

音声データの扱いやAIからの回答の構造化も工夫されている。最初のフローだけがユーザーの音声データを直接受け取るが、そのデータはBase64というテキスト形式に変換されてAIに渡される。AIからの出力は、ZodというTypeScriptのライブラリを使って定義された厳密なスキーマに従う。このスキーマには、primaryEmotion(主要な感情)、perceivedStressLevel(知覚されたストレスレベル)、speechCharacteristics(話し方の特徴)、perceivedConfidence(自信の度合い)、vocalEnergy(声のエネルギー)といった項目が含まれる。

特に重要なのは、スキーマ定義の中に各項目の「説明」を詳しく記述している点である。この説明文は、単なるコメントではなく、AIモデルへの具体的な指示としても機能し、「calm, moderate stress, high tension」のように例を示すことで、AIが生成する回答が短く、かつ比較しやすい形式になるように誘導している。また、感情の分析結果を「ストレス:73%」のような数値ではなく、「いくらかの躊躇が見られた」のような定性的な文字列にしているのは、AIが限られた音声データからどこまで正確に判断できるかという現実的な限界を考慮した賢明な判断だと言える。

さらに、二つ目以降のAIフローでは、再度音声データをアップロードすることなく、一つ目のフローが生成したテキストの要約を入力として利用している。これは、音声データの転送量を抑えるだけでなく、すべての分析結果が同じ音声分析の観察結果に基づいているため、矛盾のない一貫したフィードバックをユーザーに提供できるというメリットがある。

フィードバックの生成においては、AIとコードの役割分担が巧みに行われている。特に否定的な感情に対する「エクササイズ」(例えば呼吸法)は、AIモデルに自由に生成させるのではなく、Genkitの「ツール」という固定されたコードを呼び出して提供している。これにより、エクササイズの内容が常に安全で信頼性の高いものになり、ユーザーが実際に実践できる具体的な指示として機能する。AIは共感的なメッセージを生成するのに優れており、ツールは厳密で決まった手順を提供するのに優れている、というそれぞれの長所を活かしているわけである。

ユーザーインターフェースにおいては、ブラウザでの音声録音機能の実装にも細心の注意が払われている。MediaRecorderというWeb APIを使って音声を録音するが、ブラウザによって対応する音声形式が異なるため、まずWebM形式を試し、対応していなければOgg形式に切り替えるといった防御的なコードが書かれている。また、マイクへのアクセス許可エラーや、マイクが見つからないといったエラーに対しても、ユーザーが何をすべきか理解しやすいように、具体的なメッセージを表示する工夫がされている。録音終了後には、ブラウザのマイク使用インジケーターが確実に消えるよう、使用したリソースを適切に解放する処理も重要視されている。

エラーハンドリングもユーザー視点で行われている。AIとのやり取り中に発生する可能性のある技術的なエラー(APIのレート制限や不正なリクエストなど)は、そのままユーザーに見せるのではなく、「APIレート制限により分析に失敗しました」や「録音された音声が短すぎるか、無音である可能性があります」といった、ユーザーが理解し、場合によっては行動できるような、より分かりやすいメッセージに変換して表示される。これにより、ユーザーは漠然としたエラーに困惑することなく、何が起こったのか、どうすればよいのかを把握できる。

プロジェクトの作成者は、今後改善したい点として、部分的な分析結果をより早くユーザーに表示する「プログレッシブレンダリング」の修正と、一部のAIフロー(二番目と三番目のフロー)を並行して実行することで処理速度を向上させる可能性を挙げている。しかし、最も高く評価し、今後も再利用したい開発パターンとして強調しているのは、「小さく、型付けされた入出力を持つAIフロー」と、「厳密な正確さが求められる部分では通常のコードを使用する」というAI層の設計思想である。これは、AIを活用したシステム開発において、効率性、堅牢性、そしてユーザー体験の向上を実現するための重要なアプローチだと言える。

関連コンテンツ

関連IT用語

関連ITニュース