この記事はこんな方向けです！

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

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

コードはこちら

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

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

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

いくつか記事を分けます

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

基礎
1. OrganizationとTeamを作ってみる
2. Projectを作ってみる
3. Issueを作ってみる
4. 他人を招待し、権限付与

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

事前準備

Slackのワークスペースを持っていること ⇒ 持ってない場合はここ
GitHub上にHubotのコードがあること
Heroku上にHubotアプリがデプロイされている

Slack側の設定

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

画像の四角部分をクリック
遷移先で「Slackに追加」をクリック
ボットの名前を決めて、「Hubotインテグレーションの追加」
API トークンをメモ

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

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

GitHub側の設定

作成したOrganazaitonの「setting」→「webhook」を開く

設定する
- 緑の下線の通りに設定
- 最後に一番下の「Add WebHook」をクリック

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を起動する
- 鉛筆マークをクリック

●を右に寄せて、「confirm」をクリック

環境変数の設定画面を開く
- 作成したHeroku上のアプリから「setting」を開く
- 「Reveal Config Vars」をクリック

環境変数を設定する
メモしていたトークンとシークレットを記入する。
- HUBOT_SLACK_TOKEN：SlackのAPI トークン
- HUBOT_GITHUB_SECRET：GitHubのSECRET

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

Botがアクティブになってますね！
会話してみましょう！

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

botをチャンネルに追加

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

追加したチャンネルで・・・

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

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

cd testHub/scripts
touch event.coffee

さて、ここからプログラミングがやっと始まります。

coffee scriptで書きます。

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


module.exports = (robot) ->

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

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

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

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

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


    #=================メインロジック==========================
    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上で表示するメッセージを作ります。


    #===============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}。
                  """
      }

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

こちらでご確認してください。

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

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

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

　まとめ

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

現状では、Issuesイベントしか対応させてませんが、
他にもイベントはありますので、
一度、それらも試してみてください。

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