Togetter的な社内Slackまとめサイトをつくった話

<div class="alert alert-info text-center"><img src="https://qiita-image-store.s3.amazonaws.com/0/25109/d193e0b9-ca5c-3ba2-d5b9-34ee0456c356.png" width="16" height="18" alt=""> この記事は <a href="http://qiita.com/advent-calendar/2015/dwango">『ドワンゴ Advent Calendar 2015』</a>18日目の記事です。</div>

はじめまして、ティッシュ配り[^1]もするエンジニア @ru_shalm です。
今日は社内（非公式）ツール「Togelack」のお話をさせていただきます。

[^1]: RubyKaigi2015で「ニコナレ」のティッシュを配ってました。またどこかで配るはずなので、もらってない方は是非！

## Slackは最高にイカしたチャットツールだぜ
<img src="https://qiita-image-store.s3.amazonaws.com/0/25109/9ae15c1f-febe-a530-a42e-1d365dbf0344.jpeg" width="120">

[ドワンゴエンジニアブロマガ](http://ch.nicovideo.jp/dwango-engineer/blomaga/ar796480) などでも取り上げられていますが、ドワンゴではチャットツールとしてSlackが導入されています。Slackは最高にイカしたサービスでみんなから愛されており、社内には1000を超えるチャンネルやカスタム絵文字が存在すると言われているくらい幅広く活用されています。

## 埋もれゆく知見、そして神展開

日々行われる会話の中には、とても有用な情報が含まれていることもあります。ですが、チャットという性質上、次の話題が始まれば流れてしまいますし「あー、あれってどっかで話したよなー？どこだっけー？？」ということが稀によくあります。

もちろん、常日頃からそういった情報を整理して社内ブログなどにまとめる、ということができればベストなのかもしれませんが、内容を理解、整理、要約して記事に起こすというのは極めてハイコストな作業で、なかなか難しいです……
つまり、ローコストに会話のやりとりだけをいい感じにまとめるソリューションが求められているのです！！！


……というのは建前で、なんか面白い会話が行われたときにそれをまとめて残したいな〜〜と思っておりました。

## つまり？

Slack用のTogetterが欲しい！！！！！

## 社内Slackまとめサイト「Togelack」をつくりました
![togelack.jpg](https://qiita-image-store.s3.amazonaws.com/0/25109/3a46e2a9-5126-165a-8bb5-f4891a9f0b50.jpeg)

- ソース: [rutan/togelack](https://github.com/rutan/togelack)

社内（非公式）ツールとして作成したSlackまとめサービスです。

- Slackアカウントでログインしてまとめを作成可能
- 某Twitterまとめサイトを意識したとしか思えない2カラム編集UI
- ドラッグ&ドロップで発言の並び替えが可能
- 作成したまとめは自動的に任意のチャンネルにURLを放流

### 使い方イメージ
#### 1. まとめたい会話の先頭の発言に合わせて Copy link をクリック
![Copy link](https://qiita-image-store.s3.amazonaws.com/0/25109/6199d0d7-644d-a1fc-a6c7-c33cd4093d2f.png)

べんりになったね

#### 2. まとめ作成画面にコピーしたURLを貼り付け
![ペタリ](https://qiita-image-store.s3.amazonaws.com/0/25109/0369e762-818b-7499-1abc-6c09f871f1ce.png)

ペタリしてスポイトボタンをポチー

#### 3. レッツまとめ生活！
![まとめるぞ！！](https://qiita-image-store.s3.amazonaws.com/0/25109/81149d1a-5a61-8be9-2371-738b120a3aea.png)

右から左へドラッグ&ドロップしてまとめていきます。

### Togelackのなかみ
開発にはRailsとVue.jsを使用しています。
こういった社内ツール的なものを作るときは大体2〜3日くらいで動くものを仕上げたいので、バババ！っと開発するときに、RailsとVue.jsの組み合わせは結構いいんじゃないかなと感じています。最初はComponentとか分けなくても何とかなるし…（後でつらい）

ドラッグ&ドロップの実装には [vue-dnd](https://github.com/lain-dono/vue-dnd) を使っています。[Issueも立ってますが](https://github.com/lain-dono/vue-dnd/issues/3)ちょっと古めのライブラリなせいか、サンプルのまま使おうとすると動かなかったりなどハマりどころがあります。気をつけよう。

## SlackのAPIレスポンスが難解過ぎる

Slack関連アプリケーションを作成するときに必ずぶち当たる壁ですね。APIはあまりイカしてないイメージがあります……

### 難しい1：ユーザ名やチャンネル名が内部IDになってる
![謎文字列](https://qiita-image-store.s3.amazonaws.com/0/25109/1bbe2dbe-6cdf-3448-087e-2687519fed18.png)

誰だよ！

- [Formatting | Slack](https://api.slack.com/docs/formatting)

SlackではユーザIDは `Uxxxxxxx`、チャンネル名は `Cxxxxxx` のような内部で扱うためのユニークなIDが付いています。本文中に出てくるメンションやチャンネルリンクはAPIアクセス時は全て内部IDに置換された状態で返ってくるため、画面上にメッセージを表示するアプリケーションをつくる場合は自分で頑張って内部IDを置換する必要があります。

ちなみにこの部分、メッセージ種別によっては上のように `<@U12345|ru_shalm>` になったり、 `<@U12345>` だけになったりなど、様々なパターンに対応する必要があります。。。ｳｵｵｵｵ!!

### 難しい2：Markdownっぽい何か
![引用の謎](https://qiita-image-store.s3.amazonaws.com/0/25109/39192294-2ed8-1079-bbc8-ace6b08e7ae5.png)

blockquoteは先頭に `>` を付ける記法と、 `>>>` 以降を全部blockquoteにする記法があります。ですが、ここの二重引用になるロジックがかなり複雑です。
例えば下のように書いたらどういう見た目になると思いますか？

```
> hoge
>>>
٩(๑❛ᴗ❛๑)۶
> やったね
```

正解はこうです。

![正解](https://qiita-image-store.s3.amazonaws.com/0/25109/90530ad8-e525-f363-242d-1f953b87674d.png)

なんでや！

このMarkdownの謎と戦い、いい感じのHTMLに変換するGemをつくってます。未知のルールが多すぎて追いつけてないので、みなさんが知っている暗黒記法がありましたら教えて下さい。

- [rutan/slack_markdown](https://github.com/rutan/slack_markdown)

### 難しい3：日々APIが増えてる
今気づいたけどグループDMってなんだよｳｵｵｵｵｵ。Togelack対応してねぇよｵｵｵｵ!!

## まとめ
- Slackイカしてる！最高！
- Slackのまとめサイトつくった！最高！
- SlackのAPIつらい！助けて！ :pray: :pray: :pray:

以上となります。@ru_shalmさんの次回作にご期待ください。

## おまけ：favstarも欲しい！
<a href="http://niconare.nicovideo.jp/watch/kn885" target="_blank"><img src="https://qiita-image-store.s3.amazonaws.com/0/25109/c56d9e5e-db63-55ae-5adc-f1cbcc0e858b.png" alt="【世間は☆に厳しい】Slackのfavを集めるサービスが死んだ"></a>

Slackにはfav機能もあるので当然<del class="text-muted">fav爆したい</del>favが集まってる発言も見てみたいですよね！
というわけでSlackの社内favstarをつくった時の話を、今話題の<a href="http://niconare.nicovideo.jp" target="_blank">プレゼン共有サービス「ニコナレ」</a>で公開しています。こちらもよろしくね。

## 追記：Herokuへのデプロイ方法について
記事書きました。

- [SlackのTogetter風アプリ「Togelack」をHerokuにデプロイする - Qiita](http://qiita.com/ru_shalm/items/35100b527877cfe09b5e#_reference-c1aa5a6f960321384793)