Voice JavaScript SDK: はじめに
Voice JavaScript SDKの2.Xバージョンのドキュメントを表示しています。1.Xから2.Xに移行する方法については、移行ガイドまたは、1.X固有のドキュメントをご覧ください。
フロントエンドのWebアプリケーションに、音声コミュニケーションを追加しましょう。クイックスタートのいずれかを終える頃には、Webブラウザーから通話を発着信できる、フル機能のアプリケーションが完成します。
構築を開始する前に、JavaScript SDKがどのように機能するかを理解しておく必要があります。
JavaScript SDKでは、ブラウザーから電話をかけることができますが、アプリケーションにアクセストークンを提供し、TwilioにTwiMLインストラクションを提供するには、何らかのバックエンドWebサーバーが必要です。以下に表示されているクイックスタートリポジトリには、さまざまなフレームワーク/言語のWebサーバーが含まれています。
以下からお好きなバックエンドフレームワークを選択してください。
クイックスタートは、Twilioを利用したアプリケーションを作成するための出発点になります。クイックスタートアプリケーションは、本番環境に対応したアプリケーションを提供するものではなく、すべてのビジネスユースケースを網羅するものでもありません。
Voice JavaScript SDKの詳細については、次のドキュメントをご覧ください。
サーバーレスクイックスタート
Twilio Runtimeのサーバーレス環境を使用し、Voice JavaScript SDKの動作を確認したい場合は、以下の手順に従います。
1. Twilio CLIツールをインストールする
Twilioコマンドラインインターフェイス(CLI)を使用することにより、お使いのターミナルからTwilio APIとのインタラクションが可能になります。CLIはTwilioツールの管理・設定に利用できます。今回もCLIを使い管理・設定を行います。
macOSにtwilio-cliをインストールするための推奨される方法は、Homebrewを使用することです。インストールがお済みでない場合は、Homebrewサイトに進み、インストールを実行後、本ページにお戻りください。
Homebrewをインストールした後、次のコマンドを実行しtwilio-cliをインストールします。
brew tap twilio/brew && brew install twiliotwilio-cliをインストールするための推奨される方法は、Windows向けコマンドラインインストーラーであるScoopを使用することです。インストールがお済みでない場合は、Scoopサイトに進み、インストール手順を実行後、本ページにお戻りください。
注記: Scoop経由でインストールする際、一般的なアクセス許可の問題を回避するには、PowerShellを管理者として実行する必要があります。
- 次の
twilio-cliのバケットを追加します。
scoop bucket add twilio-scoop https://github.com/twilio/scoop-twilio-cli - 次のアプリをインストールします。
scoop install twilio
twilio-cliは、Advanced Package Tool(apt)を使用し、Debian、Ubuntu、Linux Mintなどのほとんどのディストリビューションにインストールできます。
これを行うには、ターミナルで次のコマンドを実行します。
wget -qO- https://twilio-cli-prod.s3.amazonaws.com/twilio_pub.asc \
| sudo apt-key add -
sudo touch /etc/apt/sources.list.d/twilio.list
echo 'deb https://twilio-cli-prod.s3.amazonaws.com/apt/ /' \
| sudo tee /etc/apt/sources.list.d/twilio.list
sudo apt update
sudo apt install -y twilio
その他のインストール方法については、twilio-cliクイックスタートをご覧ください。
2. Twilio CLIサーバーレスプラグインをインストールする
Twilio CLIはプラグインをサポートしているため、制御と機能を追加できます。
サーバーレスプラグインをインストールし、ローカルマシンからTwilioのサーバーレス環境であるTwilio Runtimeに機能をシームレスにデプロイします。
ターミナルで次のコマンドを実行します。
twilio plugins:install @twilio-labs/plugin-serverless3. 関数テンプレートを使用し、アプリケーションを作成する
サーバーレスプラグインにより、テンプレートからアプリケーションを初期化できます。使用するテンプレートには、以下の必要なものがすべて含まれています。
- フロントエンドアプリケーション
- アクセストークンを生成するTwilio関数
- 着信通話を処理しブラウザーに転送するTwilio関数
- アカウントを関連付ける管理セクション
設定を終え、起動した後、さらに詳細に見ていきます。
ターミナルで次のコマンドを実行し、アプリを作成します。
twilio serverless:init quickstart-voice-javascript-sdk --template="voice-javascript-sdk"quickstart-voice-javascript-sdkという新しいディレクトリが作成され、ここで作成するすべてのコードはこのフォルダに保存されます。
次のコマンドを使用し、ディレクトリをその新しいディレクトリに変更します。
cd quickstart-voice-javascript-sdk4. アプリケーションをデプロイする
サーバーレスプラグインにより、ローカルマシンからTwilio Runtimeにコードをデプロイできるようになります。アプリケーションをデプロイすると、ホストされたアプリケーションにアクセスできます。
アプリケーションをデプロイするには、ターミナルで次のコマンドを実行します。
twilio serverless:deployこのコマンドは、Twilio Runtime内のFunctions、Assets、環境のコンテナであるサービスを作成しましす。
このコマンドは、開発環境にデプロイされているTwilio FunctionsとAssetsの一覧を出力します。
アプリケーションに変更をデプロイする際は、twilio serverless:deployを実行します。
5. 環境を初期化する
アプリケーションをデプロイすると、URLのリストが表示されます。プレフィックスをメモしておいてください。これはデプロイメントごとにカスタマイズされています。
- ブラウザーでadminページを開きます。/admin/index.htmlで終わるURLです。
- パスワードは
defaultです(これは変更可能で、後で変更できます)。 - adminページのボタンをクリックし、環境を初期化します。
初期化プロセスにより、ブラウザーベースの通話を機能させるために必要なツールを作成・接続します。
このページに、環境が正しく動作していることを検証するチェックリストが表示されます。また、自動的に初期化されたアイテムにアクセスできる、便利なリンクも表示されます。
検証の失敗に気付くと思いますが、まだデフォルトのパスワードを変更していないためです。パスワードは後ほど変更します。その前に、新しいアプリケーションを確認します。
6. アプリケーションを確認する
サンプルのアプリケーションは、/index.htmlで起動、実行されています。アプリケーションをブラウザーで開きます。
Access Tokenがリクエストされていることが分かります。リクエストが届くと通知が表示されます。「Twilio.Device is ready!」(Twilio.Deviceの準備完了!)と表示されます。
インターフェイスを使用し、ご自分に電話をかけてください。マイクとスピーカーの使用を許可するよう求められます。
サンプルアプリケーションでは、the_user_idというユーザー名を使用しています。Access Tokenの生成に使用しているTwilio Functionでは、認証チェックを一切実行していません。ご自身でユーザー管理システムを導入してください。
7. アプリケーションを変更する
管理者パスワードを変更する必要があります。ローカルマシンにて、.envという名前のファイルを編集します。
ADMIN_PASSWORDのエントリがあり、それをdefault以外に変更します。
ADMIN_PASSWORD=SOME-NEW-PASSWORD-HERE
変更を保存します。
ターミナルで、次のコマンドを使用し変更をデプロイします。
twilio serverless:deploy
デプロイ後に、再度/admin/index.htmlページを開き、新しいパスワードを使用します。すると、すべてのチェックがグリーンになります。成功です。
サンプルアプリケーションに変更を加えるたびに、必ず保存し再度デプロイしてください。
8. 詳細はこちら
機能を確認した後は、機能の仕組みについて説明します。
まず、ローカルフォルダに移動し、クライアント側の2つのファイル、assets/index.htmlとassets/quickstart.jsを確認します。index.htmlファイルには、次のscriptタグが含まれていることに注意してください。
<script src="https://cdn.jsdelivr.net/npm/@twilio/voice-sdk@2.0.1/dist/twilio.min.js"></script>Voice JavaScript SDKライブラリーです。
quickstart.jsファイルでは、Deviceがトークンで初期化されていることが分かります。これはサーバーレスFunctionを指しています。/functions/voice-token.jsで見つけることができます。このファイルは、REST API Keyと初期化中に生成されたSecretに基づき、Access Tokenを作り出します。また、VoiceGrantも含まれています。これにより、発着信が特定のTwiMLアプリケーションを介し行われます。これはTwilio Voice JavaScript SDKであり、ドキュメントで詳述されているassets/quickstart.jsで使用されています。
adminページ(/admin/index.html)に戻ると、作成されたTwiMLアプリケーションへのリンクが表示されています。TwiMLアプリケーションにより、通話を発信した時や着信した時に、どうするかを指定できます。TwiML(Twilio Markup Language)は、その時点での通話に対する処理をTwilioに指示します。
このTwiMLは、functions/client-voice-twiml-app.jsにあるFunctionを介し提供されます。TwiMLアプリケーションの設定では、音声通話の着信・発信にこの関数を実行するようにしました。この関数により、同じアプリケーション内のクライアントまたは電話番号に、電話をかけることができます。発信する際は、CALLER_IDを使用します。
サポートが必要ですか？
コーディングに関するご質問、ご不明点等ございましたら、お問い合わせからご連絡いただくか、TwilioのStack Overflow Collectiveにアクセスいただくか、Stack OverflowサイトでTwilioタグを検索してください。