第8週課題：業務効率化ツール作成｜voice-log アプリ開発

2025年2月9日 16:34

AIを使って業務効率化するプロジェクト始動！
このkeitaroさん率いる「けいたろう軍団」のプロジェクトでは
毎週　課題提出＆フィードバックを繰り返し「2ヶ月後にAIを使って業務効率化できるようになること」を目指しています。
今回が最後の課題！毎週一つのツール作成はかなり大変でしたが、すごく成長したと感じています！

【挑戦】音声ログツール実装の全貌！

音声入力の練習をしながら、日々の業務アイディアやメモを効率的に管理するため、音声入力を活用した「voice-log」アプリをReplitで開発しました。SHIFT AIの「５日間Replit集中マスターコース」で「自分用の記録アプリ」を作る宿題が出たので、これに挑戦しようと思いました！
ユーザーが録音した音声を自動で文字起こしし、さらにAIが要約を生成してくれる仕組みです。今回は、音声録音、文字起こし、要約生成の３大機能にフォーカスしました。

1.きっかけ

けいたろう軍団のグルコンで「毎日5分音声入力をする練習をした方がいい」と教えてもらったので、ただ音声を入力する練習をするだけではなく、録音、文字起こししたデータを元にアウトプットをできるようにしたら業務効率化につながるのでは！？と考えこのアプリを開発しました。
イメージは映画アバターの「ビデオログ」です。
音声でメモを残し、その内容を自動で整理できたら、業務効率は大幅に向上しますよね！
voice-logは、音声入力の練習ツールと、毎日の取り組みや課題やアイディアやこれからやりたい事など、考えや想いをインプットした情報を元にAIに希望の形でアウトプットを生成してもらう機能を今後実装して、セカンドブレインとして活用できるアプリにしたいと思っています！

Replitでvoice-logアプリを作りました！けいたろう軍団のグルコンで「毎日5分音声入力をする訓練をした方がいい」と教えてもらい、それを実現するためのツールを作成したくて開発に挑戦！イメージは映画アバターの「ビデオログ」。毎日の取り組みや課題やアイディアやこれからやりたい事など、考えや想… https://t.co/DxskcPIYkH pic.twitter.com/7QN5B5nbAv
— konmari (@konmari_tweet) February 9, 2025

2.実装概要と技術スタック

ReplitはMonthly creditsで利用制限があるので、なるべく少ないやりとりで進めたいと思い、まずはChat GPTに実装したい内容を投げて、「Replitでこのアプリを作成するにはどうすればいいですか？仕様をYAML形式で出力して、初心者でもわかるようにステップバイステップで教えて」とお願いしながら進めました！エラーが起こったりする都度スクショを投げて解決するという方法でReplitとChat GPTを行ったり来たりしながら開発しました！

↓Chat GPTに投げた内容

映画アバターに出てくるビデオログのように毎日の出来事を記録するツールを作りたいです。ビデオではなく、音声のみで。
毎日5分間喋り、それを蓄積し、蓄積された音声データから取り出したい情報を依頼すれば再構成できるような仕組みにしたいです。例えばコンテストに向けて勉強を始めた事や難しいと感じた事、アイディア、できた時の喜びなどを日々記録していき、コンテスト出品時に、「作成に向けた意気込みや難しかった点をマークダウン形式でまとめて」と伝えたら、生成してくれるツールを作りたいです。
Replit agentで構築できますか？やり方をステップバイステップで教えて。

↓YAML形式で出力してもらった結果

project:
  name: "voice-log"
  description: >
    音声ログの録音、Google Cloud Speech-to-Text での文字起こし、
    OpenAI API (GPT-4o) による要約生成を行う Web アプリケーション。
  plan: "Free/Minimal Cost"

architecture:
  frontend:
    description: "HTML, CSS, JavaScript で実装。MediaRecorder API による録音制御とUI表示。"
  backend:
    description: "Python Flask を用いてエンドポイントを提供。音声アップロード、認識、要約生成、DB保存を実装。"
    technology: "Python, Flask, SQLAlchemy (SQLite)"
  external_apis:
    google_speech:
      provider: "Google Cloud Speech-to-Text API"
      note: >
        長時間録音の場合は非同期処理または録音上限の設定を行う。
    openai:
      provider: "OpenAI API (GPT-3.5-turbo)"
      note: "必ず OPENAI_API_KEY を Replit Secrets で設定すること。"

environment_variables:
  OPENAI_API_KEY: "YOUR_OPENAI_API_KEY_HERE"
  GOOGLE_APPLICATION_CREDENTIALS_JSON: |
    {
      "type": "service_account",
      "project_id": "your-project-id",
      "private_key_id": "your_private_key_id",
      "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
      "client_email": "your-service-account-email@your-project-id.iam.gserviceaccount.com",
      "client_id": "your_client_id",
      "auth_uri": "https://accounts.google.com/o/oauth2/auth",
      "token_uri": "https://oauth2.googleapis.com/token",
      "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
      "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/your-service-account-email%40your-project-id.iam.gserviceaccount.com"
    }
  PORT: "8080"

endpoints:
  upload_audio:
    method: POST
    description: >
      録音ファイルを受信し、Google Cloud Speech-to-Text API を用いて文字起こしを行い、
      ログを SQLite に保存するエンドポイント。長時間録音の場合は非同期処理も検討。
  generate_summary:
    method: POST
    description: >
      保存済み音声ログを元に、OpenAI API を使用して Markdown 形式の要約を生成するエンドポイント。

replit:
  run_command: "python main.py"
  notes: >
    ・Secrets に OPENAI_API_KEY と GOOGLE_APPLICATION_CREDENTIALS_JSON を必ず設定してください。
    ・録音時間の上限や非同期処理の実装で長時間録音エラーに対処してください。

これをReplitに貼ってからスタートしたら、かなりスムーズに進められました！

技術スタック

フロントエンド：HTML5 / CSS3 / JavaScript
Web Audio API・MediaRecorder APIを用いてリアルタイムの音声録音と視覚的な音声レベル表示を実装

バックエンド：Python / Flask
音声データのアップロード、Google Cloud Speech-to-Text APIによる文字起こし、OpenAI API (GPT-4o)による要約生成

データベース：PostgreSQL
録音データ、文字起こし結果、要約の保存を実現

仕様書

# Voice Log 仕様書

## 1. 概要
Voice Logは、音声録音、文字起こし、要約生成を統合した多言語対応のWebアプリケーションです。
ユーザーが音声を録音すると、自動的に文字起こしを行い、その内容をAIで要約することができます。

## 2. システム構成

### 2.1 技術スタック
- フロントエンド
  - HTML5/CSS3/JavaScript
  - Bootstrap (ダークテーマ)
  - Web Audio API
  - MediaRecorder API

- バックエンド
  - Python/Flask
  - PostgreSQL
  - Google Cloud Speech-to-Text API
  - OpenAI GPT-4o API

### 2.2 主要機能
1. 音声録音
   - 最大録音時間: 5分（300秒）
   - フォーマット: WebM
   - サンプリングレート: 16kHz
   - チャンネル: モノラル
   - ビット深度: 16bit

2. 文字起こし
   - 対応言語: 日本語（ja-JP）
   - チャンク処理: 30秒単位
   - 自動句読点挿入

3. 要約生成
   - モデル: GPT-4o
   - 出力形式: Markdown
   - 要約内容: 重要ポイントの箇条書きと概要文

## 3. ユーザーインターフェース

### 3.1 録音コントロール
- 録音開始/停止ボタン
- 録音時間表示（MM:SS形式）
- 進捗バー（録音時間のビジュアル表示）
- 音声レベルインジケーター（録音中のみ表示）

### 3.2 処理状態表示
- アップロード進捗バー
- 処理状態メッセージ
- スピナーアニメーション

### 3.3 結果表示
- 文字起こし結果表示エリア
- 要約生成ボタン
- 要約結果表示エリア

## 4. データフロー

### 4.1 録音プロセス
1. ユーザーが録音開始ボタンをクリック
2. MediaRecorder APIを使用して音声録音開始
3. 音声レベルをリアルタイムで視覚化
4. 録音時間を表示し、進捗バーを更新
5. 最大録音時間（5分）に達するか、停止ボタンクリックで録音終了

### 4.2 文字起こしプロセス
1. 録音データをWebMフォーマットでサーバーにアップロード
2. サーバーで音声を30秒のチャンクに分割
3. 各チャンクをWAVフォーマットに変換
4. Google Cloud Speech-to-Text APIで文字起こし
5. 結果を統合してデータベースに保存

### 4.3 要約生成プロセス
1. ユーザーが要約生成ボタンをクリック
2. 文字起こしテキストをOpenAI APIに送信
3. 重要ポイントと概要を生成
4. 結果をMarkdown形式で表示

## 5. エラーハンドリング

### 5.1 録音エラー
- マイク権限未許可
- デバイス未接続
- 録音開始失敗

### 5.2 アップロードエラー
- ネットワークエラー
- ファイルサイズ制限
- フォーマットエラー

### 5.3 処理エラー
- 文字起こし失敗
- API制限超過
- データベース接続エラー

## 6. データベース設計

### 6.1 VoiceLogテーブル
- id: プライマリーキー
- timestamp: 録音日時
- audio_path: 音声ファイルパス
- transcript: 文字起こしテキスト
- duration: 録音時間（秒）
- language: 言語コード

### 6.2 Summaryテーブル
- id: プライマリーキー
- voice_log_id: 外部キー（VoiceLog参照）
- content: 要約内容
- timestamp: 生成日時
- model_used: 使用モデル名

## 7. セキュリティ対策
- 環境変数による API キーの管理
- クロスサイトスクリプティング（XSS）対策
- SQLインジェクション対策
- ファイルアップロードの検証
- セッション管理

## 8. パフォーマンス最適化
- 音声データの分割処理
- データベースのインデックス設定
- キャッシュ戦略
- 非同期処理の活用

## 9. 国際化対応
- 日本語インターフェース
- タイムゾーン設定（Asia/Tokyo）
- 日時表示フォーマット
- エラーメッセージの多言語化

## 10. 保守・運用
- ログ記録
- エラー監視
- バックアップ戦略
- パフォーマンスモニタリング

3. 苦労した点と解決策

API連携の難しさ

問題点：
OpenAI APIキーの設定ミスや環境変数の管理不備で、クラッシュする事例が発生しました。
解決策：
ReplitのSecrets機能を活用し、APIキーやGoogle Cloudの認証情報を適切に管理。
アプリ起動前の環境変数チェックを徹底しました。

長い録音時のエラー

問題点：
録音時間が長くなると、Google Cloud Speech-to-Text APIでエラーが発生するケースがありました。
解決策：
録音を最大5分（300秒）に制限し、録音データを30秒ごとにチャンク分割する方式を採用。
非同期処理やエラーハンドリングの強化も行いました。

音声入力の視覚的確認

問題点：
録音中に音声レベルや進捗状況をリアルタイムで表示する実装が難航。
解決策：
Web Audio APIを使って音声レベルを解析し、BootstrapのプログレスバーとCanvasで視覚的に表現する仕組みを導入。
何度も試行錯誤を重ね、最終的にユーザーが入力状況を確認できるUIを実現しました。

4. 実装機能の詳細

音声録音機能

特徴：
最大5分の録音制限
WebMフォーマット、16kHz、モノラル・16bitでの録音
録音開始/停止ボタン、録音時間表示、進捗バー、音声レベルインジケーター

文字起こし機能

特徴：
録音データを30秒単位にチャンク分割
Google Cloud Speech-to-Text APIでの日本語認識
自動句読点挿入と統合処理

要約生成機能

特徴：
OpenAI GPT-4o APIを使用
文字起こしデータを元に、Markdown形式の要約を生成
重要なポイントを箇条書きにまとめた分かりやすいアウトプット

5. 今後の課題

今後は、保存した全音声データを活用して、ユーザーが自由に企画書や提案書を生成できる機能を追加したいと考えています。
例えば、商品のアイディアや業務上の議論を音声で記録し、それを日付を跨いで集約。
AIにより自動で企画書という形式にアウトプットすることで、さらなる業務効率化を目指します。

おわりに

今回の取り組みでは、音声録音、文字起こし、要約生成という３つの基幹機能を実装し、実際に動作するシンプルなvoice-logツールを完成させました。API連携や長時間録音時のエラー対応、視覚的な確認UIの実装など、多くの課題を乗り越えながらの開発でした。
今後の拡張機能として、全音声データを元に企画書や提案書の自動生成が実現できれば、さらなる業務効率化が期待できます。
最後までお読みいただき、ありがとうございました！