本文へ移動
cccskills
無料GitHub で公開

realtime-speech

Code Apps などのブラウザ アプリで、Azure AI Speech のストリーミング文字起こしと録音を実装する。ブラウザから Speech へ WebSocket で直結し、短期トークンは Managed Identity の Function からカスタム コネクタ経由で受け取る。Code Apps の CSP・iframe・メインスレッドの制約に合わせた音声経路(同一オリジン AudioWorklet、Push ストリーム、Worker タイマー無効)と、端末・ホスト再現・実機の 3 段階の検証を提供する。

インストール方法を見る

含まれるファイル(36)

  • SKILL.md10.6 KB
  • references/.env.example1.0 KB
  • references/auth.md4.6 KB
  • references/continuous-segmentation.md5.9 KB
  • references/latency-accuracy.md2.5 KB
  • references/mai-transcribe.md4.8 KB
  • references/speaker-identification.md5.1 KB
  • references/troubleshooting.md7.0 KB
  • scripts/get_speech_token.ps11.9 KB
  • scripts/synthesize_script_wav.ps12.4 KB
  • scripts/verify_push_stream.mjs3.2 KB
  • scripts/verify_speech_roundtrip.mjs4.0 KB
  • templates/code-apps-addon/public/pcm-capture-worklet.js1.2 KB
  • templates/code-apps-addon/README.md3.4 KB
  • templates/code-apps-addon/scaffold.json900 B
  • templates/code-apps-addon/src/hooks/use-transcription-session.ts12.0 KB
  • templates/code-apps-addon/src/lib/debug-log.ts3.4 KB
  • templates/code-apps-addon/src/lib/speech/audio-pipeline.ts4.3 KB
  • templates/code-apps-addon/src/lib/speech/pcm-segmenter.ts2.3 KB
  • templates/code-apps-addon/src/lib/speech/recognizer.ts2.8 KB
  • templates/code-apps-addon/src/lib/speech/token.ts4.1 KB
  • templates/speech-token-broker/.funcignore63 B
  • templates/speech-token-broker/.gitignore46 B
  • templates/speech-token-broker/connector/apiDefinition.swagger.json2.0 KB
  • templates/speech-token-broker/connector/apiProperties.json1.0 KB
  • templates/speech-token-broker/host.json267 B
  • templates/speech-token-broker/local.settings.sample.json142 B
  • templates/speech-token-broker/package.json573 B
  • templates/speech-token-broker/README.md2.7 KB
  • templates/speech-token-broker/scaffold.json1.4 KB
  • templates/speech-token-broker/src/functions/speechToken.ts1.4 KB
  • templates/speech-token-broker/src/index.ts33 B
  • templates/speech-token-broker/src/lib/auth.ts4.4 KB
  • templates/speech-token-broker/src/lib/speech.ts1.7 KB
  • templates/speech-token-broker/test/auth.test.cjs2.3 KB
  • templates/speech-token-broker/tsconfig.json250 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

リアルタイム音声文字起こしスキル

ブラウザ アプリ(主に Code Apps)で、話している内容をその場で文字にしながら録音する機能を作る。

マイク ─▶ AudioContext ─▶ AudioWorklet(同一オリジン)─▶ 16 kHz PCM ─▶ Push ストリーム ─▶ Speech SDK ─(WebSocket)─▶ Azure AI Speech
   └────▶ MediaRecorder(録音・opus)                                                              ▲ 短期トークン
Code Apps ─(カスタム コネクタ)─▶ トークン発行 Function(Managed Identity)────────────────────────────┘
判断理由
ブラウザから Speech へ直結する途中結果を 0.2〜0.4 秒間隔で受け取れる。サーバー中継は遅延と運用が増える
トークンはコネクタ経由の Function から受け取るキーをブラウザに置かない(キー認証が無効なテナントでも動く)。コネクタ呼び出しは CSP の追加が不要
音声は自前で PCM にして Push ストリームで渡すSDK にマイクを直接渡すと、Code Apps では音声が SDK に届かない

リファレンス: 認証とロール / 遅延と精度 / 連続録音の区切り / 名乗りからの話者の特定 / MAI-Transcribe との組み合わせ / 異常系 / パラメータ

Step 0: 事前確認(会話の最初に 1 回だけ)

standard の共通契約に加え、1 回の AskUserQuestion で確認する。

#質問合格条件
1Speech リソースのサブスクリプション・リージョン・既存リソースの有無リージョンが決まり、カスタム サブドメインを付けられる
2環境の CSP に connect-src wss://<region>.stt.speech.microsoft.com を追加してよいかCSP は環境全体に効く。変更の承認者が決まっている
3ロール付与・コネクタ作成・DLP 分類の担当者Azure RBAC、Power Platform のコネクタ、DLP の担当が分かれて記録されている
4音声と文字起こしのデータ分類・保存期間・保存先録音を扱ってよい根拠と保存先が決まっている
5利用端末と会場(マイク、ブラウザ、ほかに動かすアプリ)端末の負荷とマイクの経路(ミキサー等)が分かっている

Step 1: Speech リソースと権限を用意する

  1. Speech リソース(kind=SpeechServices)をカスタム サブドメイン付きで作る。キー認証が無効でもよい(Entra ID で認証する)
  2. 開発者とトークン発行 Function の Managed Identity に Foundry User を付ける。Managed Identity はリソース グループの範囲で付ける (実測で数秒〜2 分で反映。リソース範囲は反映に約 12 分かかった。通らなかったロールは 認証とロール)

Step 2: 端末で往復検証する

アプリを作る前に、リソース・権限・リージョンが正しいことを端末だけで確かめる。 Speech SDK を入れたプロジェクトのフォルダーで実行する。

$env:SPEECH_TOKEN = (powershell -File .github/skills/realtime-speech/scripts/get_speech_token.ps1 -Raw)
node .github/skills/realtime-speech/scripts/verify_speech_roundtrip.mjs --out samples/question.wav --phrase <専門用語>
node .github/skills/realtime-speech/scripts/verify_push_stream.mjs --wav samples/question.wav

1 本目は音声合成で質問音声を作って認識する(作った WAV は後の疑似マイクに使う)。 2 本目はブラウザと同じ変換経路(48 kHz → 16 kHz → Push ストリーム)で認識する。両方で確定文が出れば次へ進む。

Step 3: トークン発行 Function とコネクタを用意する

構成は azure-infra のトークン ブローカー パターン に従い、実装はテンプレートから生成する。

python .github/skills/update-skills/scripts/scaffold_from_template.py `
  --template .github/skills/realtime-speech/templates/speech-token-broker --target <出力先> --dry-run

生成後は scaffold.json の手順(ビルド → deploy_mcp_function.py)で Function をデプロイし、 コネクタと接続は custom-connector スキル の Step 1〜7 で作る (deploy_connector.py --connector-dir <出力先>/connector → create_connection.py plan / apply / invoke --path /speech/token)。 コネクタのテンプレートは on-behalf-of が有効なので、接続はブラウザ操作なしで、スクリプトを実行したサインイン ユーザーの権限で作られる。 Function はコネクタのトークン(scp=User.Read、appid=API アプリ)を信頼クライアントとして受け付ける(authorizeClaims())。

Step 4: Code Apps の CSP を設定する

python .github/skills/code-apps/scripts/configure_code_app_csp.py --directive Connect-Src --source wss://<region>.stt.speech.microsoft.com --apply
python .github/skills/code-apps/scripts/configure_code_app_csp.py --directive Connect-Src --source wss://<region>.stt.speech.microsoft.com --assert

worker-src や script-src に data: / blob: は追加しない(Step 5 の部品はどちらも使わない)。

Step 5: アドオンを生成してホストへ統合する

python .github/skills/update-skills/scripts/scaffold_from_template.py `
  --template .github/skills/realtime-speech/templates/code-apps-addon --target <作業フォルダー> --dry-run

public/ と src/ をホストへ統合し、ホストで npm install microsoft-cognitiveservices-speech-sdk を実行する。 使い方は アドオンの README。守ること:

  • 開始はボタンのクリックから呼ぶ(AudioContext の開始にユーザー操作が要る)
  • 前提(トークン発行コネクタ)が欠けているときは開始ボタンを無効にし、理由を表示する
  • 認識器は必ず createRecognizer() で作る(WebWorkerLoadType=off を設定する。外すと文字起こしが無言で止まる)
  • 録音を止めずに続け、発言者ごとに区切って保存する場合は、認識器に送る PCM を pcm-segmenter.ts に溜め、 区切りのフレーズの offset で切り出す(連続録音の区切り)
  • 話者が番号と名前を名乗る場合(株主番号・会員番号など)は、番号を固定の変換だけで決めない。名簿の候補をブラウザで絞り、 生成 AI(構造化出力)に候補から選ばせ、確からしさ 0.8 以上だけ自動適用する(話者の特定)
  • 精度を上げたい場合は、確定文ごとにその区間の録音を MAI-Transcribe で認識し直す(日本のリージョンは未提供のため東南アジア等。 置き換え/比較を選べるようにする。MAI-Transcribe)

Step 6: ホスト再現テストで確認する

code-apps のホスト再現テスト で、Step 2 の WAV を疑似マイクにして動かす。 複数の話者・長い台本で試すときは、台本を Windows の読み上げで WAV にする(クラウド不要)。

powershell -ExecutionPolicy Bypass -File .github/skills/realtime-speech/scripts/synthesize_script_wav.ps1 -Script <台本.json> -Out .mcp/tts/script.wav
  1. 正常系: 確定文と記録の保存まで進み、CSP 違反が 0 件
  2. 停止耐性: 送信開始 5 秒以降にメインスレッドを 0.8 秒止めても、停止中・停止後の文が正しく確定する
  3. 連続録音の場合: 区切りの順番と、切り出した録音の長さが区切りの offset の差と一致する

Step 7: 実機で確認する

Power Apps で開き、DevTools の Console をログの接頭辞(例: [APP)で絞り込んで、次の順に出ることを確認する。

マイク取得 → AudioContext {"state":"running"} → 音声の取り込み方式 {"mode":"worklet"} → Speech トークンを取得 → WebSocket 接続確立 → 発話開始を検知 → 最初の途中結果 → 確定 → 記録を保存しました

CSP 違反 が 1 件でも出たら 異常系 を見る。

検証チェックリスト

  • Step 0 を 1 回の質問で確認し、CSP 変更と録音の扱いの承認を得た
  • Speech リソースにカスタム サブドメインがあり、Function の Managed Identity に Foundry User を付けた
  • Step 2 の 2 本のスクリプトで確定文が出た
  • Function が認証なしで 401、委任トークンで 200 を返す
  • CSP の --assert が通り、data: / blob: を追加していない
  • 認識器は createRecognizer() で作り、取り込み方式は worklet になっている
  • ホスト再現テストで CSP 違反 0 件、メインスレッド停止後も文が欠けない
  • 実機の Console で Step 7 の順にログが出た

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

admin

無料日本語概要

Power Platform のテナント / 環境ガバナンスを確認・設定する管理スキル。開発着手前の環境チェック(既定環境ではないか・マネージド環境・Dataverse / Code Apps / MCP の有効化・セキュリティ ロール・管理 API アクセス)と DLP 事前チェックを非対話スクリプトで実行し、必要ならマネージド環境設定・カスタムコネクタの DLP 分類・ACP(Advanced connector policies)の許可コネクタを dry-run 付きで変更する。Microsoft 第一者サービスだけを許可する ACP 推奨プロファイルの適用と、クラシック DLP から ACP への移行も支援する。クラシック DLP と ACP は既定の混成モードで併用され、より制限の厳しい方が適用されるため両方を確認する。オプションとして、既定環境 / 個人開発者環境 / 市民開発者環境 / AI CoE セントラル / AI CoE 内製開発の 5 グループからなるテナント全体の環境戦略を、読み取り専用スキャン → 移行プラン(admin-migration-plan.md)→ レビュー → 適用の順で策定・実行する。設定は環境グループのルールで行うのを原則とし、グループ ルールに無い項目(既定環境ルーティング・Dataverse for Teams 禁止・Dataverse 検索・グループへの割り当て・Copilot クレジット配分)だけをテナント設定・環境個別設定・Dataverse の組織設定で補う。IP 制限・テナント分離・監査ログ・ライセンス配分などの管理設定は references にまとめる。

geekfujiwara/CodeAppsDevelopmentStandard722026年10月9日 更新

agent-flows

無料日本語概要

Copilot Studio 新 UI の Agent flows / Workflows を構築・公開・検証する。Dataverse レコード作成/更新トリガーから既存の発行済み Copilot Studio v2 を Agent ノードで呼ぶ標準経路、Code Apps との非同期要求/結果連携、および手動 Start + inline Agent の API ライフサイクル検証を扱う。

geekfujiwara/CodeAppsDevelopmentStandard722026年10月9日 更新

agm-qa-authoring

無料日本語概要

株主総会の想定問答を、IR 抜粋(決算短信・説明資料・招集通知など)を根拠に下書きし、利用者の確認後に Dataverse の想定問答テーブルへ「下書き」として登録するスキル。 Use when ユーザーが「配当について想定問答を作って」「この論点の想定問答を 3 件追加して」「招集通知から想定問答を作って」「想定問答を登録して」と依頼したとき。 Dataverse MCP コネクタ(describe / read_query / search_data / create_record / update_record)を使用する。削除・テーブル変更のツールは使わない。

geekfujiwara/CodeAppsDevelopmentStandard722026年10月9日 更新

agm-qa-review

無料日本語概要

株主総会の想定問答を点検し、根拠の IR 抜粋に無い数値・存在しない根拠 ID・回答者や注意事項の抜け・趣旨の重複・下書きのまま残っているものを一覧にするスキル(書き込みはしない)。 Use when ユーザーが「想定問答を点検して」「根拠の無い数値が無いか確認して」「下書きの想定問答を一覧にして」と依頼したとき。 Dataverse MCP コネクタ(describe / read_query / search_data)を使用する。書き込み・削除のツールは使わない。

geekfujiwara/CodeAppsDevelopmentStandard722026年10月9日 更新

agm-rehearsal-script

無料日本語概要

株主総会の質疑応答のリハーサル台本(議長・株主・回答役員の読み上げ原稿)を、承認済みの想定問答から作り、Dataverse のリハーサル台本テーブルへ登録するスキル。 Use when ユーザーが「リハーサルの台本を作って」「QA-001〜QA-010 で読み上げ原稿を作って」「番号を言わない株主も入れた台本を作って」と依頼したとき。 Dataverse MCP コネクタ(describe / read_query / search_data / create_record / update_record)を使用する。削除・テーブル変更のツールは使わない。

geekfujiwara/CodeAppsDevelopmentStandard722026年10月9日 更新

ai-builder

無料日本語概要

AI Builder の AI プロンプト(GPT Dynamic Prompt)を Dataverse API で作成し、Copilot Studio エージェントにツール(アクション)として追加する。Power Automate フローとの統合パターンも含む。

geekfujiwara/CodeAppsDevelopmentStandard722026年10月9日 更新

geekfujiwara のスキルをすべて見る

このスキルの問題を報告する