きよくらの備忘録

「三日坊主と呼ばせない!日記」改め。主にソフトウェア開発関連の話題。

ASP.NET WebHook (Preview)を試してみた

本エントリはASP.NET Advent Calendar 2015の1日目のエントリです。 今年はなぜかASP.NET Advent Calendar 2015を立てることになったので(とはいえ言い出しっぺではありません)、とりあえず1日目を担当させていただきます。

 

ASP.NET WebHooks

少し前のことですが、ASP.NET の新しいフレームワーク?として、ASP.NET Web Hooks (Preview)というのが登場しました。 f:id:kiyokura:20151130235836p:plain

 

アナウンスのエントリはこちら:
Introducing Microsoft ASP.NET WebHooks Preview

 

Webフック(WebHooks)とは?

WebHooks(Webフック)とはWebサービス同士を連携させるパターンというか方式というか……などど僕が説明するまでもなく、githubやSlackなど、開発者が利用するサービスではをはじめ色々なwebサービスで利用されているものですね。

参考:Webhook - Wikipedia, the free encyclopedia

 

そういえば、去年のASP.NET Advent CalendarでVS Online(現Visual Studio Team Services)のService Hookを受け取るサンプルを作ったエントリ書きましたが、まさにこれですね。

ASP.NET MVC と Azure Web Sites で VS Online のカスタムService Hookを作成してサクッとリモートデバッグする - きよくらの備忘録

 

ASP.NET WebHooksとは

詳細は上記のアナウンスのエントリや、少し前にいさみさんが翻訳されたInfoQの記事などを読んでいただくのが良いと思いますが、ざっくりいえば、

  • (いろんなWebサービスの)Webフックによる通知を受信する機能をサクっと実装する
  • 自分でWebフックを発行する機能をサクっと実装する

ためのインフラを提供するライブラリというかフレームワーク…ととらえて貰えれば良いように思います。

現時点では、 ASP.NET Web API 2 と ASP.NET MVC 5、つまるところ.NET Framework 4.xがターゲットになっているようです。

 

Receiverによるサービス対応

受信側の機能はサービスごとにReceiverを作成することで、プラガブルかつ再利用可能な形でいろいろなサービスに対応できる構造になっています。 現時点でも以下のReceiverが実装・NuGet経由で提供されています。

  • for Azure WebHooks
  • for BitBucket
  • for Dropbox
  • for Github
  • for MailChimp
  • for Paypal
  • for Pusher
  • for Salesforce
  • for Slack
  • for Stripe
  • for Trello
  • for Wordpress
  • for your custom WebHooks implementation
  • for generic WebHooks with special validation logic or security requirements

Visual Studio Onlineに対応したWeb Hooksが無い当たりどうよ、とは思いますがまあ言わないでおきます*1。 もちろん上記のようなドンピシャのReceiverが存在しないサービスであっても、RESTなWeb Hooksのサービスであれば最後の二つのパッケージを利用して(一からやるよりは)楽して実装できそうですし、オリジナルのReceiverを実装することも可能です。

また、Visual Studio 2015向けのExtension、ASP.NET WebHooks Connected Serviceもリリースされています。 このExtensionを利用すると、受信したいサービスを選択するだけで必要なReceiverのパッケージを取り込むなどの下準備を整えてくれます(後ほど実際に試してみます)。

 

もちろんOSS

ASP.NET Web HooksはもちろんOSSで、github上のリポジトリはこちら。 aspnet/WebHooks

Receiverのソースも含まれているので、独自にReceiverを実装する場合も参考にすればよさそうです。

 

リソース

オフィシャルなリソースを以下に整理しておきます。チュートリアル的な記事もあるので軽く目を通して手を動かすのもよさそうです。

 

試してみる(Slack連携)

ではさっそく、少し試してみます。 公式のエントリにもありますが、まずはSlackでサクっとやってみます。

 

前提条件

今回は以下の環境を前提とします

 

上記は必須ではなく、あくまで私が試した環境、という程度の意味合いです。

またAzure Web Appsを利用するのは手軽に以下を満たせるからです

  • 簡単にSlackからプッシュを受けられる(パブリックにアクセスできるWebサイト)
  • 無料でHTTPSが利用可能
  • ASP.NETが動作する
  • 簡単にVisual Studioから接続してデバッグ実行可能

またこの環境だとAzure Web Appsの設定含めて、Slackの操作以外はすべてVisual Studioからの操作で完結できるのも楽でいいですね。

 

手順概要

手順の概要としてはこんな感じです

  1. テンプレートからプロジェクトの作成と Azure Web Apps作成
  2. Slack側の設定
  3. 機能の実装
  4. デプロイ&デバッグ実行

 

1. テンプレートからプロジェクトの作成と Azure Web Apps作成

Visual Studioを起動し、プロジェクトテンプレートからプロジェクトを作成します。Azure Web Appsの設定もこのタイミングでできますので、やってしまっておきます*2

プロジェクトテンプレート選択:その1

VSを立ち上げて、プロジェクトの新規作成からASP.NET Webアプリケーションを作成します。言語は今回はC#でやりますが、VB.NETで特に問題ないと思います(多分)。

.NET Frameworkは4.5.x以上であれば問題ないと思います。

f:id:kiyokura:20151129210410p:plain

 

プロジェクトテンプレート選択:その2

ASP.NETのテンプレートはとりあえずWEB APIを選びました。またデプロイ先のWeb Appsも一連の処理で作成したいので、[クラウドでホストする]ににチェックを入れ、「Web アプリ」を選択しておきます。なお認証は今回は特に使わないつもりなので「なし」を選択しました。

f:id:kiyokura:20151129210651p:plain

 

Azure Web Appsの設定

続いて、Azure上にWeb Appを作成する際のパラメータを入力します。 「Web アプリ名」はグローバルでユニークな名前である必要があります。「App Service プラン」と「リソースグループ」は今回適当に新規作成しました。既存で適切なものがあればそれを利用してください。

f:id:kiyokura:20151129210658p:plain

 

Azureへのデプロイ

プロジェクトの展開が終わったら、自動的にAzureに新規にWeb Appsが設定されるので待ちます。 それが完了したら、そのままデプロイしておきます*3コンテキストメニューやアクティビティウィンドウのリンクからデブロイウィザードを立ち上げ、[発行]するだけでOKです。

f:id:kiyokura:20151129210737p:plain f:id:kiyokura:20151129210745p:plain

正常に発行出来たらブラウザが自動的に立ち上がってアクセスできます*4

f:id:kiyokura:20151129210826p:plain

 

2. Slack側の設定

ここでSlack側で必要な設定を行っておきます

Slackにサインインし設定画面を開く

対象のチームのConfigure Integrationsを選択、DIY Integrations & CustomizationsにあるOutgoing WebHooksを選択、Add Outgoing WebHooks Integrationと進みます。

f:id:kiyokura:20151129232816p:plain

f:id:kiyokura:20151129234343p:plain

f:id:kiyokura:20151129232857p:plain

 

設定の入力

Integration Settings欄に入力していきます。今回はWebフックを発火させるキーワードを設定するTrigger Word(s)と、連携先のアドレスを設定するURL(s)のみを設定しておきます。 「Trigger Word(s)」には、Hoge!を入力してみます。これでSlackのチャンネルに「Hoge!」で始まる発言があった場合にWebフックが発火する…はずです。 「URL(s)」には、ASP.NET Web Hooks for Slackを利用する場合は https://<host>/api/webhooks/incoming/slack となります。今回は<host>の箇所にはAzure Web Apps作成時入力した、Webアプリ名を当てはめて入力します。入力が終わったら画面下部の[Save Settings]で保存します。

f:id:kiyokura:20151129233058p:plain

 

Tokenのコピー

最後に、設定画面に表示されているTokenをコピーしておきます。これは後ほどの工程で必要になります。

f:id:kiyokura:20151129233138p:plain

 

3. 機能の実装

ここからが組み込みの本番です。必要なパッケージをインポートし、最低限の機能を実装していきます。といっても、先に紹介した拡張機能を利用すると、最低限のハンドラーまで実装されるので、動作確認のサンプルでベルであれば自分でコードを書く必要があるのは一行だけです:p

 

Slack用レシーバーの構成

まずはASP.NET WebHooks Receiver for Slackのパッケージ導入・設定します。手動でNuGetからインストールしてもよいのですが、ここは先ほど紹介した拡張機能を利用して楽をします。 ソリューションエクスプローラーの参照を右クリックし接続済みサービスを選択。ASP.NETにあるASP.NET WebHooksを選択して[構成]を実行、ReceiversのSlackを選択し、ConfigureのSlack欄に先ほどコピーしたTokenを張りつけ、[完了]します。

f:id:kiyokura:20151129233351p:plain f:id:kiyokura:20151129233359p:plain f:id:kiyokura:20151129233413p:plain f:id:kiyokura:20151129233432p:plain

※この後、NuGetで各種参照が解決されるので、少し時間がかかる可能性があります

ここで追加されたファイルを確認しておきましょう。

f:id:kiyokura:20151129233508p:plain

 

Global.asaxへの記述の追加

Global.asax.csのApplication_Startハンドラ内で、前工程で追加されたWebHooksConfig.cs のRegisterメソッドが呼び出されるように登録しておきます

public class WebApiApplication : System.Web.HttpApplication
{
  protected void Application_Start()
  {
    AreaRegistration.RegisterAllAreas();
    GlobalConfiguration.Configure(WebApiConfig .Register);
    GlobalConfiguration.Configure(WebHookConfig .Register);  // この行を追加
    FilterConfig.RegisterGlobalFilters(GlobalFilters .Filters);
    RouteConfig.RegisterRoutes(RouteTable .Routes);
    BundleConfig.RegisterBundles(BundleTable .Bundles);
  }
}

以上で完了です

 

4. デプロイ&デバッグ実行

いよいよデプロイしてデバッグ実行してみましょう。

ブレークポイントの設定

まずはブレークポイントを設定します。 SlackWebHookHandlerのExecuteAsyncメソッド内の適用なところでブレークポイントを設定します。

f:id:kiyokura:20151129233731p:plain

 

デプロイ

ブレークポイントの設定が終わったら、コンテキストメニュー公開等からデプロイしておきます。このとき、デバッグ実行を行うために、構成をReleaseからDebugに変えて発行します。

f:id:kiyokura:20151129233802p:plain

 

デバッガーのアタッチ

発行が完了したら、Azure Web Apps上で実行しているプロセスにVisual Studioからアタッチします。Cloud ExplorerのWeb Appsから目的のサイトを選択し、デバッガーのアタッチをクリックすれば完了です。

f:id:kiyokura:20151129233828p:plain

 

Slackにポストしてみる

下準備はすべて整いました。実際にSlaskのチャンネルにポストしてみましょう。 今回は「Hoge!」をトリガにしていますので、「Hoge!AAAAA」と入れてみます

f:id:kiyokura:20151129233859p:plain

しばらくするとデバッガのブレークポイントに飛んできました。

f:id:kiyokura:20151129233923p:plain

ちなみにSlackのWebHooksはレスポンスを返すとチャンネルにポストされる仕様になっていて、このサンプルでも(というか拡張によって自動的に実装されるハンドラーの実装でも)レスポンスを返すようになっています。

f:id:kiyokura:20151129234002p:plain

いい感じですね!

 

まとめ

以上、ASP.NET WebHooks (Preview)の簡単な紹介と、ちょっとしたチュートリアルでした。

明日のASP.NET Advent Calendar 2015は、真の言い出しっぺmiso_soup3先生です!

*1:言ってる

*2:必ずしもこのタイミングでWeb Appsの設定を行っておく必要はありません。ただし、Slack側の設定をする際には少なくともURLの情報が必要になります。

*3:別にここでやっておかなくてもいいのですが

*4:選択したプロジェクトテンプレートなどによっては何も表示されないかもしれません