githubとvonageで電話音声案内を作ろう！

こんにちは、キン担ラボの本橋です。

この記事はvonageアドベントカレンダーの12/1に向けて書きました。

せっかく初日を取らせていただいたのでvonageについて説明します。

vonageはクラウドベースのコミュニケーション機能をAPIとして提供するCPaaS（Communications Platform as a Service）です。Webサイトやモバイルアプリケーションに、音声通話、SMS、ビデオ通話、チャット、AI、認証などの機能を容易に統合できます。

今回はそんなvonageで電話の自動音声応答を手軽に作って試す手順を組み立ててみました。

ざっとまとめると以下の３つの手順でIVRが構築できます。

1. NCCOという書式のJSONを作って、
2. github gistに配置して、
3. vonageから読み込ませる

今回は手順を軽量化するためにgithub gistを使いました。

手順1をkintoneなどで自動化して、手順2をAWSなどで自前でホスティングすれば概ね音声案内システムを構築できてしまうというお手軽さです。

kintoneを使ってNCCOを書く、という記事は以前noteに書きました。こちらもよろしければご一読ください。

ところでvonageで日本国内の電話番号を発行するのはちょっとばかり手間がかかります。ここでは発行できている前提で進めます。ご了承ください。

NCCOを作る

サンプルを置いておきます。お試しということで、このまま使っていただけます。

[
  {
    "action": "talk",
    "text": "こんにちは、NCCOのサンプルです",
    "language": "ja-JP",
    "style": "2"
  } ,
  {
    "action": "talk",
    "text": "こんなふうにおしゃべりできます",
    "language": "ja-JP",
    "style": "3"
  } ,
  {
    "action": "talk",
    "text": "いろいろな音声を喋らせて遊んでください。",
    "language": "ja-JP",
    "style": "4"
  } 
]

NCCOの書き方については、まずざっと概要を掴みたい方はこちらの記事が分かりやすいかと思います。

より詳細を知りたくなったら公式リファレンスをどうぞ。

ここまでで『NCCOを記述したJSONファイルが用意できました！』という体で進みます。

vonageから読めるヘッダでGithub gistにホスティングする

さきほどのjsonファイルをサンプルとしてgistにアップロードしました。

NCCOサンプル

このままgistのURLを使うとレスポンスの Content-Type が text/plain で返ってきてしまいます。vonageでは application/json が必要で、このままだとエラーが発生して呼び出しが話し中になります。

ヘッダ問題を解決するためにCDNを使いましょう。

今回は raw.githack.com を使いました。

Paste GitHub, Bitbucket, GitLab or sourcehut URL here とプレースホルダーされているテキストエリアにgithub gistのRAWのURLをそのままペーストしてください。

するとこんなURLが得られます。

https://gistcdn.githack.com/motohasystem/20cf817a5389a7e13fb0a22944930c35/raw/9cfd93907a98cb0b89a52d5a3a567dcbc3673862/01_ncco_sample.json

試しにcurlでヘッダを確認してみます。

curl -i https://gistcdn.githack.com/motohasystem/20cf817a5389a7e13fb0a22944930c35/raw/9cfd93907a98cb0b89a52d5a3a567dcbc3673862/01_ncco_sample.json

HTTP/1.1 200 OK
Date: Fri, 29 Nov 2024 07:03:37 GMT
Content-Type: application/json; charset=utf-8
（後略）

Content-Typeヘッダが application/json となっていれば成功です。

vonageにアプリケーションを作成してNCCOを登録する

ではvonageのコンソールから設定していきましょう。

アプリケーションの作成

サイドメニューの「アプリケーション」から、

「＋新しいアプリケーションを作成する」

わかりやすく実験用ですよという名前をつけて

機能の「音声」ラジオボタンを有効化して、回答URLはGETメソッドのまま先程のCDNのURLを入力します。

画面下の「新しいアプリケーションの生成」をクリックして準備完了です。

ここまででvonage上の「アプリケーション」が作成されました。最後はアプリケーションに電話番号を割りあててあげます。

電話番号を割り当てる

さきほど作成したアプリケーションを開いて、画面下の方に並んでいる電話番号を割り当てましょう。

これで準備完了です！　さぁ割り当てた電話番号に電話をかけてみてください。書いたNCCO通りに合成音声で応答してくれましたか？

無事に応答が聞こえてきた方はおめでとうございます！　これで完了です。もしツーッツーッと話し中になってしまっていたとしたら、どこか設定手順に間違いがあったのかもしれません。

例えばgistのURLは編集すると変わってしまいます。登録したURLをブラウザで開いてみて確認するなど、思いつくところをよーく確認してみてください。

ここまで成功できたら、次はNCCOの機能一覧を眺めながら作りたい自動応答システムを妄想してみてください。間違いなく楽しいですよ。

最後まで読んでいただき、ありがとうございました！