Register for SIGNAL by 8/31 for $250 off. Register now.

ASP.NET MVC Webhookプロジェクトの作成

Webhook、すなわちコールバックを処理するために公開されるURLは、あなたのWebアプリケーション内にTwilioのパワーを注ぎ込むのに大変重要なものです。 Webhookという強力なコンセプトはまた、ASP.NET MVCプロジェクトで非常に簡単に作成できます。 実際にそれを証明しましょう。 ASP.NET MVCでWebhookをいくつか公開し、テキストメッセージを受信しましょう!

Webhooks and ASP.NET MVC Projects

For one webhook example, when receiving an SMS (text) message, Twilio will call your application with data describing the incoming message. The same process applies for Programmable Voice, Programmable Chat, Programmable Video, and the other Twilio APIs.

This guide will walk you through setting up a basic project for handling incoming webhook requests in your project. The screenshots in the steps shown were made with Visual Studio 2015, but the process is much the same in Visual Studio 2013 and 2017.

Create the Project

Twilioからの着信リクエストを処理できるASP.NET MVCプロジェクトを作成します。 Visual Studioを開いて、「ファイル」→「新規プロジェクト」を選択します。 下記の画面のように、ASP.NET Web Application Template for C#を見つけます。

Visual Studio - 新規 ASP.NET Web Application

目的に合わせて、プロジェクトとソリューションに名前をつけます。

OKをクリックすると、ASP.NETプロジェクトの詳細について入力を求められます。

Visual Studio - 新規 ASP.NET Project

Webhookの処理を行うだけであれば空のプロジェクトで問題ありませんが、フォルダーと核となる参照を追加するにはMVCオプションが選択されていることを確認してください。 最後に、アプリケーションをAzureに簡単に発行するには「クラウド内のホスト」を選択します。 Twilioではリクエストの送信に外部からアクセスできるURLが必要で、Azureによるホスティングはこの条件にぴったりです。

Azureでホストする

Azureにホストする選択肢を選んだ場合、「Azure Web アプリケーション設定」ダイアログが表示されます。

Visual Studio - Azure Webアプリケーションの構成

この時点で、Microsoft Azureサブスクリプションにログインする必要があります。 ログインが完了したら、グローバルに一意なWebアプリケーション名(一意な名前が選択されると、緑色のチェックマークが表示されます)を入力する必要があります。 この名前は後々、Webhook用のURLの一部として使用しますので、控えておくようにしてください。

Azure上で、すでにご自身のWebアプリケーションを配置していない場合、新規のアプリケーションサービスプランリソースグループを作成する必要があるでしょう。 お好みのリージョン、および データベースサーバー をアプリケーションでの必要性に応じて選択できます。 単に他のAPIを呼ぶだけのご予定なら、おそらくデータベースは必要ないでしょう。

OKをクリックしたら、Visual Studioは新規プロジェクトを作成し、Azure上にアプリケーションを発行します。 Visual Studio内の「Azure App Service のアクティビティ」を確認することで、発行が完了しているかどうかを確認できます。

Visual Studio - Azure App Serviceのアクティビティ

NuGet パッケージ

プロジェクトの下準備を終えるため、NuGetパッケージ・マネージャーでいくつかの依存関係をインストールする必要があります。 「ツール」→「NuGet Package Manager」→「Package Manager コンソール」メニューからアクセスできるコンソールを使用すれば、この作業はほんの一瞬で完了します。

Twilioヘルパー・ライブラリーを取得するには、下記のコマンドの使用が必要です。 これはTwilio AspNet.Mvcパッケージを要求し、NuGetに依存対象であるTwilioパッケージの最新バージョンを取得するよう指示しています。

Install-Package Twilio.AspNet.Mvc -DependencyVersion HighestMinor

「Hello World」コントローラーを作成する

To explore how to handle webhooks in ASP.NET MVC, this guide will use the Twilio Programmable SMS product. When Twilio receives an SMS message at a phone number that you own it will call your webhook. We can listen for this webhook using an ASP.NET MVC Controller.

「ソリューションエクスプローラー」内のプロジェクトの [Controllers] フォルダーを見つけます:

Visual Studio - ソリューションエクスプローラー - Controllers

フォルダーで右クリックし、「追加」→「コントローラー」と選択し、「MVC 5 コントローラー - 空」を選びます:

Visual Studio - MVC 5 コントローラー - 空

用途に適した名前をコントローラーに付けます:

Visual Studio - コントローラーの名前付け

using ステートメントを更新して、Twilio名前空間をインポートします:

using Twilio.AspNet.Common;
using Twilio.AspNet.Mvc;
using Twilio.TwiML;

続いてコントーローラーのクラスについて、ASP.NET MVCによって提供される既定の Controller に代わって、 TwilioController から継承されるように変更します:

public class HelloWorldController : TwilioController

続いて、Indexアクションメソッドを[HttpPost]属性を、TwiMLResultおよびSmsRequestパラメーターの戻り値を持つよう変更します。

[HttpPost]
public TwiMLResult Index(SmsRequest request)

SmsRequest クラスは Twilio.AspNet.Mvc ライブラリー内で定義され、すべてのデシリアライズされたTwilioが渡すパラメーターが含まれています。音声通話に応答したら、 VoiceRequest クラスを使用します。

Twilio expects your webhook to return TwiML (XML), but you don’t need to code the XML by hand. You can make use of the MessagingResponse and VoiceResponse classes (from the Twilio library) to build a TwiML response programmatically. These classes contain methods corresponding to the TwiML verbs that Twilio understands.

下記のように、アクション・メソッドを更新します:

コードサンプルを読み込んでいます...
Language
using System.Web.Mvc;
using Twilio.AspNet.Common;
using Twilio.AspNet.Mvc;
using Twilio.TwiML;

namespace WebApplication1.Controllers
{
    public class HelloWorldController : TwilioController
    {
        [HttpPost]
        public TwiMLResult Index(SmsRequest request)
        {
            var response = new MessagingResponse();
            response.Message("Hello World");
            return TwiML(response);
        }
    }
}
TwilioのSMSのWebhookに応答するASP.NET MVCアクションの例
ASP.NET MVC Webhookの例

TwilioのSMSのWebhookに応答するASP.NET MVCアクションの例

"Hello World" メッセージを追加後、 TwilioController によって提供される TwiML 関数を呼び出します。 これは通常のASP.NET MVCコントローラー・アクション内で View(myModel) を呼び出すことに似ています。

ローカル環境でテストおよびデバッグする

Visual Studio内からアプリケーションを実行し、ブラウザーでアプリケーションを表示させます。 現状では、アプリケーション用の既定のホームページがありません。

Visual Studio - 404 Error for Root

You might think to add /HelloWorld (or whatever you named your controller) to the URL in the browser. You would be on the right track, but this will still return a 404 because your browser will be doing a GET request instead of a POST request. You can break out a tool like Fiddler or Postman to test POST requests to your newly created controller, but there is a simpler way that’s built right into Windows - PowerShell. Open a new PowerShell window and run the following command:

Invoke-WebRequest http://localhost:XXXXX/HelloWorld -Method POST

XXXXX をVisual StudioがWebアプリケーションに割り当てたランダムなポート番号に置き換えます。 このポート番号は、最初にアプリケーションをブラウザーで開いた際のURLで確認できます。 HelloWorld を、コントローラーに付けた名前(末尾のController部分を除く)に変更します。

これによって、コントローラーからのレスポンスを伴ったPowerShellオブジェクトが返されます。

StatusCode        : 200
StatusDescription : OK
Content           : <?xml version="1.0" encoding="utf-8"?>
                    <Response>
                      <Message>Hello World</Message>
                    </Response>
RawContent        : ...

Content プロパティーで返された生のXMLオブジェクトがご覧いただけるはずです。上級テクニック: ひとつのコマンドだけで Content プロパティーを確認できます。

(Invoke-WebRequest http://localhost:XXXXX/HelloWorld -Method POST).Content

(HTTPリクエストを伴うPowerShellの使用やTwilioについて、さらに詳細な情報が必要ですか? PowerShellを使用してHTTPリクエストを送信するガイドを参照してください)。

ASP.NET MVCアプリケーションをデプロイおよびテストする

Azureへ発行する

アプリケーションをAzureに発行するには、Visual Studio内で「Azure App Service のアクティビティ」を見つけて、「発行」ボタンをクリックします。

Visual Studio - Azure 発行

発行が完了すれば、再度PowerShellからアプリケーションをテストできます:

Invoke-WebRequest https://yourapp.azurewebsites.net/HelloWorld -Method POST

yourapp をAzureのWebアプリケーション用に選択した名前に、そして HelloWorld をコントローラーの名前に置き換えます。

ここまで問題なく完了した前提で、Twilio内で電話番号にWebhookを紐付ける手順に進むことにします。 (デプロイせずにWebhookをローカルでデバッグする方法を学ぶには、該当トピックのガイドを参照してください。

電話番号を構成する

Twilioの電話番号をまだご購入いただいていない場合、こちらで購入しておいてください。 それが済んだら、下記のようにメッセージングWebhookを構成できます。

Twilio メッセージング Webhook - Azure

先にPowerShellでテストした、同じAzure WebアプリケーションのURLを使用します。 「保存」ボタンをクリックして、構成が電話番号に保存されていることを確認してください。

お疲れさま! SMSメッセージをこの電話番号宛に送信すれば、"Hello World" という返信が送られてくるはずです。

SMS サンプル - Hello World

終わりに

This walkthrough should get you most of the way down the path to handling webhooks in ASP.NET MVC projects. For more in-depth examples, see the complete applications for a variety of Twilio use cases that are documented in our Tutorials.

David Prothero
Kat King
Paul Kamp

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。

コードサンプルを読み込んでいます...
using System.Web.Mvc;
using Twilio.AspNet.Common;
using Twilio.AspNet.Mvc;
using Twilio.TwiML;

namespace WebApplication1.Controllers
{
    public class HelloWorldController : TwilioController
    {
        [HttpPost]
        public TwiMLResult Index(SmsRequest request)
        {
            var response = new MessagingResponse();
            response.Message("Hello World");
            return TwiML(response);
        }
    }
}