SlackのSlashコマンドでSpreadsheetのGASを実行する方法

# 最初に
- SlackのSlashコマンドからSpreadsheetのGASウェブアプリを実行する方法を解説します
- サンプルのSpreadsheetやGASのソースコードも公開しますので、ご参考にして下さい

# おすすめの読者
- 業務でSlack, Google Spreadsheetを使う人
- Spreadsheetの集計情報をSlack上から気軽に取得したい人

# 手順
- Slackアプリを作成する
- SpreadsheetのGAS関数を「ウェブアプリ」として公開する
- SlackアプリにSlashコマンドを作成し、GASウェブアプリのURLを登録する

# Slackアプリを作成する
Slashコマンドを登録するにはSlackアプリが必要になるのでまずは作成します

- Slack APIのYour AppsページでCreateAppを押下します
https://api.slack.com/apps

- 必要情報を入力します
<img width="600" alt="cf6270d7-dd52-a65f-9292-6ec701ba394c.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/cf6270d7-dd52-a65f-9292-6ec701ba394c.png">

- Install to Workspaceを実行します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/13705599-6e1f-e7de-a7eb-249f0e229331.png)

- Verification Tokenを控えます
  - SpreadsheetのGASで使用します
![FireShot Capture 115 - Slack API_ Applications - Sample Slack - api.slack.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/91ad895b-ffa5-e206-9b54-fd566f130449.png)

※　本来はSigning Secretを利用することが推奨されています[^1]が、GASウェブアプリではHTTP Header情報が扱えません[^2]
※　そのため、`Verification Token`を用いた認証を行います

[^1]: https://api.slack.com/authentication/verifying-requests-from-slack
[^2]: https://developers.google.com/apps-script/guides/web?hl=ja

# SpreadsheetのGAS関数を「ウェブアプリ」として公開する

## Spreadsheetの内容
- 所属する[ENECHNAGE](https://enechange.co.jp/)のランチ手当用のSpreadsheetを模しています
  - ENECHANGEのランチ手当については、[こちらのブログ](https://tech.enechange.co.jp/entry/2023/03/06/153902#%E3%83%A9%E3%83%B3%E3%83%81%E6%89%8B%E5%BD%93%E3%81%A8%E3%81%AF)をご覧ください
- 当月のランチ手当の利用回数が左側に、誰と行ったかの情報が右側にまとめられています
  - [実際のSpreadsheetはこちら](https://docs.google.com/spreadsheets/d/1dpT0pEROgiv3Wkv91ZdlJdWYNk5XLn465cKCUOOS8zg/edit#gid=0)です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/a4b16f62-b9ad-525c-c2d2-fb5acc2cf181.png)

## SpreadsheetにGAS関数を追加します
ソースコードはGithubに公開しますので、ここではポイントだけ記します

### doPost(e)関数を定義し、認証を行う
- 関数名は`doPost(e)`である必要があります[^3]
[^3]: https://developers.google.com/apps-script/guides/web?hl=ja

- 認証はSlackアプリで確認したVerification Tokenで行います

```js
const doPost = e => {
  checkAuthentication(e);
}

const checkAuthentication = e => {
  const verificationToken = PropertiesService.getScriptProperties().getProperty("SLACK_VERIFICATION_TOKEN");

  if (verificationToken != e.parameter.token) {
    throw new Error('Invalid token');
  }
}
```
- `SLACK_VERIFICATION_TOKEN`は「スクリプト プロパティ」として以下から設定できます
  - 「プロジェクトの設定」→「スクリプト プロパティ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/82f093e8-ed03-d31c-fd4f-d1e44e3d18d0.png)

### Slashコマンドで入力したテキストを取得し、値を返却します
```js
  const userName = e.parameter.text;

  //省略

  const response = {text: answer};
  return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
```

### ソースコード
https://github.com/RyuyaIshibashi/slack-slash-gas-sample

## GASを「ウェブアプリ」として公開します
- 「デプロイ」→「新しいデプロイ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/12a2f49a-2f08-8e1c-704f-3679ef01d2f2.png)

- 「種類の選択」→「ウェブアプリ」→「デプロイ」をクリック
  - アクセスできるユーザーは「全員」とする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/4fb46aa0-4c9e-e58d-75a8-65e0f2012f8d.png)

- ウェブアプリのURLを控える
![FireShot Capture 004 - lunch_allowance - プロジェクト編集者 - Apps Script - script.google.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/842aecae-7139-7930-ef78-edc7ccdb1b8b.png)


# SlackアプリにSlashコマンドを作成し、GASウェブアプリのURLを登録する
- 「SlashCommands」→「Create　New　Command」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/819efd73-dd66-f017-a19f-889a87204a82.png)

- 必要情報を入力する
  - Request URLにはGASウェブアプリのURLを入力して下さい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/98b552d1-61cf-094f-05c3-b43357014245.png)

## Slack上での操作
以下のようにSlashコマンドが使えるようになりました🎉

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/183b608b-3ac6-a673-f2f3-9fe6be60f220.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/3feade65-9049-3ac9-1403-c25684a6e28e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643664/1bdf28da-e70e-5076-4335-a05cbd4ae3a7.png)