【Hubot Slack V4対応】Slackの全ch集約チャンネル(timeline)を作ってみた

みなさんSlack使っていますか？

自分はもうSlackの虜です。

## タイムラインチャンネルって何よ

簡潔に言うと、**全てのpublicチャンネルを１つのチャンネルに集約**し
**Twitter**のようなタイムラインを形成するチャンネルです。

以下の記事が参考になります。
・[Slackに #timeline channelをつくった話](https://qiita.com/kozyty@github/items/2a87bf7e652765b9967d)
・[Slack上にTimelineを形成して全チャンネルの発言をゆるく眺める](https://qiita.com/Vexus2/items/70a84b28c85fc9af14c7)

## 実際に導入して見た

npmのパッケージとして以下が出ていたのでこれを導入しようとしたら詰みました
・[npm - hubot-slack-timeline](https://www.npmjs.com/package/hubot-slack-timeline)
・[github - hubot-slack-timeline](https://github.com/vexus2/hubot-slack-timeline)

積んだところをご紹介します。

### 事前準備

・Heroku上でHubotを飼っている
・npmがインストールされている




## 🚨SLACK_API_TOKENを勘違いした【詰んだ】🚨

HubotのAPI_TOKENかと思いきや
SLACKのAPIのTOKENだったとは…。

以下取得方法をご紹介します。

### トークンキーを過去に作成したことがない場合

https://api.slack.com/web#authentication

<img width="1440" alt="スクリーンショット_2018-01-12_15_56_35.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/1b5e5c9d-7dd7-de74-b685-eabc60b0a0c6.png">

上記のリンクをクリックすると
[ Create Token ]
と言う部分が出ているはずなのでクリックすることでキーを発行することができます。

### トークンキーを発行したことがある場合

https://api.slack.com/custom-integrations/legacy-tokens

<img width="1440" alt="スクリーンショット_2018-01-12_16_00_10.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/1f119e2e-ee38-877c-29fd-2a15f6baedf3.png">


上記リンクをクリックすると
[ Create Token ]
と言う部分が出ているはずなのでクリックすることでキーを発行することができます。

### その後

herokuの方に以下のようなコマンドでtokenを登録してください。(webページからでも可能)

```
$ heroku config:add SLACK_API_TOKEN="発行したTOKEN"
```


## 🚨タイムラインbotの使い方が分からない【詰んだ】🚨

すごく初歩的なことだったのですが、
**タイムラインチャンネルに表示したいチャンネル上にhubotをinviteさせる**だけでした。

自分はtimelineチャンネルにもhubotをjoinさせてしまったせいで以下のような悲惨な状態になりました。
いわゆるループです。

<img width="1150" alt="スクリーンショット_2018-01-12_16_07_59.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/270c3fbf-b714-380a-ae16-52fb7c33613c.png">

## 🚨(at channel)がリンクされない【詰んだ】🚨

Hubot API V3からV4に変わったことにより
`channel = msg.envelope.room`ではIDを取得するようになりました。

その為素のhubot-slack-timelineではどうしようもないので変更する必要があります。

timeline.coffeeの以下の部分を追加することで対応することができます。

```diff:timeline.coffee
request = require 'request'
module.exports = (robot) ->
  robot.hear /.*?/i, (msg) ->
    channel = msg.envelope.room
+   room_name = robot.adapter.client.rtm.dataStore.getChannelGroupOrDMById(channel).name
    message = msg.message.text
    username = msg.message.user.name
    user_id = msg.message.user.id
    reloadUserImages(robot, user_id)
    user_image = robot.brain.data.userImages[user_id]
    if message.length > 0
      message = encodeURIComponent(message)
      link_names = if process.env.SLACK_LINK_NAMES then process.env.SLACK_LINK_NAMES else 0
      timeline_channel = if process.env.SLACK_TIMELINE_CHANNEL then process.env.SLACK_TIMELINE_CHANNEL else 'timeline'
-     request = msg.http("https://slack.com/api/chat.postMessage?token=#{process.env.SLACK_API_TOKEN}&channel=%23#{timeline_channel}&text=#{message}%20(at%20%23#{channel}%20)&username=#{username}&link_names=#{link_names}&pretty=1&icon_url=#{user_image}").get()
+     request = msg.http("https://slack.com/api/chat.postMessage?token=#{process.env.SLACK_API_TOKEN}&channel=%23#{timeline_channel}&text=#{message}%20(at%20%23#{room_name}%20)&username=#{username}&link_names=1&pretty=1&icon_url=#{user_image}").get()
      request (err, res, body) ->
```

上記のように修正することで
以下のようになります

#### Before
<img width="334" alt="スクリーンショット 2018-01-12 16.16.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/a40c5630-d0f6-3fbd-e886-1d464c656071.png">

#### After
<img width="469" alt="スクリーンショット 2018-01-12 16.17.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/3e17fb47-dfc2-499d-4d2f-83965961b59d.png">

## 最後に

このような素晴らしいnpmパッケージを公開してくれた`Hikaru Tooyama`さんありがとうございます。

良さそうなパッケージを見つけたら教えていただけると幸いです。