https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-voice-applications-faster/voice_cloud_runtime.png

音声アプリケーションをより速く構築する

最終更新日 August 23, 2023

所要時間:1 分

はじめに

Vonage Cloudランタイムは、開発プロセスをスピードアップするために設計された、当社のクラウドネイティブなサーバーレス開発プラットフォームです。そして コードハブは、一般的なコミュニケーション・ワークフローやブラウザベースのコーディング環境のための構築済みソリューションのホームです。これらの構築済みソリューションを活用すれば、開発時間を大幅に短縮できます。サンプルをダウンロードし、依存関係を設定し、APIキーを手動で設定する時代は終わりました。

Code Hubの直感的なインターフェイスでは、Vonageの次のようなユースケースを閲覧できます。 Voice APIおよび Video API, Numbers Insight API, メッセージAPIなど。

Voice APIについては、現在いくつかのユースケースを用意している:

  • クリックコール- Vonage Voice APIを使用して、ウェブサイトの訪問者がすぐに連絡できるようにするためのボタンを作成します。

  • 対話型音声応答 (IVR)- Vonage Voice APIを使って自動電話システムを構築し、ユーザがキーパッドで情報を入力し、音声応答を聞くことができます。

  • 音声通知- 電話でリストに連絡し、指定されたメッセージを伝える。

  • 音声WebSocketエコー- WebSocketとVonage Voice APIを使用してボイスエコーサーバーを構築します。

本日のブログでは、Voiceのユースケースを中心にご紹介します。その他のユースケースについては、今後の記事で紹介する予定です。

はじめに

次のサイトにアクセスしてください。 https://developer.vonage.com/cloud-runtimeにアクセスし、利用可能なソリューションのリストをスクロールして、ユーザー・インターフェースに慣れてください。お探しのものがあれば、検索バーをご利用ください。

Code Hubcloud-runtime-marketplace-lp.png

サインイン

Voiceのユースケースを使用する前に、以下を行う必要があります。 サインインにサインインする必要があります。お持ちでない場合は サインアップ.アカウントを取得し、サインインすると、以下のようにいくつかのオプションが追加されます。

Signing Into Code Hubsigning-in.png

ホームのオプションから左から右へと見ていこう。

  • ホーム- 常にメインメニューに戻る。

  • ワークスペース- 作成したコード・ワークスペースが表示されます。

  • インスタンス- 作成したデプロイ済みインスタンスが表示されます。

  • デプロイ済み製品- インストールされた製品インスタンスの管理、起動、ログの表示を可能にします。

  • 地域- 現在作業している地域を表示します。

  • サインインしたユーザーアカウント- 今後のデプロイで使用する、割り当てられたAPIキー。複数のAPIキーをお持ちの場合は、使用するAPIキーをドロップダウンから選択してください。

Voice Click to Call ユースケース・ウォークスルー

を取ろう クリックして呼び出すユースケースを最初の例として取り上げます。

Click to Call Overview Screenclick-to-call-overview.png

ユースケースのページにアクセスすると、3つのセクションが表示される:

概要- サンプルの簡単な説明 コードの取得- Visual Studio Codeのブラウザ版を使用して、コードを試したり、変更を加えたり、即座にデプロイすることができます。 コードのデプロイ- アプリケーションをデプロイし、動作を確認できます。

また、画面右上には、そのサンプルが最後に作成された日、または更新された日が表示されています。複数のバージョンがある場合は リリースをクリックしてください。

開始するには コードをデプロイする.このコードに インスタンス名を指定し リージョンをクリックします。 コードをデプロイする.

このサンプルには番号が必要であることを示すポップアップが表示されます。

Set up your project deploymentsetup-project-deployment.png

配備オプションでは、次のことができます。 番号を割り当てるまたは 新しい番号を購入する.

Add Phone Numberadd-phone-number.png

番号を選択すると、配備が始まる。

Deploying appdeployed-app.png

をクリックすると インスタンスをクリックすると、以下のように "Click To Call "プロジェクトを見つけることができる。

Instances Overviewinstances-overview.png

これをクリックすると、インスタンスの概要が表示され、プロジェクトに関する情報と、アプリケーションを実行できるいくつかのインスタンスURLが表示されます。

Instances Overview Expandedinstances-overview-expanded.png

インスタンス情報の下には、追跡とトラブルシューティングを支援するために、ログ、イベント、構成、および履歴も用意されていることがわかります。

Logging Sample Screenlogging-sample.png

をクリックします。 インスタンスURL 1をクリックする。 インスタンスの概要セクションから

というボタンが表示されます。サポートに電話する."クリックすると、Vonage Voice APIが着信コールを開始します。

Call Support Buttoncall-support-button.png

新しい環境のデプロイとコードの編集

サンプルのデプロイに成功したので、コードを変更して即座にデプロイし、変更をライブで確認してみましょう。コードを コードを取得をクリックして 新しい開発環境を作成する.

Create a Virtual Development Environmentcreate-dev-env.png

提供 地域, ワークスペース名および Vonage番号.番号の割り当て]をクリックします。 番号を割り当てるをクリックすると、あなたのVonageアカウントで利用可能な番号がリストアップされます。私のは以下のようになります:

Set up your workspacesetup-workspace.png

プレス 続けるを押すと、Visual Studio Codeのプロジェクトがブラウザに表示されます。

Project loaded in VS Code in the Browservscode-project-loaded.png

まず Readme.mdを確認することから始める。

ソースファイル(index.jsなど)の1つに移動すれば、ブラウザ内でコードを修正できる!

このファイルに変更を加えてください。例えば69行目では、サンプルの代わりに別の音声mp3ファイルを再生することができます。

まとめ

私たちは、お客様によるこのツールの新しいエキサイティングな使い方を楽しみにしています。詳しくは ドキュメンテーション.また、ご質問やフィードバックがありましたら Vonage開発者向けSlackに参加するか ツイッターをお送りください。また次回もお楽しみに!

シェア:

https://a.storyblok.com/f/270183/400x400/7cdff37c0e/michael-crump.png
Michael Crumpデベロッパー・エクスペリエンス・マネージャー

マイケル・クランプはVonageのデベロッパーエクスペリエンスチームに所属し、コーダー、YouTuber、そして様々な.NETやクラウド/通信開発トピックについて頻繁に講演を行っています。彼は、開発者がそれぞれの利点を分かりやすく理解できるようにすることに情熱を注いでいます。