Azure App Service + ASP.NET Web API で LINE BOTを作ってみる
LINE BOT APIのトライアルをAzure + ASP.NET WebAPIで試してみました。
Azure App Service と Visual Studio 2015 を使用してLINE BOTを作成する手順をまとめてみたいと思います。
今回はひとまず、ユーザーからのメッセージを受け取れることと、BOT側のメッセージをユーザーに返信出来ることが確認できるまでを目標とします。
目次
- 目次
- はじめに
- Visual Studio で ASP.NET WebAppプロジェクトを作成する
- LINE ビジネスアカウントの設定を行う
- ユーザーのメッセージを受け取るAPIを作成する。
- Webアプリケーションをデプロイする
- 実際にメッセージを送ってみよう
- Azure に配置したWebアプリをリモートデバッグする。
- まとめ
はじめに
用意するもの
LINE ビジネスアカウント
- Line Business Centerから無料で登録できます。
- LINE BOT API Trial への申し込みは先着1万名までだそうです。既に締め切られてしまっていたらごめんなさい。
Microsoft Azure アカウント
- 無料で登録可能。Webアプリも無料プランで10個まで作成できます。
- 詳しくはこちらを https://azure.microsoft.com/ja-jp/free/
Visual Studio 2015
- 無償版の Visual Studio Community 2015 が使用できます。
Visual Studio で ASP.NET WebAppプロジェクトを作成する
- プロジェクトの新規作成ダイアログで「ASP.NET Webアプリケーション」を選択してプロジェクトを作成します。
- ASP.NET 4.6 テンプレートの「Empty」を選択します。
- 「フォルダーおよびコア参照を追加する」 で「Web API」のみにチェックします。
- Microsoft Azure クラウドにホストするをチェックし、コンボボックスでWebアプリを選択します。
- [OK]をクリックすると、Azure 関連の設定画面に進みます。
- Azureに作成するWebアプリの名前を入力します。
- App Serviceプラン、リソースグループは、既存のものから選択するか、新規に作成します。
- この画面の操作に関する手順は、Azure Web App のチュートリアルが詳しいのでこちらを参考にしてください。
https://azure.microsoft.com/ja-jp/documentation/articles/web-sites-dotnet-get-started/
- ここで入力したWebアプリ名に 「.azurewebsites.net」ドメイン名を付加したものがこのアプリのURLになります。
- http(s)://linebotapp.azurewebsites.net
- 各項目を入力後、[OK]をクリックすると WebAPIのプロジェクトが作成されます。
LINE ビジネスアカウントの設定を行う
LINE ビジネスアカウントで LINE Developpers にログインすると、作成したアカウントの詳細が「Channels」で確認できます。
- このページの下部にある[Edit]ボタンをクリックして編集画面を開きます。
BOT APIのCallBack URLを入力する。
- アカウント名や、アイコン画像はいつでも変えられるようですので、最初は適当な名前でもOKです。
- CallBack URL に、先ほど作成したWebAppのURLを入力します。
https://linebotapp.azurewebsites.net:443/api/callback
サーバーの送信IPアドレスをWhite Listに登録する
Server IP Whitelist にIPアドレスを登録する必要があります。
IPアドレスの確認方法
Azureポータルから確認できます。
ポータルにログインし、App Service > LineBotApp(アプリ名) > 設定 > プロパティ の「送信IPアドレス」欄に記載されているIPアドレス(複数記載されていますが、全て登録します。)
※ 送信IPアドレスについては、こちらのサイトの説明が参考になります。 http://cloudsteady.jp/faq/2271.html/
ユーザーのメッセージを受け取るAPIを作成する。
作成したWebAppプロジェクトにコントローラを追加します。
- Visual Studio のソリューションエクスプローラで 「Controller」フォルダを右クリックして[追加]-[Controller...]を選択します。
- ダイアログで「Web API 2 コントローラ -空」を選択後、コントローラ名を「CallBackController」として[追加]をクリックします。
- 作成されたソースファイルのCallbackControllerクラスに Postメソッドを追加します。 登録した URL "https://linebotapp.azurewebsites.net/api/callback" にPOSTメソッドでリクエストが来ると、このPostメソッドが実行されます。
- 今回は、メッセージが送受信できることを確認するのが目的なので、届いたメッセージをほぼそのまま返すだけの処理となっています。
using System; using System.Net.Http; using System.Threading.Tasks; using System.Web.Http; using Newtonsoft.Json; namespace LineBotApp.Controllers { public class CallbackController : ApiController { public async Task<HttpResponseMessage> Post() { var contentString = await Request.Content.ReadAsStringAsync(); dynamic contentObj = JsonConvert.DeserializeObject(contentString); var result = contentObj.result[0]; var client = new HttpClient(); try { client.DefaultRequestHeaders .Add("X-Line-ChannelID", Properties.Resources.ChannelID); client.DefaultRequestHeaders .Add("X-Line-ChannelSecret", Properties.Resources.ChannelSecret); client.DefaultRequestHeaders .Add("X-Line-Trusted-User-With-ACL", Properties.Resources.MID); var res = await client.PostAsJsonAsync("https://trialbot-api.line.me/v1/events", new { to = new[] { result.content.from }, toChannel = "1383378250", eventType = "138311608800106203", content = new { contentType = 1, toType = 1, text = $"「{result.content.text}」と言ったか にゃ?" } }); System.Diagnostics.Debug.WriteLine(await res.Content.ReadAsStringAsync()); return new HttpResponseMessage(System.Net.HttpStatusCode.OK); } catch (Exception e) { System.Diagnostics.Debug.WriteLine(e); return new HttpResponseMessage(System.Net.HttpStatusCode.InternalServerError); } } } }
- メッセージを送信する際のHeaderには、LINE ビジネスアカウントの Channels-Basic information 画面で確認できる ChannelID、ChannelSecret,MID の値を使用します。
- X-Line-ChannelID : ChannelID
- X-Line-ChannelSecret : ChannelSecret
- X-Line-Trusted-User-With-ACL : MID
Webアプリケーションをデプロイする
Controllerを追加し、ビルドが通ったら後はAzure にデプロイするだけです。
- ソリューションエクスプローラでプロジェクト名を右クリックし、[公開..]を選択すると、Webの発行ウィザードが表示されます。
- Web発行ウィザードでは、特に内容を変更せずに[次へ>]で進んでOKです。
- ブラウザが立ち上がり、以下のページが表示されたらデプロイ成功です。
実際にメッセージを送ってみよう
では、実際にLINEアプリに作成したBOTを友達登録して、動作確認をしてみましょう。 (LINE ビジネスアカウントの Channels-Basic information ページに表示されるQRコードを 読み取ることで友達登録できます。)
送ったメッセージがちゃんと帰ってきましたね。とりあえず、最低限のやり取りが出来ることは確認できました。
Azure に配置したWebアプリをリモートデバッグする。
Azure上のWebアプリのリモートデバッグもVisual Studioから簡単に行えます。