Bot FrameworkをSlackで使ってみる

Microsoftの[Bot Framework](https://dev.botframework.com/)が前から気になっていたので、触ってみました(•̀ᴗ•́)و 

Bot Frameworkの詳細は[こちら](https://dev.botframework.com/)を見てください。
簡単にいうと、**Botが作れるやつです（笑）**
これで作ったやつはSlack, skype, Web, facebook Messengerでも利用できるようです(Slack以外は試していないので、実際できるか分からないですが...)

前半は**導入方法**で、後半は**Botと簡単なやりとりについて**を書こうと思います。
※後半は、後日書きます。今回は、導入部分までです。

# 導入方法

## ① プロジェクト作成

```
npm init
```

## ② パッケージのインストール

```
npm install --save botbuilder
npm install --save restify
```

## ③ はろーわーるどーを返すコード

`はろーわーるどーーー(´・ω・｀)`をひたすら返します。

```app.js
var restify = require('restify');
var builder = require('botbuilder');

var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
   console.log('%s listening to %s', server.name, server.url); 
});
  
var connector = new builder.ChatConnector({
    appId: process.env.MICROSOFT_APP_ID,
    appPassword: process.env.MICROSOFT_APP_PASSWORD
});
var bot = new builder.UniversalBot(connector);
server.post('/api/messages', connector.listen());

bot.dialog('/', function (session) {
    session.send("はろーわーるどーーー(´・ω・｀)");
});
```

## ④ GitHubにpush

上記のプロジェクトをGitHubにpushします。

## ⑤ [Azure](https://azure.microsoft.com/ja-jp/)の設定

[Azure](https://azure.microsoft.com/ja-jp/)以外でもできると思うのですが、Microsoftつながりで、今回はAzureを使います(　´∀｀)b

※Azureの登録方法とかはググってください。

### 5.1 Web App作成

新規 -> Web + モバイル -> **Web App**を選びます。

![スクリーンショット 2016-09-22 16.14.16.png](https://qiita-image-store.s3.amazonaws.com/0/53996/91b95cb7-8bc8-9c15-ae43-3bc2bb38750e.png)

アプリ名などを入力して`作成`を押します。

![スクリーンショット 2016-09-22 16.19.26.png](https://qiita-image-store.s3.amazonaws.com/0/53996/01261763-9ac9-3bd2-517d-310c986cccb2.png)

無事に作成されると、こんな感じになると思います。

![スクリーンショット 2016-09-22 16.21.10.png](https://qiita-image-store.s3.amazonaws.com/0/53996/62824ee2-592c-d6f9-b909-7a980b608e2c.png)

## ⑥ GitHubとAzureの連携

GitHubとAzureを連携させて、GitHubににpushされるとAzureに自動で反映されるように設定します。

### 6.1 デブロイオプション

デプロイオプション -> GitHubを選択します。

![スクリーンショット 2016-09-22 16.32.01.png](https://qiita-image-store.s3.amazonaws.com/0/53996/505b9fbd-7121-3b19-7e30-baceded888f5.png)

さきほどpushしたリポジトリを選び、`OK`を押します。

![スクリーンショット 2016-09-22 16.32.35.png](https://qiita-image-store.s3.amazonaws.com/0/53996/e1210bc8-a96a-a4b4-b061-674ac1c063e7.png)

うまくいくと、こんな感じにチェックマークがつきます。

![スクリーンショット 2016-09-22 16.33.58.png](https://qiita-image-store.s3.amazonaws.com/0/53996/271a60ea-40a5-7302-1676-84e430d7907a.png)

## ⑦ Bot Framework登録

[Bot Framework](https://dev.botframework.com/)のサイトに行き、`Register a bot`を選択します。

![スクリーンショット 2016-09-22 16.52.47.png](https://qiita-image-store.s3.amazonaws.com/0/53996/5f280710-59b8-8c80-8adf-8dddccc88829.png)

で、いろいろ書くページが表示されるので、必須項目の所を埋めていきます。

### 7.1 Botの名前

ここでBotの名前とかを書きます。
`Bot handle(BotのIDみたいなもの)`は**後から変更できないので、注意してください。**

![スクリーンショット 2016-09-23 16.55.14.png](https://qiita-image-store.s3.amazonaws.com/0/53996/f3265888-73ea-7ed3-ed96-71fdaa0ac5b5.png)

### 7.2 Microsoft App IDとendpoint

この辺は、重要です。

#### 7.2.1 endpoint

ここのendpointに、先ほど作成したAzureのWeb Appのurlを入れます。

![aaa.png](https://qiita-image-store.s3.amazonaws.com/0/53996/d8bf4032-f494-299b-f0e1-cc54a9c4f358.png)

Web Appのurlは、概要にあります。これをコピーしてください。

![スクリーンショット 2016-09-22 17.01.54.png](https://qiita-image-store.s3.amazonaws.com/0/53996/6c8b6282-88d1-9e21-7656-1bb0fd0eebff.png)

で、endpointのurlは**https**です。
そして、urlの後ろに`/api/messages`をつけます。

`https:〇〇/api/messages`という形で、入力します。

ちなみに、`/api/messages`は上の`app.js`の

```
server.post('/api/messages', connector.listen());
```

ここの部分のことです。

#### 7.2.2 Microsoft App ID

次に Microsoft App IDの登録です。
`Create Microsoft App ID and password`を選択します。

![aaa 2.png](https://qiita-image-store.s3.amazonaws.com/0/53996/3c028c09-b669-ddc0-358c-c3ae29d1037c.png)

あとは、画面に表示されるやつをポチポチすると、IDとパスワードが作成されます。
ここの**IDとパスワードはメモ**しといてください。

![スクリーンショット 2016-09-22 17.04.26.png](https://qiita-image-store.s3.amazonaws.com/0/53996/62b260d9-2247-65c9-e117-604ccc027b1d.png)

### 7.3 プロフィールの設定

privacyやtermsのurlは、開発段階なら適当なurlで大丈夫です。

![スクリーンショット 2016-09-22 17.05.01.png](https://qiita-image-store.s3.amazonaws.com/0/53996/a9358cd9-fa25-089a-9c9a-090e25ed1fb3.png)

### 7.4 設定完了

必須項目も入力できたら、画面下にOKみたいなボタンがあるので、それを押します。
うまくいくと、こんなメッセージが表示されます。

![スクリーンショット 2016-09-22 17.05.51.png](https://qiita-image-store.s3.amazonaws.com/0/53996/52eb6452-3517-632a-f269-e2ce8ed4c015.png)

で、管理画面に、こんな感じにBotができているはずです。

![スクリーンショット 2016-09-22 17.05.59.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b8497833-8d25-b13b-594e-3e6c20a3a154.png)

## ⑧ AzureにBot FrameworkのIDとパスワード登録

次に、 先ほどメモしたIDとパスワードをAzureに登録します。
`アプリケーション設定`の`アプリ設定`に下の画像の感じに設定します。

![guighui.png](https://qiita-image-store.s3.amazonaws.com/0/53996/9af71962-fb58-00fd-6ef2-0869d0530a11.png)

最後に**保存を押すのを忘れなく！**

## ⑨ Slackに追加

先ほどのBotの管理画面にSlackの所があるので`Add`を押します。

![スクリーンショット 2016-09-22 21.50.42.png](https://qiita-image-store.s3.amazonaws.com/0/53996/3a5ea26c-a811-ec8f-bfbd-d47b69542480.png)

こんな画面がでるので、画面に従って、設定していきます。

![スクリーンショット 2016-09-22 21.50.55.png](https://qiita-image-store.s3.amazonaws.com/0/53996/03f166f1-b6fa-f04a-19a4-dc030efd29ff.png)

### 9.1 slackアプリケーション作成

ここからアプリケーションを作成します。

https://api.slack.com/applications/new

### 9.2 Redirect URI

次に、Bot側の画面にある`Create application and set redirect URI`の所に表示されているurlを...

![スクリーンショット 2016-09-22 21.57.20.png](https://qiita-image-store.s3.amazonaws.com/0/53996/8e4ca62a-2117-5ee5-9962-17c18407edc2.png)

Slackの`OAuth & Permissions`の`Redirect URL(s)`にいれます。

![スクリーンショット 2016-09-22 21.57.09.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b13c1a2b-6d6a-d89a-eb2f-5bc0138af15d.png)

### 9.3 Bot Users

次に、`Bot Users`で`Add a Bot User`を押してBotを追加します。

![スクリーンショット 2016-09-22 22.00.07.png](https://qiita-image-store.s3.amazonaws.com/0/53996/e259e0f0-f4b7-30e1-ff5e-20ae4338aaa8.png)

### 9.4 Credentials

最後に、Bot側の`Submit your Credentials`に

![afcasfas.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b35196b1-a4bb-70c1-1eea-8e07d3763b31.png)

Slackの`clientID`とかをいれます。

![スクリーンショット 2016-09-22 22.03.23.png](https://qiita-image-store.s3.amazonaws.com/0/53996/c69e6ea7-6348-5d53-e1d5-f1a95c6d6173.png)

で、最後にBot側の`I'm done configuring Slack`をおして完了です( *• ̀ω•́ )b

## 確認

Slackで、BotがActiveになっていることと、チャンネルにBotがいることを確認します(•̀ᴗ•́)و 
で、こんな感じにしゃべると、こんな感じに返してくれるはずです！！

![スクリーンショット 2016-09-22 22.08.01.png](https://qiita-image-store.s3.amazonaws.com/0/53996/c0348272-d11c-1d5c-5292-b7225578910d.png)

# Botと簡単なやりとり

**近日公開**