図解: Travis CIの結果をSlack通知する方法

## とても参考になる記事

* [Travis CIとSlackの連携](http://qiita.com/matsuda/items/01707c74c2423958a273)
* [SlackでTravisCIからの通知を受け取る](http://qiita.com/kitaro_tn/items/c3118747fbd14012225e)
* [Travis CIのbuild結果をSlackに通知する](http://qiita.com/vmmhypervisor/items/b6cd3f8db7b434fbb933)

## いい記事がすでにあるのになぜ書くのか？

個人的に、Slackの設定画面やメニューを選択するときに、いつもどこにあるか迷ってしまって時間がかかるので、
そうならないように、画像多めでやり方をメモします。

あと、破壊的な`.travis.yml`の変更をせずにする方法の紹介です。

## 本題

まずは、ブラウザで https://\<slack-team-name\>.slack.com/apps を開きます

（僕の場合はぼっちチームなので\<slack-team-name\>が「nwtgck」というチーム名になので、https://nwtgck.slack.com/apps です）
![Screen Shot 2017-08-25 at 9.42.28 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/029423aa-add4-a1c3-5945-918ba9fb479c.png)

「travis」と打ち込ので、出てきた「Travis CI」をクリックします

![Screen Shot 2017-08-25 at 9.42.39 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/59b1ebe5-7fe1-6862-d8c4-71d188dfcf70.png)

クリックすると、以下の画面になるので、緑色のボタン[Add Configuration]をクリックします
![Screen Shot 2017-08-25 at 9.42.47 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/814299e4-ba7c-1ef4-69ca-5f1170085d67.png)


チャンネル選択画面になります

![Screen Shot 2017-08-25 at 10.30.28 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/81c6b002-44d7-7a5d-299e-a2f259e435bf.png)

（任意）新しいチャンネルを作りたい場合は、
青字のリンク「or create a new channel」をクリックします。すると以下の画面になるので、今回は#ciチャンネルと言う名前でチャンネルを作りました


![Screen Shot 2017-08-25 at 9.43.41 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/83b88b7a-fa1f-7a91-5f45-953e03b5347d.png)


通知先のチャンネルを選択して、[Add Travis CI integration]をクリックします

![Screen Shot 2017-08-25 at 10.28.41 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/4181e17b-c66f-5f8d-17de-cefea23cfebd.png)

クリックすると、以下のような画面になります

![Screen Shot 2017-08-25 at 10.34.44 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/5f40d69a-f507-b03c-ae8d-333c7d4b0f1b.png)

この画面にをスクロールするとTokenがあるのでどこかにコピーします
あとで使います


![Screen Shot 2017-08-25 at 9.44.31 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/97e74f7f-542e-b29a-a5a2-711aec8c2b47.png)
（Tokenが丸見えで心配な方もいらっしゃるかもしれませんが、Regenrateしたので大丈夫なはずです）


今度はターミナルを開いて

```sh
$ gem install travis
$ travis login # ユーザー名とパスワードを入力してください
$ travis encrypt -r <github-username>/<repo-name> "<slack-team-name>:<token>"
```


そして、以下の`travis encrypt`の出力結果の`secure: "R2ZgE3wUsc..`の箇所を使って、

```
Please add the following to your .travis.yml file:

  secure: "R2ZgE3wUsc...（省略）....
```

.travis.yml`に下記を追記します

```yaml:.travis.yml
...(略)...
notifications:
  slack:
    secure: "R2ZgE3wUsc...（省略）....

```
（`notifications`キーは.yamlの直下に配置する感じです）

具体的には`travis encrypt`のところは、以下ような感じです。
`travis encrypt -r nwtgck/hspec-prac-haskell "nwtgck:XXXXXXXXXXXX"`
（僕の場合はGitHubのユーザー名とSlackのチーム名が一緒なので注意してください）


これで完了です。次pushした時に、Slackに通知が来てたら成功です。


## おまけ

### メール通知無効化設定

`.travis.yml`に`email: false`を追加すればメール通知をオフにできます。

```yaml:.travis.yml
...(略)...
notifications:
  email: false
  slack:
    secure: "R2ZgE3wUsc...（省略）....

```

### 破壊的な.travis.ymlの更新について

`travis encrypt`に`--add notifications.slack`オプションを付けて、プロジェクトルートで実行すると、自動的に`notification.slack.secure`項目を追加しくれるのですが、`.travis.yml`のコメント等が消えてしまうので、避けています。


### Tokenが後から欲しい時

Tokenの画面を閉じってしまったときに、どうやって辿ればいいかです。
作ったときと最初だけ同じ感じです。

まず、ブラウザで https://\<slack-team-name\>.slack.com/app を開きます。
「travis」と打ち込んで、出てきた「Travis CI」をクリックします

![Screen Shot 2017-08-25 at 9.42.39 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/59b1ebe5-7fe1-6862-d8c4-71d188dfcf70.png)

クリック後にこの画面になったら、スクロールして、
![Screen Shot 2017-08-25 at 9.42.47 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/1025a9a1-b62a-1922-3e28-d4d37b2f39e6.png)
（レスポンシブデザインなので、画面サイズによっては、スクロールせずに下のえんぴつボタンが押せます）

以下のえんぴつボタンを押せば、Tokenの手に入る画面に行きます。
![Screen Shot 2017-08-25 at 10.41.28 am.png](https://qiita-image-store.s3.amazonaws.com/0/84451/477f5be0-b7cc-3ae4-ea38-defd42c034f6.png)