「初心者向け」GitHub運用⑥：HubotとSlackとGitHub

# この記事はこんな方向けです！
**細かいことは置いといて**
・GitHubの基本的な使い方を知りたい!
・GitHubでのチケットベース開発を知りたい！
・Slackと連携の取り方を知りたい！

そんな方への**手っ取り早いハウツーな記事**です。

[コードはこちら](https://github.com/practiceDev-GitHub/testHubot)

**scripts/event.coffee**というファイルが今回の内容です。


## この記事を読み終えますと、

**GitHubのイベントをSlack上で通知できるようになります**


## いくつか記事を分けます

本記事では**「HubotとSlackとGitHubを連携」**についてです。

基礎
1. [OrganizationとTeamを作ってみる](https://qiita.com/kotaro_bayashi/items/dd70fbf14b8bf43143a9)
2. [Projectを作ってみる](https://qiita.com/kotaro_bayashi/items/aa62989350c4367caa60)
3. [Issueを作ってみる](https://qiita.com/kotaro_bayashi/items/36d10f030c5dfbaaed1c)
4. [他人を招待し、権限付与](https://qiita.com/drafts/76a7fd5e5b70b1d04183/edit)

応用
5. Hubotを使ってみよう〜Herokuデプロイまで
6. **HubotとSlackとGitHubを連携**

## 事前準備

- Slackのワークスペースを持っていること ⇒ [持ってない場合はここ](https://slack.com/intl/ja-jp/get-started#/)
- GitHub上にHubotのコードがあること
- Heroku上にHubotアプリがデプロイされている

## Slack側の設定

**Slack側で、Hubotアプリを追加する**

- 画像の四角部分をクリック
- 遷移先で「Slackに追加」をクリック
![addHubotOnSlack.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/3583c432-a88a-76e3-c413-94b07eab706a.jpeg)

- ボットの名前を決めて、「Hubotインテグレーションの追加」
![setHbotName.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/e118c177-7e36-5c78-934a-76cec02b159d.jpeg)

- API トークンをメモ
![slack_token.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/6bcdb69a-7548-e6e6-e2d6-dc32ec00a8d4.jpeg)

**Slack上で確認してみましょう！**
![checkExitenceOfHubot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/7ad1f458-51f6-e0d0-5b21-d1dbcda588e7.jpeg)

Appの欄に、HuBotが追加されてますね！

## GitHub側の設定

- 作成したOrganazaitonの「setting」→「webhook」を開く
![addHubotOnGitHub.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/ab7de811-ad1c-3487-7e1d-3ee35750e268.jpeg)

**設定する**
- 緑の下線の通りに設定
- 最後に一番下の「Add WebHook」をクリック
![setEventOnGitHub.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/19cc6f68-180a-37f2-2e93-e25815768d9d.jpeg)

**PayLoad URL**
これは、Heroku上のHubotを指定します。

```
https://アプリ名.herokuapp.com/URI
```

今回は、Oraganization単位でGitHubのWebHookをセットしたので、
このようにしときます。

```
https://testhubot11.herokuapp.com/github/practiceDev-GitHub
```

**「Let me select individual events.」をクリックすると**
Webhookの対応イベント一覧が表示されます。
今回は、Issuesだけにチェックを入れます。

- **SECRET**は適当に設定し、メモ

## Heroku側の設定

**Hubotを起動する**
- 鉛筆マークをクリック
![checkResourceOnHeroku.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/c65211c4-7148-b01a-2bb4-aafd644558cc.jpeg)

- ●を右に寄せて、「confirm」をクリック
![startHeroku.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/ca751746-c73b-f38b-7b40-e8b2448f485e.jpeg)


**環境変数の設定画面を開く**
- 作成したHeroku上のアプリから「setting」を開く
- 「Reveal Config Vars」をクリック
![openConfigOnHeroku.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/9b3fb1b6-c942-5768-5cb6-82dfa0a0fa24.jpeg)

**環境変数を設定する**
メモしていたトークンとシークレットを記入する。
- HUBOT_SLACK_TOKEN：SlackのAPI トークン
- HUBOT_GITHUB_SECRET：GitHubのSECRET
 
![setConfigOnHeroku.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/5e05d188-ddfc-8252-e6b5-3fc293fae0ef.jpeg)

## Slack上で確認してみましょう！

- Botがアクティブになってますね！
![checkActiveBotOnSlack.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/9baf672c-b19b-8930-0c9e-f242cee4f08f.jpeg)

- 会話してみましょう！
![firstChatOnSlack.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/db414637-2a7d-5c63-c5ea-9a52389c6b4a.jpeg)

Hotから返信が来てますね！！！！

**botをチャンネルに追加**

- botの名前をクリック
- 「チャンネルにこのアプリを連携する」をクリック
- チャンネルを選び、「追加」をクリック

![addHubotToChanel.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/aac4bbed-7540-b431-63fe-0a92cafcd613.jpeg)

追加したチャンネルで・・・
![checkChanell.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/0f604db4-6662-ac8d-aeab-5899d3ca3f52.jpeg)


## GitHubでIssueが建ったら、Slackに通知！

まず、ファイルを用意します。

```shell
cd testHub/scripts
touch event.coffee
```

### さて、ここからプログラミングがやっと始まります。
coffee scriptで書きます。

1行目からは以下のように書いて下さい。

```coffeescript

module.exports = (robot) ->

  crypto = require 'crypto'
  cloneDeep = require 'lodash/cloneDeep'

  robot.router.post "/github/practiceDev-GitHub", (request, res) ->
   #このpostメソッドの中に、色々と記述する。
```

- ご自身のorganizationの名前を設定してください。

```coffeescript
  robot.router.post "/github/organizationの名前", (request, res) ->
```

- coffee scriptでは関数宣言できず、関数式しか使えないので、
最下部でメインロジックを書くことになります。

```coffeescript

    #=================メインロジック==========================
    try

      # 1. 設定を取得
      config = init(request)

      # 2. 認証する
      checkAuth = isCorrectSignature config
      console.log "checkAuth : #{checkAuth}"
      unless checkAuth?
        sendErrorResponse()("認証エラー")

      # 3. EventHandler有無をチェック
      event = config.event_type()
      handler = event_hanler_list(config)[event]

      unless event?
        sendErrorResponse()("#{event}：未対応イベント")

      # 4. EventHandlerを実行
      message = handler()

      # 5. レスポンスする
      sendResponse(message)

    catch e
      sendErrorResponse(e)()
```

**EventHandlerの実行部分**

- GitHubのWebhookに対応するイベント名で、関数を定義します。
- その関数の中で、slack上で表示するメッセージを作ります。

```coffeescript

    #===============slackのチャンネル=============================

    target_chanel = "#テス"

    #===============eventに対応するhanler=============================

    event_hanler_list = (config) ->

      body = config.req().body
      action = config.action()

      return {

        issues: () ->
          issue = body.issue

          #sendResponseのmessageとなります。
          return  """
                  #{issue.url}
                  <@#{issue.user.login}>さんがIssueを#{action}。
                  """
      }

```

**他のコードの部分については割愛します。**

[こちら](https://github.com/practiceDev-GitHub/testHubot/blob/master/scripts/event.coffee)でご確認してください。


## さて、Issueを建てて、試してみましょう！

設定したoraganizaiton内のレポジトリはなんでもいいので、
Issueを建ててみましょう！

![commentAboutIssueOnSlack.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/dac7ad86-4f00-a9da-fd7d-798a1355144b.jpeg)

**おお！Botからメッセージが来てますね！**

##　まとめ

少し記事が長くなりましたが、
ここまでで、GitHubとSlackをHubotで繋げることできました！

現状では、Issuesイベントしか対応させてませんが、
[他にもイベント](https://developer.github.com/webhooks/event-payloads/)はありますので、
一度、それらも試してみてください。