Google Apps Scriptを利用して、Slackチャンネル参加時にWelcomeメッセージを送信する

## TL;DR
<font color="Red">***zapierという便利なツールがあります :rolling_eyes:***</font>
SlackとかGASとかのバージョンの違いでつまづいた場合はこれを見るといいと思います。
https://www.youtube.com/watch?v=YOHsH8AnNgg

## 完成形
![sample.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/42587/ca563250-e843-da72-d3d5-7a3c13d79d51.gif)

## 参考
[Slack API 公式doc](https://api.slack.com/)
[SlackのEventAPIとGASを利用して、特定のチャンネルにjoinするとwelcomeメッセージを表示するBotを作ってみた](https://note.mu/yuickomori/n/n1a0e36e73b6e)
[Slack BotをGASでいい感じで書くためのライブラリを作った](https://qiita.com/soundTricker/items/43267609a870fc9c7453)

## やってくぞー
### Slack Appの作成
https://api.slack.com/apps

"Create New App"をクリックし、"App Name","Development Slack Workspace"を入力。
<img width="571" alt="スクリーンショット 2019-03-22 21.52.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/4c1cd208-ad9a-a868-523a-f86c676d2dbd.png">

### Bot Userの作成
サイドバーから"Bot Users"を選択し、"Add a Bot User"をクリック。
パラメータはそのまま"Add Bot User"でOK。
<img width="710" alt="スクリーンショット 2019-03-22 21.55.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/afa56631-67f6-cbaf-5631-529094ef47da.png">

***<font color="Red">この画面は開いたままにする。</font>***

### Google Apps Script(GAS)の作成
Google Driveを開き、新規>その他>Google Apps Scriptを選択する。
その他の中にGoogle Apps Scriptがない場合は、"アプリを追加"から接続する。

一旦バリデーション用のコードを記述する。

```javascript:コード.js
function doPost(e){
  var params = JSON.parse(e.postData.getDataAsString());
  return ContentService.createTextOutput(params.challenge);
}

function doGet(e){
  doPost(e);
}
```

### GASの公開
1. "公開"タブ>ウェブアプリケーションとして導入

<img width="454" alt="スクリーンショット 2019-03-22 22.25.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/543bff86-2c69-0688-17fd-69c9d7dc846f.png">

<font color="Red">
***必ず、プロジェクトバージョンはNew、アプリケーションにアクセスできるユーザには全員（匿名ユーザーを含む）を選択すること。***
***2回目以降はプロジェクトが更新されなかったり、SlackからGASを実行できなくなったりする。***
</font>

2. "導入"ボタンをクリックすると以下のページが出るので、"現在のウェブアプリケーションのURL"をコピーしておく。

### Event Subscriptionsの設定

1. Slack Botのページに戻り、サイドバーから"Event Subscriptions"を選択する。
2. "Enable Events"の横のスイッチをONに変更する。
3. Request URLにコピーしたURLを入力すると、Verifiedという緑文字が出る。

<font color="Red">***これが出なければ、なにかおかしいので見直す***</font>
<img width="713" alt="スクリーンショット 2019-03-22 22.44.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/f0cd0a5c-440c-e744-acbe-7caed2a7f01f.png">

4. "Add Bot User Event"をクリックし、"member_joined_channel"を選択する。
5. "Save Changes"をクリックする。

### GASを変更

```javascript:コード.js
function doPost(e){
  var token = PropertiesService.getScriptProperties().getProperty('SLACK_ACCESS_TOKEN');
  var slackApp = SlackApp.create(token);

  var params = JSON.parse(e.postData.getDataAsString());
  var channelId = params.event.channel;
  var userId = params.event.user;
  

  var options = {
    channelId: channelId, // 参加したチャンネルのID、 #test などのチャンネル名でも投稿可能
    userName: "Welcome Bot", // 投稿するbotの名前
    message: "<@" + userId + "> Welcome！！！ :zany_face:", // 投稿するメッセージ
  };

  slackApp.postMessage(options.channelId, options.message, {username: options.userName});
}

function doGet(e){
  doPost(e);
}
```

### SlackAppライブラリを追加

1. "リソース"タブ>ライブラリを開き、 `M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO` を追加して保存

<img width="706" alt="スクリーンショット 2019-03-22 22.33.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/8e056bd7-5a71-5948-e608-47523d263bbf.png">


### SLACK_ACCESS_TOKENの設定
GAS内に

```javascript
var token = PropertiesService.getScriptProperties().getProperty('SLACK_ACCESS_TOKEN');
```

と書いてあるが、今のままではSLACK_ACCESS_TOKENを取得できないため設定する。

1. Slack Botのページで、サイドバーから"OAuth & Permissions"を選択する。
2. "Install App to Workspace"をクリックし、Appからのアクセスを許可する。
3. TOKENが出てくるので、"Bot User OAuth Access Token"をコピーする。

<img width="971" alt="スクリーンショット 2019-03-22 22.17.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/52c62520-f284-43e1-07fc-6fb64de8f557.png">

4. GASに戻り、ファイル>プロジェクトのプロパティ>スクリプトのプロパティを開く。
5. "プロパティ"に"SLACK_ACCESS_TOKEN"、"値"にコピーしたTOKENを入れて保存する。

<img width="695" alt="スクリーンショット 2019-03-22 22.20.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/65917fbe-6cdb-c6e6-ef44-9891d2b9ea1c.png">

6. 再度、ウェブアプリケーションとして導入の手順を実施する。（プロジェクトバージョンは必ず"New"にすること）

### 実行してみる

アプリケーションをchannnelに呼ぶといい。
![sample.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/42587/ca563250-e843-da72-d3d5-7a3c13d79d51.gif)

## Tips

- SlackのchannelIdはブラウザで開くと確認できる（messages/のあとの文字列）
<img width="393" alt="スクリーンショット 2019-03-23 14.08.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/42587/dd5c64f6-1776-3a7e-a93a-a48e7c7b9905.png">

    - このチャンネルでだけWelcomeメッセージを送信したいよーって場合はこれで絞ればいいんじゃないかと。
        - アプリが入ってるチャンネルでのみ反応するので、そんなに必要はなさそう