SlackとGASとスプレッドシートを連携して社内勉強会の発表順シャッフル通知をつくってみた

![try-046_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ab264a58-9d29-e7fa-6685-2dcb503c8e7e.gif)

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/a0b3e8f6-3202-31df-77b4-bec7cb3e4606.png)

<br>

### SlackとGASとスプレッドシートを連携して社内勉強会の発表順シャッフル通知をつくってみました :tada:  

MIERUNEで定期的な社内勉強会を開催することになり、発表順を自動で決めたかったのでSlackとGASとスプレッドシートを組み合わせて構築してみました！

<br>

## 1. スプレッドシートの作成

はじめに、スプレッドシートを作成します。今回はA列の1行目に題名を記入し、A列の2行目以降に名前を記入しました。共有設定は公開にします。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/d1323740-9455-5fe4-9694-481d16ba1ca8.png)

<br>

## 2. Google Apps Script (GAS)の実装

次に、GASのファイルを作成します。今回は「member-shuffle」という名前で作成してみました。ファイルを開いてsample.gsを実装し保存します。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/79812479-1ec0-4f0a-373c-d678460c6af0.png)

<br>

#### sample.gs

```javascript

// スプレッドシートURL
const SPREADSHEET_URL = 'https://docs.google.com/spreadsheets/xxxxxxxxxx';

// リクエスト受信
function doPost(e) {
    // スプレッドシートと固定シート指定
    const spreadsheet = SpreadsheetApp.openByUrl(SPREADSHEET_URL);
    const sheet = spreadsheet.getSheets()[0];

    // メンバー名すべて取得
    const memberAll = sheet.getRange(2, 1, sheet.getLastRow() - 1, 1).getValues();
    let member = [];
    for (let i in memberAll) {
        member.push(memberAll[i][0]);
    }

    // メンバーシャッフル
    for (let j = member.length; 1 < j; j--) {
        let v = Math.floor(Math.random() * j);
        [member[v], member[j - 1]] = [member[j - 1], member[v]];
    }

    // メッセージ作成
    const message = member + '   <' + SPREADSHEET_URL + '|:pencil2:>';

    // チャンネルにも表示でレスポンス
    const response = {
        "text": message,
        "response_type": "in_channel"
    };
  
    // slackに通知
    return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(
        ContentService.MimeType.JSON
    );
}
```

<br>

作成したスプレッドシートのURLを設定します。

```javascript

// スプレッドシートURL
const SPREADSHEET_URL = 'https://docs.google.com/spreadsheets/xxxxxxxxxx';
```

<br>

スプレッドシートとその中のシートを設定します。

```javascript

// スプレッドシートと固定シート指定
const spreadsheet = SpreadsheetApp.openByUrl(SPREADSHEET_URL);
const sheet = spreadsheet.getSheets()[0];
```

<br>

指定したシートからメンバー名をすべて取得しシャッフルします。

```javascript

// メンバー名すべて取得
const memberAll = sheet.getRange(2, 1, sheet.getLastRow() - 1, 1).getValues();
let member = [];
for (let i in memberAll) {
    member.push(memberAll[i][0]);
}

// メンバーシャッフル
for (let j = member.length; 1 < j; j--) {
    let v = Math.floor(Math.random() * j);
    [member[v], member[j - 1]] = [member[j - 1], member[v]];
}
```

<br>

Slackに通知するメッセージを作成し、オプションと合わせてレスポンスを作成します。通常スラッシュコマンドは、実行しても自分のみに通知されますが、レスポンスタイプを「in_channel」と指定することでチャンネル内の全員に通知することが可能になります。

```javascript

// メッセージ作成
const message = member + '   <' + SPREADSHEET_URL + '|:pencil2:>';

// チャンネルにも表示でレスポンス
const response = {
    "text": message,
    "response_type": "in_channel"
};
```

<br>

Slackに通知します。

```javascript

// slackに通知
return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(
    ContentService.MimeType.JSON
);
```

<br>

## 3. Google Apps Script (GAS)を公開

実装後に公開設定をします。公開 → ウェブアプリケーションとして導入... をクリックします。
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/551c69a2-fb62-f216-3bf8-a92a992180c7.png)

<br>

下記内容で設定します。

- Project version: New (コード更新時もNewを指定)
- Execute the app as: Me 
- Who has access to the app: Anyone, even anonymous

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1ea8995f-49e2-dd5d-0421-32bc75048cac.png)

<br>

公開URLが発行されるのでコピーしておきます。この後のSlackの設定で利用します。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/634f0a59-fd95-d0c8-d81f-cac201af61b5.png)

<br>

## 4. Slackの設定

新規で[Slack App](https://api.slack.com/apps)を作成します。
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ddb238ee-8985-6644-5a87-a160cc1624a8.png)

<br>

名前と対象のワークスペースを設定します。
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/0d5ef764-c3bc-b42d-f77c-ba177c469cc7.png)

<br>

Slack App作成後の初期画面で、下にスクロールすると通知の表示設定ができるのでアイコン等を設定します。
![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/0467ce63-9271-c7a1-436f-b4239381042d.png)

<br>

Slack Appには色々な連携機能がありますが、今回はSlash Commandsをクリックします。
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/83dd102c-5f4d-eb74-300d-f9843d8831b1.png)

<br>

次に、Create New Commandをクリックします。
![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/a8dd414c-0f5a-aadb-1922-5d3668eaa04e.png)

<br>

スラッシュコマンド作成は下記内容で設定します。ここでGASの公開URLを利用します。

- Command: シャッフル
- Request URL: GASの公開URL 
- Short Description: 社内勉強会の発表順
- Usage Hint: シャッフル

![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/aec59b35-3837-e261-b044-d35d14305a6a.png)

<br>

登録されたら一覧に表示されます。
![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/d0046817-6a6d-3b22-23ca-c2a1be8567ce.png)

<br>

最後に、Slack Appを対象のワークスペースにインストールします。OAuth & Permissions → Install App to Workspaceをクリックします。
![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/066eaedd-1338-29d6-d5ca-921e5a74a5a7.png)

<br>

連携の許可画面が表示されるので許可するをクリックします。
![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/c6ddfede-600e-3828-0b43-74ee49c6f852.png)

<br>

## 5. シャッフル機能の実行

お好きなチャンネルで、スラッシュコマンド「/シャッフル」を実行すると、スプレッドシートのメンバー名をシャッフルし通知されます。
![try-046_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ab264a58-9d29-e7fa-6685-2dcb503c8e7e.gif)

<br>

#### SlackとGASとスプレッドシートを連携して社内勉強会の発表順シャッフル通知ができました :thumbsup: 

Slackの通知連携の方法は色々あり、現在は[Slack App](https://api.slack.com/apps)にまとまってはいますが実際触ってみるとまだまだ複雑ではあります。今回はその中でも手軽なスラッシュコマンドを選択してみました :bulb: GASを利用することで、スプレッドシートやSlack等色々と連携できて便利ですね :thumbsup: 

<br>

Slack・GAS・スプレッドシートについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://memo.dayjournal.dev/memo/try-006" target="_blank">Try #006 – Azure FunctionsやGoogle Apps ScriptでSlack Statusを操作してみた</a>
<a href="https://memo.dayjournal.dev/memo/try-017" target="_blank">Try #017 – GASでAPI配信してスプレッドシートからwebページを更新できるようにしてみた</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://memo.dayjournal.dev/images/etc/book.png" alt="book"></a>