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.json で side_panel を定義し、バックグラウンドスクリプトでパネルの挙動を制御。↓
4. トラブルシューティング:アイコンとService Worker
Phase 4: Bug Fixes
Fix拡張機能の「顔」であるアイコンが表示されない問題と、プログラムが起動しない問題に対応しました。
解決した技術的課題
- Service Worker欠落:
manifest.jsonのbackgroundセクションが漏れていたため
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
に変更。管理画面に赤いエラーマークを出さない配慮を加えました。

コメントを残す