1.21 jigowatts

Great Scott!

Bot FrameworkとC#で作成したボットとSlackの連携に挑戦!

概要

前回テンプレートより作成したボットをSlackで動かしてみます。画像多めです!

環境

Visual Studio 2015

Azureへ公開

他のWebサービスと連携するためにAzureへデプロイします。Azureのアカウントはこんな感じで用意しました。まだの方はご参考までに♪

プロジェクトからコンテキストメニューで公開を選択します。
f:id:sh_yoshida:20160505092337p:plain

Microsoft Azure App Serviceを選択します。
f:id:sh_yoshida:20160505092428p:plain

App Serviceは新規作成しました。
f:id:sh_yoshida:20160505092615p:plain

適当な感じに設定を行い、作成を押下します。
f:id:sh_yoshida:20160505092502p:plain

接続の設定ができました。[次へ]で他の設定も念のため見ておきましょう。
f:id:sh_yoshida:20160505092906p:plain

構成はReleaseがデフォルトです。
f:id:sh_yoshida:20160505092938p:plain

問題がないようであれば[発行]!
f:id:sh_yoshida:20160505092956p:plain

正常に発行されました。
f:id:sh_yoshida:20160505093136p:plain

これでAzure上でボットが動作しましたヾ(*´-`*)ノ
f:id:sh_yoshida:20160505093523p:plain

ボットの登録

Slack、SkypeFacebook MessangerなどのWebサービスから作成したボットを呼び出すにはMicrosoft Bot Frameworkポータルサイトにボットを登録してあげる必要があるようです。

まずはポータルサイトにサインインしましょう。
Bot Framework
f:id:sh_yoshida:20160505095027p:plain

ここで一瞬ひるみました。しっかり考えてからYes or Noを選択しましょう。
f:id:sh_yoshida:20160505095054p:plain

そして、NullReferenceExceptionでサインインできないっていう…。
サーバの問題かと思い、一晩寝かせてみましたがダメでした。
次にMicrosoftアカウントで必要な情報が足りなくてNullReferenceExceptionが出てるのかなと想像してみてアカウントの情報を見直してみたところ、電話番号が登録されてなかった*1のでこれを登録しました。
直後はダメでしたが一時間ほど時間を置いて再チャレンジしてサインインできました!結局どちらの問題かはわかりませんが。
f:id:sh_yoshida:20160505095606p:plain

サインインしたらボットの情報を登録していきます。
EndpointのURLはAzureに公開したURLではなくhttps接続にして/api/messagesを付与します。
こんな感じ。

https://your_bots_hostname/api/messages

f:id:sh_yoshida:20160505100437p:plain

Bot Privacy URLがなんだかわからなかったけど必須だったので、とりあえず適当に。
f:id:sh_yoshida:20160505101447p:plain

App IDはユニークにする必要があるようです。最後のチェックボックスにチェックを入れ[Register]を押下。
f:id:sh_yoshida:20160505101728p:plain

これでエンドポイント、App Id、App Secret(Primary app secret)と必要な情報がそろいました。
f:id:sh_yoshida:20160505102034p:plain

Web.configのAppIdとAppSecretにそれぞれの値を設定し、もう一度Azureへデプロイします。

<configuration>
  <appSettings>
    <!-- update these with your appid and one of your appsecret keys-->
    <add key="AppId" value="hogehoge" />
    <add key="AppSecret" value="hugahuga" />
  </appSettings>
  <!--省略-->
</configuration>

エミュレータにURL、App Id、App Secretを入力して動作確認してみました。
ちゃんと動いてますね!
f:id:sh_yoshida:20160505102303p:plain

Slackへの連携

ようやくSlackとの連携です。
ポータルサイトのAdd another channelからSlackのAddを選択します。
あとはHow toを上から順番に実行していきます。
f:id:sh_yoshida:20160505103315p:plain

slack APIからアイコンとRedirect URIを設定して[Create App]。
f:id:sh_yoshida:20160505103643p:plain

左側のペインでBot Usersを選択し、[Add a bot to this app]。
f:id:sh_yoshida:20160505103824p:plain

usernameをつけます。今回は"bot"としました。わかりやすいですね。
f:id:sh_yoshida:20160505103944p:plain

左側のペインでApp Credentialsを選択し、OAuth InformationからClient IDとClient Secretを表示します。
f:id:sh_yoshida:20160505104208p:plain

これらをコピーして、ポータルサイト側に貼り付けて、[Submit Skack Credentials]を押下します。
f:id:sh_yoshida:20160505104240p:plain

そして、チャンネルを選択して[Authorize]。
f:id:sh_yoshida:20160505104457p:plain

お疲れ様です!これで設定完了です!
f:id:sh_yoshida:20160505104650p:plain

Slackで確認

ポータルサイトにログインできないというアクシデントがありましたが、それ以外は簡単に連携することができました!テンプレートアプリなので面白くもなんともないですが、後は面白いボットを作るだけです。そしてそれが一番難しい!
f:id:sh_yoshida:20160505105235p:plain

補足

Azureの無料サブスクリプションでボットを公開して数日経ちますが、今のところ1円もかかってません。

*1:ずいぶん前にMicrosoftアカウントを作成してて、当時は電話番号は必須ではなかったんです。今新規作成フォーム見ると必須になってますね。