GASで作るSlack Slash Commands入門

## Slack Slash Commandsとは？
Slack Slash Commands（以下、スラッシュコマンド）は、Slackのメッセージの入力ボックスに `/` から始まる特定の文字列を入力することで起動するアプリケーション。元々実装されているものとして、Slackのログイン状態を変更する `/away` や `/active` などがある。
今回はGAS（Google Apps Script）でスラッシュコマンドを初めて作成したので、作り方を、備忘録として作成する。
## GASの実装・公開
### プロジェクトの作成
1. [G Suite Developer Hub](https://script.google.com/home)にアクセスする。
2. [新しいプロジェクト]を押下して、プロジェクトを作成する。

プロジェクト名などはお好みで決めてください。

### 必要最低限必要なコード

```javascript:サンプルコード
function doPost(e) {
  return ContentService.createTextOutput("返したいテキスト");
}
```

細かいこと置いておけば、とりあえずこれで動くことには動く。詳細は以下に記載。

#### `doPost(e)` メソッド
任意のメソッド名ではなく、必ずこうでないとだめ。 `doPost(e)` メソッドは、GASに標準で実装されるメソッドで、POSTでリクエストが投げられると、このメソッドが自動的に動く（GETが飛んできたら `doGet(e)` が動く）。引数にはリクエスト内容が含まれている。

#### `ContentService.createTextOutput(text)` メソッド
これもGASに標準で実装されるメソッド。テキストコンテンツを作成する。これを `return` しているので、要はテキストを返しているだけ。

### Webアプリケーションの公開
スラッシュコマンドでこのコードを使用できるようにするには、作成したGASコードをWebアプリケーションとして公開する必要がある。まずは、上記のサンプルコードで公開してみる。

1. [公開]->[ウェブアプリケーションとして導入...]を押下する。
![fig1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/e49d30be-a07f-a7c6-d620-98579d97e3e5.png)
2. 以下のように設定し、[Deploy]を押下する。
	* 他のサイトを見ていて、自分だけなぜ英語なのかよく分かんない…
![fig2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/5a62d292-9ffd-0fd4-bfab-18a80d9425c7.png)
3. デプロイが完了し、URLが発行される。後で使うので控えておく。

## Slack APIでアプリの作成・インストール
### アプリの作成
1. ワークスペースにサインインした状態で[Slack API](https://api.slack.com/apps)にアクセスする。
2. [Create New App]を押下する。
3. アプリケーション名とアプリを作成するワークスペースを設定し、[Create App]を押下する。また、ここで設定したワークスペースにインストールすることにもなる。
![fig3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/60ecd11f-cafb-6b79-8ccb-574c2c635cb2.png)
4. 「Add features and functionality」の[Slach Commands]を押下する。
![fig4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/b1b2f505-c5ca-0809-61e8-81000b879a53.png)
	* 次の画面に出てくる[Create New Command]も押下する。
5. スラッシュコマンドの作成に必要な情報を入力していく。
![fig5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/f2c2fd25-3f42-99cc-e672-2afef6e2fda9.png)
上から順に、

|項目名|入力する内容|
|:---:|:---|
|Command|実際に使用するコマンドの単語を何にするか|
|Request URL|さっきのGASのURL|
|Short Description|補完で表示される簡単な説明|
|Usage Hint|引数があればそのヒント|

となる。Request URL以外は下にプレビューが表示されるので、迷うことはないと思う。

入力が完了したら[Save]を押下する。

###アプリのインストール
1. 左のメニューから[Install App]を押下する。
2. [Install App to Workspace]を押下する。
3. アクセス許可の可否が出るので[許可する]を押下する。

これでインストールが完了です。

## 実際に動かしてみる。

入力していくと、
![fig6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/9988c12e-0db6-f9dc-677f-f0c1e4f4aaae.png)
このように補完が出てくる。今回のコマンド `/example` を入力して実行すると、
![fig7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/fd2e1586-90c4-bcde-3bcb-82cd054ad4f7.png)
このように「返したいテキスト」が返信された。

## 最後に：もっとアプリケーションらしくする
今のままでは、何をどうしても「返したいテキスト」しか返ってこない。そこで、引数に入力したURLをBitlyで短縮URLを作成して返してくれるアプリケーションを作成してみる。

### Bitly APIアクセストークンの取得
1. Bitlyに登録後、[https://app.bitly.com/](https://app.bitly.com/)にアクセスする。
2. 右上のメニューから自分のユーザ名を押下する。
3. [Generic Access Token]を押下する。
4. パスワードを入力し、[GENERATE TOKEN]を押下する。

作成したトークンは下のコードの `(BitlyAPIアクセストークン)` に入力する。

### GASの実装
```javascript:GASコード
/*Bitlyアクセス情報*/
var BITLY_TOKEN = "(BitlyAPIアクセストークン)";
var req_base = "https://api-ssl.bitly.com/v3/shorten?access_token=";

function doPost(e) {
  /*作成したアプリからのリクエストか*/
  if (e.parameter.token === "(Verification Token)") {
    /*引数の取り出し*/
    var url = encodeURIComponent(e.parameter.text);
    /*Bitly APIへのアクセス*/
    var request = req_base + BITLY_TOKEN + "&longUrl=" + url;
    var response = UrlFetchApp.fetch(request, {
      "method" : "GET",
      "contentType" : "application/json;"
    });
    var json = JSON.parse(response.getContentText());
    /*結果の返却*/
    return ContentService.createTextOutput(json.data.url);
  }
}
```
コード内の `(Verification Token)` には、Slack APIの作成したアプリのコンソール内にある「Basic Information」から「Verification Token」をコピーして貼り付ける。そうすることで、「このリクエストは、作成したスラッシュコマンドからなのか？」がわかることができる。リクエスト内容からは、 `e.parameter.token` でVerification Tokenを取り出すことができ、一致すれば、作成したアプリからのアクセスとなる。
![fig8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/533da3f8-cd3d-ad6e-b2b3-65b66a5b3359.png)
また、入力した引数は `encodeURIComponent(e.parameter.text)` 取り出すことができるので、これを使用して、短縮URLを作成することとなる。

#### 更新時の注意
GASコードを書き換えると、再びWebアプリケーションの公開が必要となる。
[公開]->[ウェブアプリケーションとして導入...]までは同様だが、更新時は、Project versionが数字になっている。ここはコンボボックスから[New]にする必要がある。
最後に[更新]を押下し、新しいURLをSlackAPIの既存アプリケーションのURLと置き換える。

### 動作確認
写真のメッセージ入力欄のように入力し実行すると、短縮URLを返してくれた。
![fig9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163288/bd37c514-bd99-2bfb-f5a4-c4e510216485.png)