GSP125

概要

Google Cloud Speech ストリーミング API を使用すると、デベロッパーは話し言葉をリアルタイムでテキストに変換できます。Java サーブレットは、API を JavaScript の Web Audio API および Websocket と組み合わせて使用することで、ウェブページからストリーミングされた音声を受け取り、そのテキスト文字起こしを提供できます。これにより、あらゆるウェブページで、話し言葉を追加のユーザー インターフェースとして使用できるようになります。

このラボは複数のセクションに分かれており、各セクションでは最終的なウェブ アプリケーションのコンポーネントを紹介します。

作成するウェブアプリは、クライアントのマイクから音声を取得し、Java サーブレットにストリーミングします。Java サーブレットはデータを Cloud Speech API に渡し、Cloud Speech API は検出した音声文字変換をサーブレットにストリーミングします。サーブレットは音声文字変換結果をクライアントに渡し、クライアントがページに表示します。

これを行うには、次のいくつかのコンポーネントを作成する必要があります。

• ウェブページの静的 HTML、JavaScript、CSS を提供する Java サーブレット。
• ウェブページをユーザーのマイクに接続し、未加工のバイトを抽出して、Websocket 経由でサーブレットにストリーミングする JavaScript、HTML、CSS。
• クライアントから受信した音声バイトを Cloud Speech API にストリーミングし、Cloud Speech API からの音声文字変換結果をクライアントにストリーミングするサーブレット Websocket ハンドラ。

演習内容

• 仮想マシン（VM）を作成する
• HTTP Java サーブレットを起動する
• ウェブページで音声をキャプチャする
• 音声をテキストに変換する

前提条件

このラボは、次の内容を理解していることを前提としています。

• Java プログラミング言語。
• Java サーブレット（具体的には Jetty サーブレット コンテナ）。他のサーブレット コンテナも使用できますが、サンプル ソリューションでは Jetty を使用しているため、他のコンテナを使用するソリューションの場合、検証が難しくなります。
• JavaScript プログラミング言語。ウェブページのコードはほぼすべて JavaScript で記述されており、ウェブページに関するラボで JavaScript を使用しないのは難しいでしょう。
• Linux コマンドライン。このラボの多くは Linux コマンド プロンプトで行われるため、その環境でよく使用されるツールとテキスト エディタに慣れていると、作業が楽になります。
• Maven プロジェクト管理ツール。原則として、任意の Java プロジェクト管理ツールを使用できますが、サンプル ソリューションでは Maven を使用しているため、他のツールを使用するソリューションの場合、検証が難しくなります。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。 左側の [ラボの詳細] ペインには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] ペインでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] ペインでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスにアクセスするには、ナビゲーション メニューをクリックするか、[検索] フィールドにサービス名またはプロダクト名を入力します。

タスク 1. 仮想マシンを作成する

Compute Engine は、Google のインフラストラクチャで VM を起動できるサービスです。このラボでは、VM を作成して使用し、ウェブサイトをホストする、Java 8 で記述されたサーブレットを実行します。また、Cloud Speech API を使用して、クライアントに動的な音声文字変換を提供します。このラボでは、VM を使用してコードも実行します。

1. 新しい VM を作成するには、ナビゲーション メニュー（）> [Compute Engine] > [VM インスタンス] をクリックします。

2. 新しいインスタンスを作成するには、[インスタンスを作成] をクリックします。

3. [マシンの構成] を参照します。

   • 新しいインスタンスに speaking-with-a-webpage という名前を付けます。

   • ゾーンとして を選択します。

   • その他の値はデフォルトのままにします。

4. [OS とストレージ] をクリックします。

   • [変更] をクリックしてブートディスクの構成を開始し、次の値を選択します。

     • [オペレーティング システム] で [Debian] を選択します。

     • [バージョン] で、[Debian GNU/Linux 12（bookworm）] を選択します。

     • [ブートディスクの種類] はデフォルトのままにします。

     • ウィンドウの下部にある [選択] をクリックします。

5. [ネットワーキング] をクリックします。

   • [ファイアウォール] で、[HTTP トラフィックを許可する] と [HTTPS トラフィックを許可する] がオンになっていることを確認します。

6. [セキュリティ] をクリックします。

   • [ID と API へのアクセス] の [サービス アカウント] はデフォルトのままにします。

   • [アクセス スコープ] では、[すべての Cloud API に完全アクセス権を許可] を選択します。

7. [作成] をクリックします。

数分後、VM が起動して実行されます。[VM インスタンス] リストで、VM とその詳細を表示します。次のステップで使用する [SSH] ボタンと、このラボで後ほど使用する [外部 IP] を確認します。

8. 右側の [SSH] ボタンをクリックして接続します。プロンプトが表示されたら、[承認] をクリックします。

新しいウィンドウが開き、VM に接続してコマンド プロンプトが表示されます。このラボの残りの部分では、このインターフェースを使用します。

完了したタスクをテストする

[進行状況を確認] をクリックして、実行したタスクを確認します。

仮想マシンを作成する

関連ドキュメント

Compute Engine とそのさまざまな機能については、Compute Engine のドキュメントをご覧ください。

タスク 2. 動作するサンプルをダウンロードして設定する

1. SSH セッションで、Git、Java 17、Maven プロジェクト管理ツールをインストールして、サンプルコードをコンパイルして実行します。

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk 注: このコマンドの完了には数分かかることがあります。

2. 動作する例を VM にクローンします。

git clone https://github.com/googlecodelabs/speaking-with-a-webpage.git

これにより、次の各セクションのサブディレクトリを含む speaking-with-a-webpage ディレクトリが作成されます。各サブディレクトリは前のサブディレクトリをベースに、新しい機能を段階的に追加しています。

• 01-hello-https - 静的ファイルと HTTPS 経由で提供されるハンドラを含む最小限の Jetty サーブレットが含まれています。
• 02-webaudio - クライアントサイドの JavaScript を入力して、クライアントのマイクから音声を録音し、動作を確認するためのビジュアリゼーションを表示します。
• 03-websockets - クライアントとサーバーの両方を変更して、WebSocket を介して相互に通信します。
• 04-speech - サーバーを変更して、音声を Cloud Speech API に送信し、後続の音声文字変換を JavaScript クライアントに送信します。

このラボで使用する例では、通常の HTTPS ポートは使用されていません。開発目的で、非特権ポート 8443 が使用されています。

3. ウェブブラウザからこのポートにアクセスするには、次の gcloud コマンドを使用して VM のファイアウォールを開きます。

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 注: 各ステップでの変更内容を比較できます。

あるセクションと次のセクションの間で変更された内容を比較する場合は、次のコマンドを使用します。

cd ~/speaking-with-a-webpage

git diff --no-index 01-hello-https/ 02-webaudio/

これにより、02-https ディレクトリと 03-webaudio ディレクトリ / ステップでの違いが表示されます。

矢印キー、PgUp / PgDn を使用して移動し、q を使用して終了します。

完了したタスクをテストする

[進行状況を確認] をクリックして、実行したタスクを確認します。

必要なソフトウェアをインストールしてファイアウォール ルールを作成する

タスク 3. HTTPS Java サーブレットを起動する

Java サーブレットは、このウェブアプリをサポートするバックボーンです。必要なクライアントサイドの HTML、CSS、JavaScript コードを提供し、Cloud Speech API に接続して音声文字変換を提供します。

ウェブページからユーザーのマイクにアクセスする場合、ブラウザは盗聴を防ぐために、ウェブページが安全なチャネルを介して通信することを要求します。そのため、HTTPS 経由でウェブページを配信するようにサーブレットを設定します。安全なウェブページの構成と配信はそれ自体がトピックであるため、このラボでは、用意されているサンプル ソリューションの自己署名証明書と Jetty 構成ファイルを使用します。開発環境ではこれで十分です。

このセクションでは、01-hello-https で用意されている Maven プロジェクトを読み、実行します。src/ ディレクトリ内のファイルは、以降のステップでビルドされる主要なファイルであるため、特に注意してください。

• src/main/webapp のファイルには、Jetty によって静的に提供される JavaScript、CSS、HTML ファイルが含まれています。
• TranscribeServlet.java では、パス /transcribe へのリクエストを処理するサーブレットを定義します。

サンプル ソリューションの実行

提供された speaking-with-a-webpage リポジトリの 01-hello-https サブディレクトリには、HTTPS 用に構成された Maven サーブレット プロジェクトが含まれています。このサーブレットは、Jetty サーブレット フレームワークを使用して、静的ファイルと動的エンドポイントの両方を提供します。また、上記のブログ投稿を使用して、Key Tool コマンドで自己署名証明書を生成し、HTTPS をサポートする Jetty 構成を追加します。

1. サーブレットを起動します。01-hello-https に移動します。

cd ~/speaking-with-a-webpage/01-hello-https

2. コードを実行します。

mvn clean jetty:run

3. 次に、ウェブブラウザで https://<your-external-ip>:8443 を指定します。

注: 外部 IP アドレスは、Cloud コンソールの [VM インスタンス] ページで確認できます。

サンプル サーブレットは標準以外のポートでリッスンしているため、[外部 IP] リンクを直接クリックしても、実行中のサーブレットに移動しません。サーブレットにアクセスするには、上記のように関連するポートを追加する必要があります。

HTTPS URL を使用してウェブアプリに初めてアクセスすると、接続がプライベートではないという警告がブラウザに表示されることがあります。これは、サンプルアプリで開発用に自己署名 SSL 証明書を使用しているためです。本番環境では、認証局が署名した SSL 証明書が必要になりますが、このラボでは自己署名 SSL 証明書で十分です。ただし、ウェブページで秘密を話さないようにしてください。😁

完了したタスクをテストする

[進行状況を確認] をクリックして、実行したタスクを確認します。

サンプル ソリューション（hello-https）を実行する

タスク 4. ウェブページで音声をキャプチャする

Web Audio API を使用すると、ユーザーの同意を得たうえで、ウェブページでユーザーのマイクから音声データをキャプチャできます。Cloud Speech API では、この元データを特定の形式で必要とし、サンプリング レートを把握する必要があります。

サンプル ソリューション

提供された speaking-with-a-webpage リポジトリの 02-webaudio サブディレクトリは、Web Audio の getUserMedia 関数を追加して、ユーザーのマイクを音声の可視化に接続することで、01-hello-https サンプルコードを基に構築されています。次に、サーバーに送信する準備として、オーディオ パイプラインに ScriptProcessorNode を追加して、未加工の音声バイトを取得します。Cloud Speech API でも最終的に sampleRate が必要になるため、これも取得します。次のように 02-webaudio アプリを起動します。

1. Ctrl + C キーを押してサーバーを停止します。

2. 02-webaudio を含むディレクトリに移動します。

cd ~/speaking-with-a-webpage/02-webaudio

3. アプリケーションを実行します。

mvn clean jetty:run

4. 実行中のウェブアプリにアクセスするには、Cloud コンソールの [VM インスタンス] ページで [外部 IP] アドレスを探し、ブラウザで https://<your-external-ip>:8443 にアクセスします。

注: 次のコマンドを実行すると、前のセクション（01-hello-https）と現在のセクション（02-webaudio）の間の変更点を確認できます。

cd ~/speaking-with-a-webpage git diff --no-index 01-hello-https/ 02-webaudio/

完了したタスクをテストする

[進行状況を確認] をクリックして、実行したタスクを確認します。

サンプル ソリューションを実行してウェブページの音声をキャプチャする

5. Ctrl + C キーを押してサーバーを停止します。

タスク 5. クライアントからサーバーに音声をストリーミングする

通常の HTTP 接続は、音声のリアルタイム ストリーミングをサーバーに送信し、音声文字変換が利用可能になったら受信するのに適していません。このセクションでは、クライアントからサーバーへのウェブ ソケット接続を作成し、それを使用して音声メタデータ（サンプルレートなど）とデータをサーバーに送信すると同時に、レスポンス（データの文字起こしなど）をリッスンします。

音声バイトのストリーミング

提供されている例では、WebSocketAdapter を登録するために、TranscribeServlet を WebSocketServlet から拡張するように変更しています。定義する WebSocketAdapter は、受信したメッセージを取得してクライアントに送り返すだけです。

クライアントでは、サンプルは前の手順の scriptNode を、後で定義するソケットにデータを送信するノードに置き換えます。次に、サーバーへの安全な WebSocket 接続を作成します。サーバーとマイクの両方が接続されると、サーバーからのメッセージのリッスンを開始し、サーバーにサンプルレートを送信します。サーバーがサンプルレートをエコーバックすると、クライアントはリスナーをより永続的な音声文字変換ハンドラに置き換え、scriptNode を接続してサーバーへの音声バイトのストリーミングを開始します。

1. 03-websockets を含むディレクトリに移動します。

cd ~/speaking-with-a-webpage/03-websockets

2. アプリケーションを実行します。

mvn clean jetty:run

3. 実行中のウェブアプリにアクセスするには、Cloud コンソールの [VM インスタンス] ページで [外部 IP] アドレスを探し、ブラウザで https://<your-external-ip>:8443 にアクセスします。

4. Ctrl + C キーを押してサーバーを停止します。

タスク 6. 音声をテキストに変換する

Google Cloud Speech ストリーミング API を使用すると、音声バイトを API にリアルタイムで送信し、検出された音声文字変換を非同期で受け取ることができます。API は、リクエストの先頭で送信される構成によって決定される特定の形式でバイトが送信されることを想定しています。このウェブアプリでは、API の未加工の音声サンプルを LINEAR16 形式で送信します。つまり、各サンプルは 16 ビットの符号付き整数で、クライアントが取得したサンプルレートで送信されます。

サンプル ソリューション

提供された speaking-with-a-webpage リポジトリの 04-speech サブディレクトリは、03-websockets ステップのサーバーコードを完成させます。上記の StreamingRecognizeClient サンプルコードのコードを組み込んで、Cloud Speech API との接続、音声バイトの受け渡し、Cloud Speech API からの文字起こしの受信を行います。文字起こしを非同期で受信すると、JavaScript クライアントへの接続を使用して、それらを渡します。JavaScript クライアントは、それをウェブページに出力するだけです。

1. アプリケーションを起動します:

cd ~/speaking-with-a-webpage/04-speech mvn clean jetty:run

2. 実行中のウェブアプリにアクセスするには、Cloud コンソールの [VM インスタンス] ページで [外部 IP] アドレスを探し、ブラウザで https://<your-external-ip>:8443 にアクセスします。

タスク 7. 理解度チェック

今回のラボで学習した内容の理解を深めていただくため、以下の多肢選択式問題を用意しました。正解を目指して頑張ってください。

お疲れさまでした

gcloud を使用して VM を作成し、Java サーブレットを起動して音声をキャプチャし、ウェブページでテキストに文字起こしする方法を学習しました。

次のステップと詳細情報

追加できるソフトウェアの改善点を検討します。

• クライアント アプリは現在テキストを出力するだけですが、さまざまな方法で使用できます。単なる別のユーザー インターフェースとして考えてください。キーワードで特定のアクションを呼び出したり、テキストを会話エンジンと統合したり、字幕作成用にそのまま使用したりできます。
• 音声文字変換を Cloud Natural Language API と統合します。これにより、非構造化テキストから構造を抽出できます。
• Cloud Speech API は 80 以上の言語をサポートしており、簡単な構成パラメータで選択できます。話せる他の言語や学習中の言語で試してみましょう。
• 現在のプロジェクト設定は主に開発目的で使用されるため、本番環境にデプロイする際は変更する必要があります。たとえば、インスタンス グループで複数の Compute Engine インスタンスを使用し、SSL ロードバランサを使用してクライアントとサーバー間の安全な通信を提供できます。

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2025 年 9 月 15 日

ラボの最終テスト日: 2025 年 9 月 15 日

Copyright 2025 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。