AI Medical Scribe 開発全記録 – 機能実装からUX改善まで

 

AI Medical Scribe 開発全記録

コードはGithubにて公開しています。

 

診察録自動生成Chrome拡張機能の歩み

1. コア機能の実装:音声からSOAPへ

Phase 1: Initial Launch

Feature診察中の音声をブラウザ上でキャプチャし、AIを用いて直接電子カルテに貼れる形式(SOAP)に変換する基本機能を実装しました。

技術スタックと方法

  • 音声キャプチャ: MediaRecorder API を使用。MIMEタイプ audio/webm で音声を収集。
  • AIエンジン: Google Gemini API (gemini-2.5-flash )
    を採用。マルチモーダルで音声を処理できるため。おそらく他社の有料ツールも同じかと。
  • SOAP生成ロジック: システムプロンプトにより、日本の医療慣習(略語の使用など)に沿った整形を実施。
// 音声送信ペイロードの構造例
const payload = {
  contents: [{
    parts: [
      { text: activePrompt },
      { inline_data: { mime_type: "audio/webm", data: base64Audio } }
    ]
  }]
};

2. 運用安定化:APIキー管理とリミット対策

Phase 2: Reliability

Feature無料枠での安定利用や、1日の使用制限を管理するための機能を拡充しました。

主な変更点

  • APIキーローテーション: 複数のAPIキーを登録し、エラーや制限に応じて自動で切り替えるロジックを実装。
  • 使用ログの記録: chrome.storage.local を使い、各キーの当日の使用回数を永続化。
  • カスタムプロンプト: 医師独自のカルテスタイル(例:特定の項目を強調するなど)に対応できるよう、設定画面からプロンプトを編集可能に変更。

3. ユーザビリティの革新:サイドパネルへの移行

Phase 3: Better UX

Feature「カルテを入力している最中にポップアップが閉じて録音が止まる」という致命的な問題を解消しました。

Side Panel APIの導入

ブラウザの右側に固定表示されるサイドパネル形式に移行しました。これにより、カルテタブと録音画面を同時に操作することが可能になりました。

ここが肝: manifest.jsonside_panel を定義し、バックグラウンドスクリプトでパネルの挙動を制御。

4. トラブルシューティング:アイコンとService Worker

Phase 4: Bug Fixes

Fix拡張機能の「顔」であるアイコンが表示されない問題と、プログラムが起動しない問題に対応しました。

解決した技術的課題

  • Service Worker欠落: manifest.jsonbackground セクションが漏れていたため
    Service Worker が起動せず、サイドパネルの制御が効いていなかった。
  • アイコンのリソース修復: Mac標準の sips コマンドで画像をクリーンなPNGとして再書き出しし、Chromeの読み込みエラーを解消。
  • レスポンシブなCSS: 幅の狭いサイドパネルでも「録音開始」「解析」ボタンが切れないよう、タイトな設計に見直し。

5. 最新の更新:マイク権限の親切な誘導

Latest (v1.1.9)

Improvementマイクの許可を忘れているユーザーを迷わせないためのラストワンマイルの改善です。

設定画面へのダイレクト誘導

権限拒否を検知した際、ブラウザの「サイト設定」ページへ直接飛ぶためのリンクとボタンを表示するようにしました。URLは拡張機能IDを動的に取得して組み立てます。

chrome://settings/content/siteDetails?site=chrome-extension://${id}

また、権限拒否は「開発上の不具合」ではないため、ログ出力を console.error から console.warn
に変更。管理画面に赤いエラーマークを出さない配慮を加えました。

AI Medical Scribe 開発記録 – 医師が患者と向き合う時間を最大化するために© 2026 Development Log

 


コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です