新人がGASを使ってSlackのスラコマとbotを作ってみた！

この記事は株式会社富士通システムズウェブテクノロジーが企画する[いのべこ夏休みアドベントカレンダー 2020](https://qiita.com/jugemsan/items/5761773308fb1df0c23a)の5日目の記事です。本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

#はじめに
7月末で約4か月の研修が終わり、8月から配属となった新人がSlackで遊んでみました。
Slackのコマンドやbotを作ったことが無い、GASを触ったことが無い状態でも簡単に作成できたので作成手順をまとめてみます。

#今回やってみたこと
####コマンド作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/57b8c9d0-9375-53b0-4f48-127a6d2cff2f.png)
####ボタン選択式botの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/a4b3357c-41e0-4251-0882-75862bd82251.png)
####ボタンに合わせた画像表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/d23b64c7-5e2e-806b-4166-d146e2bd2a39.png)

コマンドを叩くとボタン選択式botが出現し、ボタンによって表示される画像を変えています。
AWS LambdaやGoogle Cloud Functionsなどの有料サービスでも作成できますが、今回は無料で手軽に使えるGASを選びました。

#手順
- Slack Appの作成
- GoogleDriveの設定
- GASでスクリプトを2つ作成
- Slack AppとGASを連携

#Slack Appの作成
[SlackAPI](https://api.slack.com/apps)へアクセスし、`Create New App`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/448fd7e4-a218-4a6d-c89a-8b5cd8dc39a8.png)

bot名とbotを導入するワークスペースを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/8c69cf35-4243-5b88-37b9-c62189cb8e9f.png)

今回はtestAppを作ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/11b17b25-29a0-4ae8-a0c0-46b0ac22b9d8.png)

####権限の設定
Basic Informationの右下にある`Permissions`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/0a2abde0-d728-b2fb-3f16-cd4e28d5c9be.png)

Bot Token Scopesに`chat:write`と`chat:write.public`を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/139aecb3-e7a5-b402-5bbd-74b6b7d58316.png)

####トークンの取得
Basic Informationの真ん中あたりにApp Credentialsがあります。
その中の`Verification Token`をコピーしてメモに残しておきます。
![スクリーンショット (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/59fe511b-c72a-b524-2a30-f21f88b6d32b.png)


#####これでSlack Appの作成は完了です！

#GoogleDriveの設定
今回は選択したボタンに応じて画像を表示させたいので、あらかじめGoogleDriveに画像を保存しておきます。

####公開用URLの取得
botで画像を表示させるためには公開用URLの取得が必要になります。

- 表示させたい画像を右クリック→共有可能なリンクを取得
- リンクをコピーしてメモに残しておく
- 制限付き→リンクを知っている全員に変更して完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/031ff74f-7866-53e3-d118-506ef7c91145.png)

####参照用URLの作成
先ほど取得した公開用URLを使用してもSlackで画像が表示されません。
そのため、メモに残しておいた公開用URLを参照用URLに書き換えます。

参照用URLの作成は以下の記事を参考にしました。
[Google Drive上のファイルに直接アクセスする](https://qiita.com/rot-z/items/299ac40361690c51ce1d)


#Google App Scriptでスクリプトを作成

####スクリプト1を作成
[GAS](https://script.google.com/home)にアクセスし、新規プロジェクト作成します。

以下のコードを入力してください。
※★の部分には、Slack App作成時にコピーしておいたTokenを入力

<details><summary>スクリプト1のコード（クリックして開く）</summary><div>

```
function doPost(e) {
  var slack_token = '★'; //Verification Token
 
  if (slack_token != e.parameter.token) {
    throw new Error(e.parameter.token);
  }
  
  var data = {
    "response_type":"in_channel",
    //アタッチメント部分
    "attachments": [{
      "title": "好きな動物を選んでください",
      "text": "Please select animals.",
      "fallback": "animal", 
      "callback_id": "callback_button",
      "color": "#00bfff",
      "attachment_type": "default",
      "actions": [
        {
          "name": "dog",
          "text": "犬",
          "type": "button",
          "value": "dog"
        },
        {
          "name": "cat",
          "text": "猫",
          "type": "button",
          "value": "cat"
        },
        {
          "name": "rabbit",
          "text": "うさぎ",
          "type": "button",
          "value": "rabbit"
        }
        ]
      }]
  };
  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON);
}
```

</div></details>

####GASを公開
コードの入力が終わったら`公開`→`ウェブアプリケーションとして導入`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/23464afc-1606-eb95-eb2d-458f1ef9530a.png)

Deploy as web app画面で以下を選択します。

`Project version`→New
`Excecute the app as`→Me(メールアドレス)
`Who has access to the app`→Anyone, even anonymous
![スクリーンショット (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/c449343e-5d22-d7eb-6ac9-598e4eb789ed.png)

Deploy または 更新をクリック後、表示されたURLをコピーしてメモに残しておきます。
![スクリーンショット (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/cf06f169-68bc-c068-7965-d0274218e38e.png)

#####これで1つ目のスクリプトが完成です！

####スクリプト2を作成
2つ目のスクリプト作成のため、再度GASで新規プロジェクトを作成します。

以下のコードを入力してください。
※☆にはGoogleDriveの参照用URLを入力

<details><summary>スクリプト2のコード（クリックして開く）</summary><div>

```
function doPost(e) {
  var payload = JSON.parse(e["parameter"]["payload"]);
  var value = payload["actions"][0]["value"];
  var dog = "☆"; //参照用URL
  var cat = "☆"; //参照用URL
  var rabbit = "☆"; //参照用URL
  
  if (value == "dog"){
    var reply = {
      "attachments": [
        {
        "title": "犬の写真",
        "fallback": "dog",
        "callback_id": "callback_button",
        "image_url": dog,
        "color": "#00bfff",
        "attachment_type": "default",
        }
      ]
    };
  }
  
  if (value == "cat"){
    var reply = {
      "attachments": [
        {
        "title": "猫の写真",
        "fallback": "cat",
        "callback_id": "callback_button",
        "image_url": cat,
        "color": "#00bfff",
        "attachment_type": "default",
        }
      ]
    };
  }
  
  if (value == "rabbit"){
    var reply = {
      "attachments": [
        {
        "title": "うさぎの写真",
        "fallback": "rabbit",
        "callback_id": "callback_button",
        "image_url": rabbit,
        "color": "#00bfff",
        "attachment_type": "default",
        }
      ]
    };
  }
    return ContentService.createTextOutput(JSON.stringify(reply)).setMimeType(ContentService.MimeType.JSON);
}
```

</div></details>

1つ目のスクリプトと同様に、Deploy→URLをコピーしておきます。

#####これで2つ目のスクリプトも完成です！

#Slack AppとGASを連携
####Slash Commandsの作成
Basic InformationのSlash Commandsをクリックします。
![スクリーンショット (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/bfaa970d-4f11-1cae-1113-9f49531eb7b8.png)

Create New Command画面でコマンドの名前や説明文を入力します。
※`RequestURL`にはコピーしておいたスクリプト1のURLを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/20de8735-ac01-ee13-e857-da0a42147f21.png)


####Interactive Componentsの設定
Basic Information内のInteractive Componentsをクリックします。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/66838d8b-eafd-5c18-9bfe-9a9db7ec5995.png)

Interactive ComponentsをONにします。
※`RequestURL`にコピーしておいたスクリプト2のURLを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/441ab976-2936-1369-8130-c6e9d1adc9c5.png)

####ワークスペースにAppをインストール
Basic Informationで`Install App to Workspace`をクリックします。
![photo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/fbd4302b-f3e5-91f3-76b0-f1f4d76b7c1f.png)

#####確認画面が出てくるので`許可する`をクリックすれば完成です！

####動作確認
Slackでコマンドを叩いてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/b0f7ca28-e58f-bc55-1b66-8b28328f6b9a.png)

`犬`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/cd0b9bca-35d6-ad7a-d5c4-ae3cec0e5b0b.png)

画像が表示されました！
再度コマンドを叩いて、`猫`をクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/98c091bb-37ad-0ee4-442d-4e0b8be07028.png)

猫の画像が表示されました！

`うさぎ`をクリックすると、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700712/9b15bd23-abd5-7ec8-e46f-71bcefe28a9d.png)



#終わりに
初めてSlackのコマンド・bot作成をしてみましたが、思っていたよりサクッと作れました。
今後はもう少し機能拡充したbotも作成してみたいです。