はじめに
みなさん、こんにちは。KDDI ウェブコミュニケーションズで CPaaS のエバンジェリストをしている高橋です。
この記事では、V Callプラグインの着信カスタマイズ手順について解説をします。
本記事の対象となる読者
- V Callプラグイン（スタンダードプラン）をご利用の方
- V Callプラグインの着信をカスタマイズしたい方
- Vonage を初めて触る方
- Vonage AI Studio を使った着信フローを作成してみたい方
- kintone をある程度使いこなしている方
Vonage とは
Vonage は、米国ニュージャージー州に本社を置く、CPaaS（Communication Platform as a Service）企業です。
もともとは VoIP（Voice over IP）企業としてスタートしましたが、いくつかの企業買収を行うことで、コミュニケーションサービス全般をサポートすることができる企業に発展しました。現在はスウェーデンの大手通信機器会社エリクソンの傘下に入っています。
2024年2月14日より、株式会社KDDIウェブコミュニケーションズ（以後、KWC）が Vonage の再販事業を開始することとなりました。
V Callプラグインは、KWC経由でアカウントを開設した場合のみ利用することができます。
V Callプラグイン for kintone とは
KWCが提供する kintone 向けのプラグインで、kintone から直接通話をしたり、SMSを送信することができます。
詳しくは以下のサイトをご覧ください。
V Callプラグインでは、着信に関する処理をカスタマイズすることができます（スタンダードプランのみ）。
着信のオペレーションは利用企業によって異なるため、ニーズに合わせたカスタマイズを行うことによって、着信方法を変えることができます。
本記事では、Vonage AI Studio を使った基本的な着信処理のカスタマイズ方法について説明をします。
この記事では、上の図の緑色の部分を作成していきます。
Vonage AI Studio とは
Vonage AI Studio （以下、AI Studio）は、ノーコード・ローコードでコールフローを作成できるツールで、ブラウザ上で動作します。
上の図のように、ノードと呼ばれる部品をドラッグ・アンド・ドロップして接続するだけで、簡単にコールフローが作成できます。
用語定義
| 用語 | 説明 |
|---|---|
| エージェント | AI Studioでフローを作成する最も大きな単位です。エージェント単位で言語や話者、リージョンやタイムゾーンの設定を行います。スタンダードプランでは、最大10個のエージェントが作成できます。 |
| イベント | フローが起動するトリガーです。イベントには、Inbound call / Outbound call / End call / API Eventの4つがあります。 |
| ノード | フローを構成する各部品のことです。ノードは、Conversation / Advanced / Actions / Integrations / Flow Control の5つのカテゴリーに分類されます。 |
| プロパティ | いくつかのノードにはプロパティと呼ばれる要素が含まれます。たとえば、自然言語解析におけるエンティティやインテントや、フロー内で共有する変数などがプロパティになります。 |
シナリオ
本記事では、以下のシナリオでコールフローを作成していきます。
- 電話がかかってきたら、kintone の着信ログアプリに新しいレコードを追加します。
- あらかじめ設定しておいた電話番号に電話を転送します。
準備
このシナリオをAI Studioで作成するためには、あらかじめ以下の準備が必要になります。
- kintone アカウント（こちらから開発者ライセンスが取得可能です）
- V Callプラグインのサインアップ（こちらからサインアップを行います）
- V Callプラグインのアップグレード（アップグレードしていない場合は着信の設定ができません）
- V Callプラグインのアップグレードで利用したVonage アカウント
- V Callプラグインに割当をしていない電話番号（US番号でも構いません）
- ブラウザ（Chrome推奨）
- 通話が可能な携帯電話 or スマートフォン（転送をするので電話機は2台必要です）
kintone アプリの準備
この記事内で使うアプリテンプレートを準備してありますので、事前にダウンロードをしてください。
スペースを作成（任意）
今回の記事用にスペースを作成してください。スペース名は何でもよいです。
アプリを作成
今回のハンズオンで利用するアプリを、さきほどダウンロードしたテンプレートから作成します。
Vonage の設定
ではここから、Vonage 側の設定を行っていきます。
AI Studioの起動
- Vonage APIコンソールにログインします。
- 左側からAI Studioを選択し、さらに右側に表示されるAI Studioにアクセスするボタンを押します。
新しいエージェントの作成
- Create Agentボタンを押します。
- Agent Typeの中からTelephonyを選択し、Nextボタンを押します。
エージェントの基本情報を登録していきます。
- Regionは、「United States」を選択します。現在選択できるのは、「United States」か「Europe」の2つのみとなります。
- Agent Nameには、任意の名前を指定します。今回は「V Call Incoming Agent」としました。
- Languageは、「Japanese」を選択します。2025年3月現在、日本語はアルファリリースとなります。
- Voicesでは、話者を選択します。日本語は13種類から選択できます。Premiumと書かれた話者は別料金（0.40円/100文字）が必要です。それ以外は AI Studio の料金プランに含まれます。
- Time Zoneは、「Asia/Tokyo」を選択します。
- 上記設定が完了したら、Nextボタンを押します。
- Start from Scratchを選択し、Nextボタンを押します。
イベントの種類を選択します。
イベントとは、どのような状況でフローを実行するかの指定で、以下の4種類があります。
| イベント種別 | 説明 |
|---|---|
| Inbound Call | ユーザーからの着信時に実行されます。 |
| Outbound Call | ユーザーへの発信で、ユーザーが応答した時に実行されます。 |
| End Call | 通話が終了したときに実行されます。 |
| API Event | 外部からのAPI経由で実行されます。 |
- 今回は着信時のフローを作成するので、Inbound Callを選択します。
- Createボタンを押します。
上記のようなフロー作成画面が表示されればエージェントの作成は完了です。
フローの作成
ではいよいよシナリオに従ってフローを作成していきましょう。
ユーザーパラメーターの追加
フローを作成する前に、一連のフローの中で扱う変数を格納するパラメーターを作成しておきます。
- 左側のPropertiesアイコンをクリックします。
- さらにParametersを選択します。
- 右側にウィンドウが開くので、Add user parameterをクリックします。
以下の変数を追加してください。スペルミスを防止するため、変数名はカット・アンド・ペーストで作成するとよいでしょう。
| Name |
|---|
| CUSTOMER_NUMBER |
- Go Backボタンを押して、さらにCloseボタンでウィンドウを閉じます。
電話番号を変換
Vonage はグローバルなサービスなので、電話番号はすべて先頭に国番号が付加された MSISDN 形式になっています。
そのため、日本の電話番号形式（0ABJ形式）に変換しておく必要があります。
電話番号の変換を行うために、Custom Codeノードを利用します。
- 左側のNODESアイコンを選択します。
- さらにNODESメニューからCustom Codeノードをドラッグ・アンド・ドロップします。
- ドロップしたノードのClick here to edit部分をクリックすると、プロパティウィンドウが開きます。
- プロパティウィンドウの上部で、ノードの名前を指定します。今回は、「電話番号形式の変換」とします。
- 以下のコードをコード欄に貼り付けます。
var phoneVal = $CALLER_PHONE_NUMBER;
phoneVal = "0" + phoneVal.slice(2);
return phoneVal;
このコードは、発信者番号（$CALLER_PHONE_NUMBER）の先頭2文字（国番号の81）を0に変換します。
- Output Parameterのプルダウンリストから、さきほど作成したユーザーパラメータ「$USER.CUSTOMER_NUMBER」を選択します。
- Save & Exitボタンを押して、設定を保存します。
- STARTノードの右側にある◯印から今作成したノードの左側まで線を伸ばして接続します。
着信ログアプリに新しいレコードを追加
つぎに、着信があったら kintone に新しいレコードを追加します。
書き込みは、kintone の RestAPI を利用します。
API をコールするためには、事前に以下の kintone 情報を取得しておく必要があります。
- 着信ログアプリのアプリID（URL の xxxxx.cybozu.com/k/NN の NN の部分）
- 適切な権限を設定した API トークン
- 書き込みをするフィールドコード
- さきほど追加した 着信ログアプリを開き、設定ボタン（歯車アイコン）を押します。
- APIトークンをクリックします。
- 生成するボタンを押します。
- アクセス権で、「レコード閲覧」、「レコード追加」、「レコード編集」にチェックを入れます。
- 生成された API トークンをメモ帳などに保存します。
- 保存ボタンを押します。
- アプリを更新ボタンを押します。
- ダイアログが表示されますので、アプリを更新ボタンを押します。
利用するフィールドも確認しておきましょう。
今回書き込みをする際に必要となるフィールドは、以下のとおりです。
| フィールド名 | フィールドコード | 説明 |
|---|---|---|
| 着信番号 | TEL | 顧客の電話番号 |
ではこれらの情報を使って、着信ログアプリにレコードを追加しましょう。
- Webhookノードをドラッグ・アンド・ドロップします。
- さきほどのノードの上の項目と接続します。
- Click here to editをクリックします。
- ノードの名前は「着信ログを追加」にします。
- Methodは「POST」を選択します。
-
Request URL欄には、API のエンドポイント（
https://xxxxx.cybozu.com/k/v1/record.json）
xxxxxの部分はご自分の環境に合わせてください。 - Headersタブが選択されていることを確認します。
- HTTP Headerに「X-Cybozu-API-Token」、Valueにさきほど生成した API トークンを指定します。
- Bodyタブに移動します。
- ボディパラメーターに以下の JSON を貼り付けます。
{
"app": NN,
"record": {
"TEL": {
"value": "$USER.CUSTOMER_NUMBER"
}
}
}
- Save & Exitボタンを押します。
電話を転送
つぎに電話をあらかじめ指定した電話番号に転送します。
- Call Routingノードをドラッグ・アンド・ドロップします。
- 先程のノードと接続します。
- ノードのプロパティウィンドウを開きます。
- ノードの名前は「電話を転送」にします。
- Phone numberに転送したい電話番号を指定します（先頭の0は不要です）。
- Save & Exitボタンを押します。
テスト
以上でコールフローはすべて完成ですので、テストをしていきましょう。
電話番号をAI Studioに紐付ける
AI Studio用に購入した電話番号を現在作成中のエージェントに紐付けます。
- AI Studioのコンソールに入ります。
- 左上のハンバーガーメニューから、Phone Settingsを選択します。
- 電話番号をリストからAI Studio用の番号を選択します。
- Assign Numberボタンを押します。
- 電話番号が紐付けられたことを通知するダイアログが表示されます。
- Closeボタンを押してウィンドウを閉じます。
実際の電話機を使ったテスト
では最後に電話機を使ってテストをしてみましょう。
今回は、AI Studioから皆さんの電話に発信して、一連のフローをテストしていきます。
- 画面上部のTesterボタンを押します。
- Start phone callボタンを押します。
- 国の選択リストから「Japan（+81）」を選択します。
- 電話番号欄には、ご自分の電話番号の先頭の
0を外したものを設定します。 - Callボタンを押します。
自分の電話機に着信がかかりますので、応答すると指定した電話に転送がされることを確認してください。
また、kintone にレコードが追加されていることも合わせて確認しておきましょう。
デバッグ
もしうまく動作しない場合は、画面上部のReportsからログを確認することができます。
最新のデータが一番上にリストされます。電話番号のリンクを押すと、詳細なログが確認できます。
V Callプラグイン側での着信設定
エージェントのパブリッシュ
テストがうまくいったら、コールフローをパブリッシュしておきましょう。
- 右上のPublishボタンを押します。
- 表示されるダイアログのPublishボタンを押します。
パブリッシュが成功すると以下のようなメッセージが表示されます。
- Back to editorボタンを押して、ダイアログを閉じます。
エージェントのURLを検索
V Callプラグインと連携するために、このエージェントの起動URLを探します。
- Vonage のダッシュボードにログインします。
- 左側のメニューからアプリケーションを選択します。
- アプリケーションの一覧の中から「Studio-AI-VCall Incoming Agent」を選択します。
- Voiceのプルダウンボタンを押します。
- ANSWER URLに表示されるURLをメモ帳などにコピーします。
V Callプラグイン側にURLを設定
- V Callプラグインのサービスサイトにログインします。
- 情報更新メニューを選択します。
- VONAGE情報タブに移動します。
- 着信用Webhook URL欄に、先ほどコピーしておいたエージェントの起動URLを貼り付けます。
- 情報更新ボタンを押して、設定を保存します。
連結テスト
最後に、V Callプラグイン用に割り当ててある電話番号に電話をかけて、先程のエージェントフローが正しく動作することを確認します。
まとめ
今回は、Vonage の AI Studio を使って、V Callプラグインの簡単な着信処理を作成してみました。
AI Studio には、これ以外にもたくさんの機能があるので、より複雑な着信処理を作成することもできます。
また、今回作成したkintoneの着信ログアプリにも V Callプラグインをセットアップすることで、ログからかけ直しをすることもできます。
ぜひ色々と試してみてください。
最後にAI Studioの料金についても説明をしておきます。料金ページはこちらです。
スタンダードプランは無料で利用が可能ですが、月に10,000セッション（フローの実行）までという制限があります（10,000 セッション超えたらすぐにアドバンスになるわけではなく、メールの通知が来ます）。また、スタンダードプランでも一部の機能（premium音声とNLU）はオプション料金が必要になります。
Discussion