とある技術の開発日記

Diary of irregular phrase programmer

トップ > .NET

TwilioとASP.NET MVCで簡単なアンケートプログラムの作り方

.NET ASP.NET C# twilio

f:id:airish9:20150701163541p:plain

しばらく間が空きましたがTwilioネタの3回目になります。当初の目的であったアンケートシステムを作るうえで必要な、キー入力をTwilioで処理する方法をご紹介します。

前回の記事はコチラになります。

blog.hamamotsu.jp

前回は電話をかけるとTwilioで自動音声を再生して電話を切るだけでしたが、今回は相手からの操作を受け取って処理してみましょう。

Gatherタグを使用してユーザーからの入力を処理する

Twilioからのリクエストには様々なパラメータがありますが、今回はFromとToパラメータを使用して電話をかけてきた発信先と発信元を判断できるようにしました。 相手からの入力を処理する場合はBeginGatherを使用して処理を行います。numDigitsパラメータで入力する桁数を指定して、finishOnKeyパラメータで入力の終わりを検出します。actionとmethodで入力した内容を処理するURIを指定する事で入力後の処理へ引き継ぎます。

public ActionResult Sample(string From, string To, string CallSid)
{
    var response = new TwilioResponse();
    if (!string.IsNullOrEmpty(From))
    {
        var msg = "From is ";
        msg = (From == "+819012345678") ? msg += "TwilioUser" : msg += From;

        response.Say(msg);
    }
    response.BeginGather(new { numDigits = 2, action = "http://mytwiliowebsite.azurewebsites.net/TwilioSample/Call", method = "POST", finishOnKey = "#" })
        .Say("Hello")
        .Play("http://mytwiliostorage.blob.core.windows.net/music/friend.mp3")
        .Pause(30)
        .EndGather();

    response.Say("Goodbye");
    return TwiML(response);
}

返却されるXML（TwlML）は次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<Response>
  <Gather numDigits="2" action="http://mytwiliowebsite.azurewebsites.net/TwilioSample/Call" method="POST" finishOnKey="#">
    <Say>Hello</Say>
    <Play>http://mytwiliostorage.blob.core.windows.net/music/friend.mp3</Play>
    <Pause length="30" />
  </Gather>
  <Say>Good bay</Say>
</Response>

ブラウザから実行するとFromパラメータが存在しないため電話番号を通知するSayタグは存在しません。 番号入力を受け取った後の処理の例は以下の様になります。

入力後の処理を作成する

Gatherタグから呼び出されるURLはDigitsパラメータを使用して作成するのがポイントです。

public ActionResult Call(string From, string To, string CallSid, string Digits)
{
    var response = new TwilioResponse();
    response.Say("Thank you call");

    switch (Digits)
    {
        case "1":
            response.Say("Digits is one.");
            break;

        case "2":
            response.Say("Digits is two.");
            response.Record(new { maxLength = 10, action = "http://mytwiliostorage.azurewebsites.net/TwilioSample/Recorded" });
            break;

        case "10":
            response.Say("Digits is ten.");
            break;
        default:
            break;
    }

    response.Say("Goodbye Twiliouser");
    return TwiML(response);
}

Digitsパラメータで入力されたキーを判定します。今回の例では'2'が入力された時は10秒間の音声を録音を行っていますが。入力されたキーごとに集計すればアンケートシステムとなります。

まとめ

  1. ユーザーからの入力待ちにはGatherタグを使用する
  2. Gatherタグで指定したURLにはDigitsパラメータが送信されるので、Digitsパラメータを元に処理を分岐する。

このようにアンケートアプリ程度なら簡単に作成する事ができます。

Twilioの通話APIをASP.NET MVCで試しに使ってみた

.NET C# twilio ASP.NET MVC

前回のtwilio記事に続き2回目です。前回の記事はこちら。 blog.hamamotsu.jp

前回は導入するだけだったので今回は実際にMVCで使用してみようと思います。

ASP.NET MVCのテンプレートを作成すると以下のようなフォルダ構成になっていると思います。
画像ではPublishScriptsフォルダがありますが、テンプレートを作り際にMicrosoft Azure Web Appsにホストしていない場合は存在しません。

f:id:airish9:20150702101747p:plain

1.コントローラークラスを作成する

まずは、通常のMVCと同じようにコントローラーを作成します。 TwilioではTwiMLと呼ばれるXMLを返す事でTwilio電話番号に電話を掛けた際の処理をXMLで記述する事になります。
TwiMLのSDKではActionResultを継承したTwiMLResult型を返却すればOKです。

また、TwilioControllerにはTwiMLというTwiMLResult型プロパティが用意されているので今回はTwilioControllerを作成したコントローラーを使用します。
簡単な処理を組み込んだControllerのサンプルはこのようになります。

public class TwilioSampleController : TwilioController
{
    public ActionResult Index()
    {
        var response = new TwilioResponse();
        response.Say("Hello");
        response.Say("Good bye");
        return TwiML(response);
    }
}

ポイントは継承元をControllerからTwilioControllerに変更してTwiMLResult型を返却している部分です。

TwilioResponse.Sayメソッドで電話をかけた際の音声を指定できます。
この温泉に日本語が使えるといいのですが、うまくいきませんでした…（情報を持っている方は教えてください）

2.Webサイト発行してアクセスする

今回はAzure Web AppsでホスティングしているためVisual Studioの発行ウィザードを使用して変更を反映します。

プロジェクトを右クリック > 発行を選択
f:id:airish9:20150702112123p:plain

ウィザードに従って発行
f:id:airish9:20150702112204p:plain

3.Azure Web Appsで確認

http://{ 作成したWeb Apps名}.azurewebsites.net/TwilioSample/IndexにアクセスをするとTwiMLのXMLが返却されている事を確認できます。

f:id:airish9:20150702113907p:plain

4.Web AppsとTwilio電話番号を紐づける

今のままではTwilio電話番号に電話を行っても作成したTwiMLが実行されないため、Azure Web AppsとTwilioを連携させる必要があります。

1)Twilio電話番号のページを表示する

f:id:airish9:20150702115208p:plain

2)Twilio電話番号のページのRequestURLにWeb AppsのURLを設定する

f:id:airish9:20150702115219p:plain

この設定を行うことでTwilio電話番号に電話をかけると指定されたURLへリクエストが発生してTwiMLの処理が行われる事になります。

5.電話をかけてTwiMLの動作確認を行う

実際にTwilio電話番号に電話をかけるとTwiML通りに機械音声が再生されて電話が切れるか確認を行います。

Twilio電話番号はTwilioのダッシュボードから確認できるため適当な電話機から電話をかけます。
国番号が入るため+815012345678の場合は050-1234-5678への発信となるのでご注意を。

トライアルアカウントの番号で電話をかけると日本語音声でアップデートすると日本語メッセージが流れないようになると言われた後に、プッシュ操作を求められます。プッシュ操作を行うとTwiML通りのメッセージが流れるはずです。

TwilioをASP.NET MVCで試しに使ってみた（導入編）

twilio .NET C# Microsoft

もう７月ですね一年の半分が終わったらしいですよ（白目

なかじ(@nakaji)さんを見習ってブログにも力を注いでいこうかと思っています。 一発目はTwilioネタです。

nakaji.hatenablog.com

先日はMicrosoftさんの「Microsoft Innovation Award 2015」に参加する機会があったので参加してきました。
当日の様子はレポート記事は人見知りな方のBlogを見てもらえれば良いと思います。

ascii.jp

zuvuyalink.net

実はこの会場でTwilioを使ったユーザー投票が行われたのですが、私的に今後の勉強会で使ってみたいとも思ったのでTwilioを使用してみました。

1.Twilioのユーザー登録

f:id:airish9:20150701163541p:plain

Twilio for KDDI Web Communications | クラウド電話API
Twilioのサイトからユーザー登録を行います。
ユーザー登録を行うと自動的にトライアルアカウントとなり一定期間（一定金額？）は支払いをすることなく使用する事ができます。

トライアルアカウントの制限や使用金額等に関しては以下の公式ドキュメントを参照

twilioforkwc.zendesk.com

なお、ユーザー登録時に使用した電話番号は検証済み電話番号扱いとなり、Twilioの電話番号と合わせて通話等に使用する事ができます。

2.Twilio電話番号の取得

アカウントを登録した状態ではTwilio電話番号が存在しないのでダッシュボードの画面や"Twilio電話番号"のタブから電話番号を購入します。

TwilioではAPIを使用して、このTwilio電話番号から発信したり、Twilio電話番号の着信後の処理をプログラミングする事ができます。（Inovation Awardで行ったようなアンケートは後者の受信を処理するパターン）

3.ASP.NET MVCにTwilio SDKを導入

Twilioは様々なプログラミング言語に対応していますが今回はＣ＃で実装します。
まずはVisual Studioを使用してASP.NET MVCのテンプレートを作成します。（詳細は割愛）

TwilioのSDKはgithubで公開されており手順通りにNugetでプロジェクトに導入します。

github.com

1) Twilio.Apiの参照を追加
Install-Package Twilio
2) Twilio.MvcとTwilio.Twimlの参照を追加
Install-Package Twilio.Mvc

以上で基本的な準備は完了になります。

おまけ：サンプルプログラムでTwilioから電話をかける

Twilioを試しに使ってみるために、コンソールプログラムから登録時に使用した電話番号に電話をかけてみましょう。

  1. C#のコンソールプログラムテンプレートを選択
  2. パッケージマネージャーコンソールで"Install-Package Twilio"を行う。
  3. Mainメソッド内のコードに以下の内容を記述して実行
using System;
using Twilio;
class TwilioSample 
{
  static void Main(string[] args) 
  {
    // 認証情報
    string AccountSid = "{{ACCOUNT SID}}";
    string AuthToken = "{{ AUTH TOKEN }}";
    var twilio = new TwilioRestClient(AccountSid, AuthToken);
 
    var options = new CallOptions();
    options.Url = "http://demo.twilio.com/docs/voice.xml";
    options.To = "+819012345675";
    options.From = "+815011112222";
    var call = twilio.InitiateOutboundCall(options);
     
    Console.WriteLine(call.Sid);
  }
}

この例ではTwilio電話番号(050-1111-2222)から登録時電話番号(090-1234-5678)に対して電話をかける例です。 実行すると自分の携帯に電話がかかってきて、英語のメッセージが行われた後に電話が切れると思います。

次回はASP.NET MVCを使用して電話の受信プログラムを行いたいと思います。