メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

C#とASP.NET MVC開発環境のセットアップ方法

このガイドでは、 MVCプロジェクト向けのASP.NET開発環境のセットアップ方法について扱います。 また、Twilioを使用するすべてのC#アプリケーションにお勧めできるいくつかの便利なツール: ngrokおよびTwilio C# SDK についても触れていきます。

Let’s get started!

This tutorial is intended for Visual Studio on Windows with .NET Framework. For a cross-platform tutorial using .NET Core, please check out our Programmable SMS Quickstart for C# with .NET Core.

.NET FrameworkとIDEのインストール

For Windows, we recommend using Visual Studio Community Edition, which is a free IDE provided by Microsoft. It will install all the necessary component as well as the .NET Framework. You can also follow along with this tutorial using Visual Studio Professional or Enterprise.

簡単なASP.NET MVCアプリケーションを作成する

まずは、シンプルなASP.NET MVCプロジェクトを作成します。 Visual Studioは数クリックで簡単にすべてを作成してくれます。

  1. メニューで、[ファイル]> [新規作成]> [プロジェクト]をクリックします
  2. ダイアログが表示されるので、Visual C#用テンプレートの中から次のものを選択します: ASP.NET Web アプリケーション (.NET Framework)
  3. 下部で、WebApplicationTwilioのようなプロジェクト名を入力し、OKをクリックします。
  4. 次のダイアログでは、MVC を選択し、Azuleにホスト を非選択とし、次のボタンをクリックします: Ok

VSでWebプロジェクトを作成する

これで、ASP.NET MVCプロジェクトのセットアップがすべて完了し、準備は万端です。 メニューバーで「デバッグ(D)」>「デバッグ開始(S)」をクリックする(またはF5キーを押す)と、アプリケーションを自動でビルド、実行し、お使いのWebブラウザー上でそれを表示します。 (次のステップに進む前にデバッグを停止することもお忘れなく)。

ASP.NET MVCプロジェクトでのTwilio C# SDKの使用

ここでは、Twilio C# SDKを追加し、MVCプロジェクトと一緒に使用する方法についての簡単な例をご紹介します。

  1. ソリューション・エクスプローラー内でソリューションを右クリックし、ソリューション用のNuGetパッケージを管理 を選択します。
  2. これにより、ソリューションにインストールされているパッケージを表示する新規タブが開きます。 参照(B)をクリックします。
  3. Twilio by Twilioを選択し、右側のペインからプロジェクトに対応するチェックボックスをオンにし、最新バージョンを選択、「インストール」をクリックします。
  4. これをTwilio.AspNet.Mvc by Twilioまで繰り返します。

次のステップでは、最初にアプリケーションに接続した際ににそれが返すもの処理するHomeControllerを変更します。 今は基本的なHTMLのWebページを返しますが、これをTwiMLを返すように変更します。

Controllers\HomeController.csの内容を下記のように変更しましょう

using System.Web.Mvc;
using Twilio.AspNet.Mvc;
using Twilio.TwiML;

namespace WebApplicationTwilio.Controllers
{
    public class HomeController : TwilioController
    {
        public ActionResult Index()
        {
            var response = new VoiceResponse();
            response.Say("hello world");
            return TwiML(response);
        }
    }
}

これで一丁上がりです。 F5を押すと、下記のようにページが表示されていることが確認できるはずです。

<Response>
    <Say>hello world</Say>
</Response>

インストールとngrokの使用

TwiMLでのシンプルな "Hello World!" プログラムが用意できたところで、あなたの開発環境は準備万端です。 しかし、大部分のTwilioプロジェクトにはもうひとつ、ngrokという便利ツールをインストールする必要があります。

Twilioサービスの大部分では、皆さんのアプリケーションとの通信にWebhookを使用します。 たとえばTwilioに通話が着信すると、皆さんのアプリケーションのURLにリクエストをし、この通話でどのような処理を行うのかを指示します。

ご自身の開発環境でアプリケーションに取り組む際、アプリケーションは同一のコンピューター上の他のプログラム以外からアクセスできないため、Twilioと通信することができません。

ngrokは、この問題を解決するための弊社スタッフお気に入りのツールです。 起動すると、ngrok.ioドメインに一意のURLが提供され、着信リクエストがローカルの開発環境に転送されます。

はじめるには、ngrok のダウンロードページに移動し、お使いのオペレーティング・システム向けのバイナリーをゲットしましょう。 (ngrokのインストールについての詳細については、ngrokガイドをお読みください。

ダウンロードしたら、ASP.NET MVCアプリケーションを実行し、ブラウザのURLを書き留めて、アプリケーションが実行されているポート番号を探します。

ポート番号5678を表示するブラウザーのアドレスバー

ポート番号が見つかったら、下記のコマンドを使用してngrokを開始します:

./ngrok.exe http -host-header="localhost:5678" 5678

5678のところにはポート番号が入ります。 下記のような出力が表示されているはずです:

ngrokの画面

"Forwarding"の行を見つけ、ngrokドメイン名を確認し(この例では、"aaf29606.ngrok.io"です)、ブラウザーからこのドメイン名にアクセスします。

問題がなければ、Hello World! メッセージが新規のngrokのURLに表示されるはずです。

Twilioアプリケーション上で作業していて、WebhookのURLが必要になったときはいつでも、ngrokを使用してこのようなパブリックにアクセスできるURLを取得してください。

Twilio上でWebhookを構成する

最後のステップとして、Twilio Consoleの電話番号セクションにアクセスします。

  1. "Configue with"をVoice Webhook/TwiMLに設定します。
  2. ngrok URLを入力します。
  3. 下部にある[保存]ボタンをクリックします

Twilio コンソール

これで、お手持ちの電話でTwilio電話番号にダイアルすれば、"Hello World!"の音声が聴こえてくるはずです。

関連トピック

これで、ASP.NET MVCアプリケーションを構築する準備が整いました。 他にもいくつか有用なリソースがありますのでご紹介しましょう:

Twilio

ASP.NET

Agustin Camino Jose Oliveros Samuel Mendes David Prothero Kat King
Rate this page:

ヘルプが必要ですか?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.