【Slack】リアクションした人を取得するオリジナルコマンドを作る

株式会社アクシスのアドベンチャーカレンダー18日目の@aaari95です。


2020年9月に開発エンジニア未経験でアクシスに入社したのですが、
入社後一番驚いたのはSlackを使ったコミュニケーションの文化でした。

入社するまでSlackを全く使ったことがなかった私は、
オープンなコミュニケーションの形とSlackの多機能さに日々感動しています。

そんなSlackは自分でもコマンドを作れるらしい。
ってことでオリジナルコマンドを作ってみました！


<img width=50% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/ad4f808b-6a69-5488-1d66-7e10431674e7.png">

（殺風景な記事だなあと思いイラスト入れてみました。意味はありません。）



#今回のゴール
スタンプごとに押したユーザのリストをゲットできるスラッシュコマンドを作成する。

#### 背景
Slackのスタンプを使って参加アンケートを取る時に、
誰がリアクションしたかを一覧でほしいと思うことが多々あったので作ってみます。

#Slackスラッシュコマンドとは
そもそもSlackコマンドとは何なのか。
>スラッシュコマンドは特定のアクションのショートカットとして機能します。
>[参考：Slack公式](https://slack.com/intl/ja-jp/help/articles/201259356-Slack-%E3%81%AE%E3%82%B9%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89#u12473u12521u12483u12471u12517u12467u12510u12531u12489u12434u20351u29992u12377u12427)

##### 既存コマンドの例（ほんの一部）：
1. メンバーやチャンネルのためにリマインダーを設定する
``/remind [@メンバーまたは #チャンネル] to [何を] [いつ]``

2. 自分が設定したリマインダーのリストを表示する
``/remind list``

3. メッセージの最後に `¯\_(ツ)_/¯` を挿入する
``/shrug [メッセージ]``


`¯\_(ツ)_/¯`ってなんだこれ？って思ったら🤷🤷‍♂の意味なんですね。かわいい。


#実装

### 1.スラッシュコマンドの作成
参考：https://qiita.com/zama_8722/items/5893d968f120dad90f11
（参考記事が分かり易かった為、詳細は割愛）
1.GASで最低限のコードを実装

````js
function doPost(e) {
  return ContentService.createTextOutput("自作コマンドが使えているよ！");
}
````

2.ウェブアプリケーションとして導入から設定
3.Create New App > Slash Commands > Create New Commandからコマンドを作成
<img width=70% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/0adcb6aa-23d8-70e9-4701-9916ad5ebbb2.png">

4.アプリのインストール
5.スラッシュコマンドをSlackで使ってみる
<img width=50% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/9a542c3f-f44a-917d-9712-5c20a968381f.png">

これだけで自作のスラッシュコマンドが使えるようになりました！スゴイ簡単！


### 2．トークンを取得する
参考：https://note.com/kawa1228/n/nb0811ed44792
今回はSlack APIの[reactions.get](https://api.slack.com/methods/reactions.get)を使用します。
botトークンを採用し、スコープ`reactions:read`を追加
<img width=80% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/2d601696-5615-010f-9712-b5d9ce538d58.png">


### 3. APIを使ってリアクションした人を確認する
<img width=40% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/b24c79ac-14d3-91f2-6076-fec63aa69627.png">
↑にリアクションをしてくれたユーザを確認します。

参考：https://motosumi-quest.com/develop/slack-reactions-ge/
はじめに、参考記事に沿って作業進める中で発生したエラー達
(自分が手順を見落としてた部分も多いですが。。)

###### エラー1
```js
{
    "ok": false,
    "error": "missing_scope",
    "needed": "reactions:read",
    "provided": "chat:write,commands"
}
```
原因：設定が必要なスコープが足りてなかった
解決：[https://api.slack.com/apps](https://api.slack.com/apps)からスコープを再追加する

##### エラー2

```js
{
    "ok": false,
    "error": "no_item_specified"
}
```
原因と解決：チャンネルとタイムスタンプの指定は必須

エラー3

```js
{
    "ok": false,
    "error": "not_in_channel"
}
```

原因：アプリをチェンネルに追加していないため
解決：チャンネル内の「アプリを連携させる」からアプリを追加する

##### これらのエラーを解消して「Test Method」をクリックしてみると
<img width=70% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/8daadfc0-29f3-8a65-598b-220abb58b3fd.png">

成功！ユーザIDは取得できました！

```js
        "reactions": [
            {
                "name": "slightly_smiling_face",
                "users": [
                    "A01234567", //ユーザID
                    "A01234567"
                ],
                "count": 2
            },
            {
                "name": "heart",
                "users": [
                    "A01234567",
                    "A01234567"
                ],
                "count": 2
            },
            {
                "name": "v",
                "users": [
                    "A01234567"
                ],
                "count": 1
            }
        ],
```
### 4. コマンドと連携する
```js

var TOKEN = "トークン";
var url_base = "https://slack.com/api/reactions.get?token=";

function doPost(e) {  
  var url = e.parameter.text;
  var channel = url.substr(-29,11);
  var timestamp= url.substr(-16,10) + "." + url.substr(-6,6);
  var url_return = url_base + TOKEN + "&channel=" + channel + "&timestamp=" + timestamp + "&pretty=1";
  
  return ContentService.createTextOutput(url_return);
}
```

トークンはURLのパラメータとして渡す必要があります。
ここに躓いて時間がかかってしまいました。。

#動かしてみる
![スクリーンショット 2020-12-17 22.56.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/697384/c9e9bd65-c6a1-0593-81f3-603476897001.png)

`/reactions`コマンドにリアクションを取得したいメッセージのURLを添えて送ると、
リアクションした人一覧を確認できるURLを返すコマンドができました。

#まとめ
まだまだ最低限の機能で今後改善の余地しかありませんが、
Slackのトークンの設定やAPIを使ってみるなど初歩的な理解ができていなかった部分を学ぶことができました。


これからもSlackの可能性を探っていきたいです！
（オススメのSlackAppや機能があれば教えて下さい）