Slackのremindに書いてあるヘルプ内容が分かりづらいので/remind_helpを作った話

## はじめに

Slackの`/remind`コマンドを使う機会が結構あると思うのですが、公式のhelpがイマイチ解りづらいので非公式ヘルプを表示するスラッシュコマンドを作ってみました。
ことの発端は弊社のPM(プロダクトマネージャ)からの一言「remindって便利だけど毎回使い方ググるんですよね(意訳」でした。

## スラッシュコマンドとは

`/remind` や `/polly` 、 `/me` など `/` から始まるコマンドのことです。

**スラッシュコマンドの例**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/00ddb343-90b3-8371-4959-7c7f02ea6141.png) 

## スラッシュコマンドの実装について

### 前提

* Googleのアカウント(G Suiteも可)を持っていること
* Slackのアカウントを持っていること

### スラッシュコマンドの実行環境について

今回は気軽にスラッシュコマンドを使う基盤として`GoogleAppScript(以降GAS)`を選択しました。
`GAS`と実行される流れについては[こちら](https://qiita.com/chikuwa111/items/7a1a349b82318a5861cc)の記事にまとまっているので細かく知りたい方は見てみて下さい。
※大体の人が再現できるように、導入しやすい基盤を選んだつもりです。

### GASの事前設定

#### プロジェクトの作成

https://script.google.com を開いて自分のプロジェクトページを表示します。
**※Googleアカウントにログインしている必要があります**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/e0c9851f-29aa-68e8-23b5-711fbb383a10.png)

`新しいプロジェクト`をクリックして、プロジェクトの設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/7ccb26be-d7b5-096a-bd76-f71856a45fd4.png)

#### プロジェクト名と主なコードの記述

以下を入力します。

* プロジェクト名: 任意（例: remind_help）
* main.gs: 以下のコードを入力する

```js
function doPost(e) {
  var VerificationToken = e.parameter.token;
  // AppのVerification Tokenを入れる。複数ワークスペースに登録する場合は判定条件を増やす。
  if (VerificationToken != '※後で設定するトークン※') {
    throw new Error('Invalid token');
  }

  var response_japanese = { text: '*/remind コマンドの基本フォーマット*\n\
```\n\
/remind [どの部屋で] [誰に] [メッセージ本文（必須）] [いつ（必須）]\n\
```\n\
`※[メッセージ本文]と[いつ]は順番を入れ替えても大丈夫です。`\n\
*[どの部屋で(任意)]*\n\
```\n\
#チャンネル名\n\
```\n\
*[誰に(任意)]*\n\
```\n\
@誰か or me(自分のみに通知したい場合)\n\
```\n\
`※メンショングループは指定できません。`\n\
*[メッセージ本文(必須)]*\n\
```\n\
メッセージ本文を書きます。\n\
```\n\
*[いつ(必須)]*\n\
```\n\
時刻、日付、何分後、曜日指定などを選んだり組み合わせて指定できます。\n\
・時刻指定　　　　  … at hh:mm （例：at 10:00）\n\
・日付指定　　　　　… on month day（例：on January 1）\n\
・時刻・日付指定　   … （例：on January 1 at 10:00）\n\
・ｎ（分〜ヵ月）後指定　… in number [minutes|hours|days|months] （例：in 3 minutes）\n\
・曜日指定　　　　　 … every [weekday|monday|tuesday|wednesday|thursday|friday|saturday|sunday]（例：every monday）\n\
・複数曜日指定　　　 … （例：evry monday, and friday）\n\
```\n\
*設定例*\n\
```\n\
/remind me 明日インフラ神様にランチ代返す\n\
/remind #テスト部屋 週次定例始めます every monday at 11:00\n\
/remind #テスト部屋 @here 月初定例始めます on January 1 at 11:00\n\
```\n\
' };  

  return ContentService.createTextOutput(JSON.stringify(response_japanese)).setMimeType(ContentService.MimeType.JSON);
}
```

#### 公開設定

1. ウェブアプリケーションとしての導入をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/95a36a6a-03ff-7e39-6268-83e947f7f2de.png)
2. 以下の通り公開設定を行う **※初回更改時は`導入` または `Deploy`と表示されます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/3f5d7c8c-c0f8-22d0-850c-eef43b1ec3cb.png)
3. APIのURLが生成されるのでメモしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/3180f0b8-7b04-738c-6cce-1a8622b47b79.png)

### Slack Appを作る

1. <https://api.slack.com/apps>にアクセスする
2. `Create an App`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/5cbd1f8e-35da-ec52-333c-6cf06def96d0.png)
3. 以下の情報を入力する
    * App Name
        * remind_help
    * Development Slack Workspace
        * remind_helpを導入したいワークスペース
4. `Create App`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/2d05e2e7-d043-52ee-c007-dcfaee0eddaa.png)
5. `Basic Information`が表示されるので`Slash Commands`をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/15638cdf-b38b-ebac-e369-47300a6913db.png)
6. `Slash Commands`が表示されるので`Create New Command`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/6f4b0782-c379-b455-630e-edcf672ef2c4.png)
7. 以下の情報を入力する
    * Command
        * /remind_help
    * Request URL
        * https://script.google.com/macros/s/****/exec
    * Short Description
        * details of /remind help
    * Usage Hint
        * [Enter]
8. `Save`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/f9cbb6b5-8bc2-3087-6357-225b2cfc8a5c.png)
9. `Basic Information`で`Add features and functionality`にチェックが入っていることを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/472e1dcd-ae17-c4e9-e197-694d60a34d2a.png)
10. `Install your app to your workspace`を展開し、`Install App to Workspace`ボタンを押してワークスペースに追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/77129979-b741-4c10-5693-ea11436967f6.png)
11. `許可する`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/d0c08e2e-23f3-24e7-8209-4b2b15da7eda.png)

ここまでで`Slack App`側の設定は一通り完了です。

### Slack Appの見た目を変える

`Basic Information`の`Display Information`からついでに見た目を変えておくとよいかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/e4226d5f-ffed-7d12-c640-b06fb4bc1081.png)

### セキュリティ(Verification Token)の設定

そのままだと誰でもAPIのURLを知っていれば実行できてしまうので、最低限のセキュリティ設定として`GAS`に`Verification Token`を設定します。

1. `Slack App`の`Basic Information`ページにある`App Credentials`の項目を確認する
2. `Verification Token`の項目をメモする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/c9f7f92a-d19a-a65f-0a18-003d6d6e4848.png)
3. 事前に作成した`GAS`側にトークン情報を書き込む

```js
function doPost(e) {
  var VerificationToken = e.parameter.token;
  // AppのVerification Tokenを入れる。複数ワークスペースに登録する場合は判定条件を増やす。
  if (VerificationToken != 'トークン') {
    throw new Error('Invalid token');
  }
```

4. ウェブアプリケーションとしての導入をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/95a36a6a-03ff-7e39-6268-83e947f7f2de.png)
5. `Project Version`を`New`に設定して`更新`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/3f5d7c8c-c0f8-22d0-850c-eef43b1ec3cb.png)
6. `OK`ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/cbbc58fa-7555-8313-ccbd-2027c240d339.png)

ここまででスラッシュコマンドの設定は完了です。

### /remind_helpコマンドのメッセージ

1. `/remind_help` コマンドを実行する
2. 以下の通りヘルプが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158971/23705ec6-8f71-9aec-e645-f56062e0eb5d.png)

## Tips

複数のワークスペースから実行する場合、以下の通り`Verification Token`を複数設定することで複数ワークスペースによる実行も可能です。

```js
function doPost(e) {
  var VerificationToken = e.parameter.token;
  // AppのVerification Tokenを入れる。複数ワークスペースに登録する場合は判定条件を増やす。
  if (VerificationToken != 'トークン1' && VerificationToken != 'トークン2') {
    throw new Error('Invalid token');
  }
```

## 参考リンク

以下の記事を参考にしているので、途中でなにか詰まったら以下の記事を読んでみると解決するかもしれません。

* Slash CommandsとGASでSlackのオリジナルコマンドをつくる
  * https://qiita.com/chikuwa111/items/7a1a349b82318a5861cc