ホーム » JOB » ツール » Whisper APIとFlutterで作る実用的な音声入力アプリ – 議事録・ブログ・要約の自動生成まで

Whisper APIとFlutterで作る実用的な音声入力アプリ – 議事録・ブログ・要約の自動生成まで

JOB

AIを活用したプログラミングの記事を作成しています！

第1章: はじめに

1-1. この記事でわかること

こんにちは！この記事では、OpenAIのWhisper APIとFlutterを組み合わせて、実用的な音声入力アプリを作る方法を解説します。

この記事を読むと、以下のことがわかります:

  • Whisper APIとFlutterを組み合わせた音声入力アプリの作り方 – 録音からテキスト化、文章整形までの一連の流れ
  • OpenAI APIの実践的な使い方 – Whisper APIとGPT-4o-miniを組み合わせた実装
  • 実用的な音声入力アプリの設計とUI実装 – タブ管理、状態保持、UIオーバーフロー対策

最終的には、会議の議事録、ブログ原稿の下書き、アイデアメモなどを音声で入力して自動生成するアプリが完成します。

【生成AI】イタリア語翻訳Webアプリ：音声認識と翻訳の融合（Python、JavaScript） –

英語学習の新常識！AI英会話パートナー「Englishチャットボットプログラム」で実践英会話をマスターしよう

1-2. 想定読者

この記事は、以下のような方を対象にしています:

  • Flutterの基礎知識がある方 – StatefulWidget、非同期処理（Future、async/await）の基本を理解している
  • OpenAI APIを使ってみたい方 – API Keyは取得済み、またはこれから取得予定
  • 音声入力で業務効率化したい方 – 手動入力に時間がかかっていて、音声で効率化したい
  • 会議の議事録作成、ブログ執筆などでテキスト入力に時間がかかっている方

逆に、Flutterを全く触ったことがない方は、公式チュートリアルで基本を学んでから読むことをおすすめします。ただし私もそうですが、CursorなどのAI搭載開発ツールを使えば簡単に使えますので、トライする価値あると思います！

1-3. 開発の背景・きっかけ

僕がこのアプリを作ろうと思ったきっかけは、テキスト入力作業に時間がかかりすぎていたことでした。

具体的には:

  • 会議の議事録作成に毎回30分〜1時間かかる – 会議中はメモを取るだけで精一杯、後で清書するのに時間がかかる
  • ブログ原稿の下書きを手動入力するのが面倒 – キーボードで打つより、話した方が速く思考を整理できる
  • 通勤などの外出時に思いついたアイデアを記録したい – その場で録音できれば、後で忘れることがない

既存の音声入力アプリも試しましたが、問題がありました:

  • 認識精度が低い – 特に日本語の句読点が付かない、または変な位置に付く
  • 整形機能がない – 認識後のテキストが読みにくく、結局手動で整形が必要
  • 用途別の変換ができない – 議事録形式、ブログ形式など、用途に応じた整形ができない

そこで、自分専用のカスタマイズ可能なツールを作ることにしました。Whisper APIの精度の高さとGPT-4の文章整形能力を組み合わせれば、実用レベルのアプリが作れると確信したからです。

PC版ですとAqua Voiceというツールが非常に高性能と評判ですが、スマホ用にはあまりないのが現状です。また、自分が必要とする使い方に特化したツールであれば安価に実現できるのではないか、という思いもあり作成しています。

Typelessというスマホ用の高性能ツールが発売されているようです。それにはかなわないと思いますが、今は自分でツール開発が出来るようになっています。自分に必要最低限の機能を有したお手頃価格のツール開発の参考になればと思います！GPT APIは従量課金なのでよくあるサブスクツールのように月8＄とかでなく、1分話しても1円程度ですので、1日1時間(1200分/月(20日))程度以内に収まる音声情報を文字化する方にとっては、このような方法で十分にコスト優位性があるものと思います。

また、使ってみて分かったことは、小声でも非常に認識能力が高いことです。音声入力はまだ一般的でなく、恥ずかしいと思う方も多いと思いますが、本当にウィスパー（ささやき）でも音声を拾ってくれるので、これは本当に使えると思います！市販品と比較してみたいと思う方も是非一読ください。

第2章: 使用技術の概要

2-1. 技術スタックの全体像

このアプリで使用した技術は以下の通りです:

  • Flutter – クロスプラットフォームUIフレームワーク（iOS/Android両対応）
  • Dart – Flutterのプログラミング言語
  • OpenAI API
  • Whisper API: 音声→テキスト変換（$0.006/分）
  • GPT-4o-mini: 文章整形・要約・議事録生成（$0.15/1M入力トークン）
  • Firebase
  • Firestore: NoSQLデータベース（履歴保存）
  • Authentication: 匿名認証
  • record パッケージ: 音声録音機能
Just a moment...
openai.com

2-2. 各技術の役割と選定理由

なぜこれらの技術を選んだのか、それぞれの理由を説明します。

Flutter:

  • iOS/Android両対応で、一度のコード作成で両プラットフォームに対応できる
  • 開発効率が高く、Hot Reloadで即座にUIの変更を確認できる
  • UI/UXが美しく、ネイティブアプリと遜色ない

Whisper API:

  • OpenAIが提供する音声認識APIで、精度が非常に高い
  • 日本語の句読点も自動で付けてくれる（これが最大の魅力）
  • コストパフォーマンスが良い（1分の音声で約0.8円）

GPT-4o-mini:

  • GPT-4より安価で高速（入力トークン $0.15/1M vs GPT-4の $30/1M）
  • 文章整形には十分な性能（要約、議事録、ブログ原稿の生成も可能）
  • API呼び出しが簡単で、レスポンスも速い

Firebase:

  • バックエンドサーバーを構築する必要がない
  • Firestoreは無料枠が大きく、個人利用には十分
  • 匿名認証で簡単にユーザー管理ができる

2-3. システム構成（テキストで説明）

アプリ全体のデータの流れは以下の通りです:

[ユーザー]
  ↓ 音声入力（会議、アイデア、ブログネタなど）
[Flutter アプリ]
  ↓ 音声データ（m4a形式）
[Whisper API]
  ↓ テキストデータ（句読点付き）
[Flutter アプリ]
  ↓ テキスト + プロンプト（「ビジネス文書として整形して」など）
[GPT-4o-mini API]
  ↓ 整形されたテキスト、要約、議事録、ブログ原稿
[Flutter アプリ]
  ↓ 保存（ユーザーID + タイムスタンプ）
[Firebase Firestore]

ユーザーが音声を録音すると、Flutterアプリが音声ファイルをWhisper APIに送信します。Whisperがテキスト化したデータを受け取り、さらにGPT-4o-miniに送って文章を整形します。最後に、整形されたテキストをFirestoreに保存して、後から確認できるようにします。

第3章: 実装の詳細

3-1. 環境構築

まず、開発環境を整えます。

必要なもの:

  • Flutter SDK（最新版）
  • Firebase プロジェクト（Firestoreを有効化）
  • OpenAI API Key（https://platform.openai.com/ で取得）

pubspec.yamlに追加するパッケージ:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0              # HTTP通信用
  record: ^5.0.4            # 音声録音用
  path_provider: ^2.1.1     # ファイルパス取得用
  firebase_core: ^2.24.2    # Firebase初期化
  cloud_firestore: ^4.14.0  # Firestore
  firebase_auth: ^4.16.0    # Firebase認証

flutter pub getを実行してパッケージをインストールします。

3-2. コア機能の実装

ここでは一部を紹介します。

3-2-1. 音声録音機能

まず、音声を録音する機能を実装します。recordパッケージを使うと、簡単に録音できます。

// 録音開始
Future<void> _startRecording() async {
  if (await _audioRecorder.hasPermission()) {
    final directory = await getApplicationDocumentsDirectory();
    final filePath = '${directory.path}/audio_${DateTime.now().millisecondsSinceEpoch}.m4a';

    await _audioRecorder.start(
      const RecordConfig(
        encoder: AudioEncoder.aacLc,  // m4a形式
        bitRate: 128000,
        sampleRate: 44100,
      ),
      path: filePath,
    );

    setState(() {
      _isRecording = true;
      _recordingPath = filePath;
    });
  }
}

// 録音停止
Future<void> _stopRecording() async {
  final path = await _audioRecorder.stop();
  setState(() {
    _isRecording = false;
  });

  if (path != null) {
    // Whisper APIに送信
    await _transcribeAudio(path);
  }
}

ポイントは、録音ファイルをm4a形式で保存することです。Whisper APIはm4a、mp3、wav など様々な形式に対応していますが、m4aはファイルサイズが小さくて高音質なので、モバイルアプリに最適です。

3-2-2. Whisper APIでの音声認識

録音した音声をWhisper APIに送信してテキスト化します。

Future<String> _transcribeAudio(String filePath) async {
  final request = http.MultipartRequest(
    'POST',
    Uri.parse('https://api.openai.com/v1/audio/transcriptions'),
  );

  request.headers['Authorization'] = 'Bearer $apiKey';
  request.fields['model'] = 'whisper-1';
  request.fields['language'] = 'ja';  // 日本語を指定
  request.files.add(await http.MultipartFile.fromPath('file', filePath));

  final response = await request.send();
  final responseBody = await response.stream.bytesToString();
  final data = json.decode(responseBody);

  return data['text'];
}

重要なポイント:

  • multipart/form-data形式でファイルを送信する
  • languageフィールドで'ja'を指定すると、日本語の認識精度が上がる
  • レスポンスのtextフィールドに認識されたテキストが入っている

Whisper APIの素晴らしいところは、日本語の句読点も自動で付けてくれることです。他の音声認識APIでは、句読点がなくて読みにくいテキストになることが多いのですが、Whisperは自然な日本語文章を返してくれます。

3-2-3. GPT-4による文章整形

Whisperで認識したテキストを、GPT-4o-miniで整形します。

Future<String> _refineText(String text, String mode) async {
  final prompt = mode == 'business'
      ? '以下のテキストをビジネス文書として整形してください。句読点を適切に配置し、段落を整理してください。'
      : '以下のテキストをカジュアルな文章として整形してください。読みやすく、親しみやすい表現にしてください。';

  final response = await http.post(
    Uri.parse('https://api.openai.com/v1/chat/completions'),
    headers: {
      'Authorization': 'Bearer $apiKey',
      'Content-Type': 'application/json',
    },
    body: json.encode({
      'model': 'gpt-4o-mini',
      'messages': [
        {'role': 'system', 'content': prompt},
        {'role': 'user', 'content': text},
      ],
    }),
  );

  final data = json.decode(response.body);
  return data['choices'][0]['message']['content'];
}

第4章: 実際の使用例

4-1. デモ・スクリーンショット（テキストで説明）

完成したアプリの画面構成を説明します。

メイン画面（録音タブ）:

  • 上部: タブバー（録音、履歴）
  • スイッチ: ビジネス/カジュアル切り替え
  • コスト表示: Whisper: $0.xx, GPT-4: $0.xx
  • 中央: 録音ボタン（大きな青い丸）
  • 録音時間表示: 00:00（録音中は秒数がカウントアップ）
  • ボタン群: 要約、議事録、ブログ原稿
  • 保存ボタン: Firestoreに履歴を保存
  • 下部: 認識されたテキスト表示エリア（編集機能付きで誤字など修正可）

履歴タブ:

  • 過去の録音データをリスト表示
  • 各項目に元のテキスト、整形後テキスト、タイムスタンプを表示
  • タップで詳細表示

要約/ブログ/議事録タブ:

  • 生成された文章を表示
  • 編集ボタン付き（前述の_editTextメソッドを使用）
  • コピーボタン、ファイル保存ボタン

4-2. 活用シーン

実際に僕がどのように使っているか、シーン別に紹介します。

シーン1: 会議の議事録作成

  1. 会議開始時に「録音開始」ボタンをタップ
  2. 会議中は話すだけ（アプリは最小化してOK）
  3. 会議終了後に「録音停止」
  4. 数秒でテキスト化される
  5. 「議事録」ボタンをタップ
  6. 自動的に以下の形式で生成される:
  • 会議日時
  • 参加者（発言から推測）
  • 議題
  • 主な決定事項
  • アクションアイテム
  1. 必要に応じて編集して、メールやSlackに共有

時間創出効果:

  • 従来: 手動で議事録作成（30分）
  • 現在: 音声入力+自動生成（5分）
  • 削減時間: 25分/回

週に3回会議があるとすると、週2時間の削減になります。

シーン2: ブログ原稿の下書き作成

  1. アイデアを話して録音
  2. 「ブログ原稿」ボタンで構成された文章に変換
  3. タイトル、見出し、本文が自動生成される
  4. 細かい調整だけ手動で行う

時間創出効果:

  • 従来: 手動で下書き（1時間）
  • 現在: 音声入力+自動生成（15分）
  • 削減時間: 45分/回

シーン3: 通勤中のアイデアメモ

これが僕にとって最も価値が高い使い方です。

  1. 通勤中に思いついたアイデアをその場で録音
  2. 後で「要約」ボタンで簡潔にまとめる
  3. Evernote や Notion にコピペ

従来は、通勤中に思いついたアイデアを忘れてしまうことが多かったのですが、音声で即座に記録できるようになって、アイデアを逃さなくなりました。

4-3. 実際に使ってみた感想

良かった点

  • Whisper APIの精度が想像以上に高い – 日本語の句読点も自動で付く。他の音声認識APIとは比較にならない
  • GPT-4による文章整形が実用的 – ほぼ手直し不要で、そのまま使えるレベル
  • 音声入力の方が手動入力より圧倒的に速い – キーボードで打つより約3倍速い
  • コストが安い – 1回の使用で数円程度。月額換算でも$1-5程度

改善したい点

  • 履歴検索機能がない – タイトル・タグ付けが欲しい。今は時系列で並んでいるだけ
  • 共有機能が弱い – コピペではなく、Slack/メールへの直接送信が欲しい
  • バックグラウンド録音に非対応 – アプリを最小化すると録音が止まる

時間創出効果（実測値）

実際に1週間使ってみた結果:

  • 議事録作成: 30分 → 5分（-25分）× 週3回 = 週1時間15分の削減
  • ブログ下書き: 60分 → 15分（-45分）× 週1回 = 週45分の削減
  • 合計: 週あたり約2時間の削減

これだけでも、作って良かったと実感しています。

第5章: 今後の改善予定

5-1. 現状の課題

現状のアプリには、まだ改善の余地があります:

  1. 履歴管理の弱さ – タイトル・タグ付け、検索、フィルタがない
  2. 共有機能の不足 – コピペではなく直接送信したい
  3. 録音体験 – バックグラウンド録音、無音自動停止、ウェーブフォーム表示
  4. ストアリリース未対応 – 現在は開発版のみ

5-2. 今後追加したい機能

履歴にタイトル・タグ付け機能

  • 手動でタイトルを編集可能にする
  • タグを複数追加可能にする（「会議」「ブログ」「アイデア」など）

全文検索・フィルタ機能

  • テキスト全文検索
  • 日付フィルタ、モードフィルタ

ピン留め・お気に入り機能

  • 重要なメモを上部に固定

一括削除機能

  • チェックボックスで複数選択して削除

共有機能の強化

  • Slack/メール/Notionへの直接送信
  • システムレベルの共有ダイアログ

ToDoリスト抽出機能

  • 議事録から自動でToDoを抽出
  • Googleカレンダー/Todoistフォーマット

バックグラウンド録音

  • アプリを最小化しても録音継続

無音自動停止・最大録音時間設定

  • 録りっぱなし事故を防ぐ

ウェーブフォーム・レベルメーター表示

  • 録音中の音声を可視化

Apple App Store / Google Play Store リリース

  • ストア審査対応、プライバシーポリシー作成

第6章: まとめ

6-1. 本記事で作成したもの

この記事では、以下のものを作成しました:

  • Whisper APIとGPT-4を組み合わせた音声入力アプリ
  • 音声→テキスト→文章整形→用途別生成（要約、議事録、ブログ）まで一気通貫
  • Firebase連携による履歴管理
  • 実用レベルの精度と速度

最終的に、週2時間の時間創出を実現できました。

6-2. 開発を通じて学んだこと

  1. OpenAI APIの実践的な使い方 – Whisper + GPT-4の組み合わせが強力
  2. Firebase連携 – 匿名認証で簡単にユーザー管理、Firestoreで柔軟なデータ保存
  3. 実用的なアプリ開発 – 完璧を求めず、まず動くものを作る→改善のサイクル

特に、TextEditingControllerのエラーは2日間ハマったので、同じ問題に遭遇した人の助けになれば嬉しいです。

6-3. 読者へのメッセージ

音声入力は本当に時間を創出します。

手動入力の3倍速いだけでなく、考えながら話すことで思考が整理されます。僕自身、このアプリを作ってから、アイデアを逃さなくなりました。

Whisper APIとGPT-4を使えば、誰でも実用的な音声入力アプリを作れます。ぜひチャレンジしてみてください！

コード全体を見たい方は、[（準備中）]へ。

もし今回の内容が面白いと思っていただけたり、何かアドバイスなどありましたら反応して頂ければ幸いです！

コメント

タイトルとURLをコピーしました