[OutSystems] Azure の文字起こしサービスをモバイルアプリで使う話

OutSystems User Group Tokyo のイベント Online OSUG Meetup 2025-03-27 で使用したスライドです。
スライドの内容に対応する解説は、下記で公開しています。

[OutSystems] Azure の文字起こしサービスをモバイルアプリで使う話 - Qiita
https://qiita.com/moriya-takasi/items/95d4ef44c421fc4d6371

イベント情報：
【Online OSUG Meetup】AI活用最前線！OutSystems × AIで広がる開発の可能性
https://usergroups.outsystems.com/events/details/outsystems-inc-tokyo-presents-online-osug-meetup-aihuo-yong-zui-qian-xian-outsystems-x-aideguang-garukai-fa-noke-neng-xing/

Transcript

1. Azure の文字起こしサービス をモバイルアプリで使う話 [Online OSUG Meetup] 2025-03-27 Fri AI活用最前線！OutSystems × AIで広がる開発の可能性 守谷 崇 ＠伊藤忠テクノソリューションズ
2. About Me https://www.outsystems.com/profile/wyd1ajex5p
3. • 文字起こしサービス（音声認識サービス - 音声情報を文字列情 報に変換するサービス） • 機械学習や自然言語処理といった AI 技術の産物 • iPhone の Siri や、Amazon の Alexa などの形で、10 年以上前 から身の回りに普及している • PC やスマホの OS の標準入力機能としても普及 • LLM などの前段で利用する形で適用範囲が広がった 文字起こしサービスと AI
4. OutSystems と AI 【開発者に作用する AI 機能】 • ODC Mentor の App Generator/App Editor • ODC Mentor の Code Quality や、O11 の AI Mentor Studio • ODC/Service Studio のコードアシストやデータタイプ推定 【開発されたアプリ利用者に作用する AI 機能】 • AI Agent Builder を使った LLM 機能の組み込み • SaaS の AI サービスや、デバイス AI 機能を用いる Forge 今回の話はこちら側
5. Azure の文字起こしサービス 本日使う：リアルタイムの音声テキスト変換 https://learn.microsoft.com/ja-jp/azure/ai-services/speech-service/speech-to-text • テキストカーソルの位置に縛られない • OutSystems アプリ側で音声ファイル（大容量になりがち）をハン ドリングする必要がない • JavaScript の SDK がいろいろ面倒みてくれる • Web API よりも高機能でブラウザバージョンには縛られない • 月5時間までは無料 https://azure.microsoft.com/en-us/pricing/details/cognitive-services/speech-services/
6. 実際の動作 発表時は、ここで、PWA で作成したモバイルア プリの画面を共有して、実演しました。 ポイントを絞った簡単なアプリを実現する方法を これから解説しますと説明。 下のボタンをタップすると、音声認識が開始され て、認識された文字列がテキストエリアにリアル タイムで表示されていき、再度押すと終了する、 という内容。
7. Azure 側の準備 Azure Portal での作業 https://portal.azure.com/ • 音声サービスを作成して、キーとエンドポイントをメモ
8. JavaScript SDK は CDN を使う • 使用した Azure Speech SDK のドキュメント https://learn.microsoft.com/ja-jp/javascript/api/overview/azure/microsoft-cognitiveservices-speech-sdk-readme • JavaScript SDK は CDN で配布されている https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js CDN 情報はここ（↑ドキュメントからたどれる） https://learn.microsoft.com/ja-jp/azure/ai-services/speech-service/quickstarts/setup-platform?pivots=programming-language- javascript&tabs=windows%2Cubuntu%2Cdotnetcli%2Cdotnet%2Cjre%2Cmaven%2Cbrowser%2Cmac%2Cpypi#html-script-tag • (System) の RequireScript を 使ってスクリーンに読み込む。
9. 文字起こし開始処理 SpeechRecognizer インスタンス作成 スクリーンアクションとのバインド 認識開始してインスタンスオブジェクト をスクリーン変数に保存
10. インスタンス作成に使う認証情報の扱い • fromSubscription(key, region) を使うサンプルが見つかるが、サブスクリプションキーのような「万が一拡散 したら悪用される可能性のある情報」を、クライアントサイド（特にモバイルアプリ）に送るのは基本的には ご法度。 • インスタンス用の SpeechConfig 作成の関数の SDK API ドキュメント https://learn.microsoft.com/ja-jp/javascript/api/microsoft-cognitiveservices-speech-sdk/speechconfig?view=azure-node-latest#microsoft-cognitiveservices-speech-sdk- speechconfig-fromauthorizationtoken • 短寿命トークンを使って fromAuthorizationToken(token, region) を使う • サイトプロパティにサブスクリプションキーを保存（Is Secret: Yes） • Consume REST API で短寿命のトークンを取得（ここでキーを使う。サーバーサイドのみ） • トークンエンドポイント、トークン寿命などについて解説されている公式サンプルの README https://github.com/Azure-Samples/AzureSpeechReactSample/blob/main/README.md#token-exchange-process 開始処理の先頭部分再掲
11. Recognizing と Recognized recognizing: こ recognizing: こんに recognizing: こんにちは recognized: こんにちは。 開始処理の一部分再掲
12. 変数に保存した Recognizer インスタンス 開始処理の一部分再掲 OnStopped とスクリーンの OnDestroy OnError 終了ボタン処理
13. まとめ • 少量の JS で Azure AI サービスによるリアルタイム文字起こし • 文字起こしは、LLM 利用などの前段に使える、適用範囲の広いサービス • リアルタイムだと音声データファイル（大容量になりがち）を使わないので OutSystems の苦手を踏まない • サブスクリプションキーのような万一の拡散がまずい情報は、クライアント（特 にモバイル端末）には送らないようにする • 短寿命トークンを Consume REST API で取得してクライアント利用すると良い 楽しい開発を！