GoogleスプレッドシートのグラフをSlackにアップロードする

そんなBotを作成しました。

## Slackの準備
やることは次の通りです。

- [Slack Web API](https://api.slack.com/web)へアプリケーションを登録
- Botユーザを作成
- BotユーザのOAuth Tokenを取得

### [Slack Web API](https://api.slack.com/web)へアプリケーションを登録
![Authentication](https://qiita-image-store.s3.amazonaws.com/0/185323/60e30d18-bab1-53e0-dcad-96458f6d5263.png "スクリーンショット_2018-01-15_23_05_35.png")

[Slack Web API](https://api.slack.com/web)にアクセスして **Authentication** を選択します。

![Register your application](https://qiita-image-store.s3.amazonaws.com/0/185323/dd666065-14b9-b516-0111-a75415570337.png "スクリーンショット_2018-01-15_23_07_15.png")

するとこんな感じの文章があるので **Register your application** を選択します。

![Your Apps](https://qiita-image-store.s3.amazonaws.com/0/185323/a0470c4e-0b70-f5c5-2769-0ad6d279da65.png "スクリーンショット 2018-01-15 23.09.31.png")

**Create New App** を選択してアプリケーションを登録します。

![Create a Slack App](https://qiita-image-store.s3.amazonaws.com/0/185323/6e290be1-ccec-a017-7445-1e647c6a379b.png "スクリーンショット 2018-01-15 23.11.37.png")

**App Name** はアプリケーションにつける名前を入力します。 **Development Slack Workspace** はアプリケーションを利用するSlackのワークスペースを選択して **Create App** ボタンを押下します。

### Botユーザを作成
![Bot Users](https://qiita-image-store.s3.amazonaws.com/0/185323/db496a0e-d139-30a6-bba8-e964aca9e5c0.png "スクリーンショット_2018-01-15_23_03_10.png")

**Basic Information** のサイドメニューに **Bot Users** のリンクがあるので選択します。

![Bot User](https://qiita-image-store.s3.amazonaws.com/0/185323/743fef58-58b4-977c-81e7-4b8f21f68abb.png "スクリーンショット 2018-01-15 23.18.53.png")

**Add a Bot User** のボタンがあるので押下します。すると **Display name** や **Default username** には先ほど登録したアプリケーションと同じ名称が入力された状態になると思います。問題なければこのまま **Add Bot User** を押下してBotを追加します。

### BotユーザのOAuth Tokenを取得
サイドメニューの **OAuth & Permissions** を選択します。

![OAuth & Permissions](https://qiita-image-store.s3.amazonaws.com/0/185323/b3765fbe-5e30-d833-4719-5a849865216a.png "スクリーンショット_2018-01-15_23_00_53.png")

**Bot User OAuth Access Token** があります。このトークンを後々使うのでメモしておきます。

同じページの真ん中あたりに **Scopes** があるので以下権限を追加します。

![Scopes](https://qiita-image-store.s3.amazonaws.com/0/185323/258e640c-6977-a9be-3e56-d0eae9194a9a.png "スクリーンショット 2018-01-15 23.27.29.png")

- chat:write:bot
- files:write:user


## GAS(Google Apps Script)の準備
- スクリプトを書く
- トリガーを設定する

### スクリプトを書く
![スプレッドシート](https://qiita-image-store.s3.amazonaws.com/0/185323/b4493eaf-fe31-0374-e03a-497ac5f12326.png "スクリーンショット 2018-01-15 22.57.03.png")

スクリプトを書くにはスプレッドシートの`ツール > スクリプトエディタ…`と辿ります。コードを書く際は[Slack BotをGASでいい感じで書くためのライブラリを作った - Qiita](https://qiita.com/soundTricker/items/43267609a870fc9c7453)という記事を参照してもらうととても楽だと思います。本当にいい感じに書けました。

`files.upload` でファイルをアップロードする際にアップロードした画像がSlackのメッセージ中で表示されない現象に遭遇したのですが、これは `channels` 引数を指定することで回避できます。ここ、だいぶハマりました。

あと、今回は最終的に使わなかったのですが `attachment` という引数があります。こいつの値は `JSON.stringify()` する必要がある点も注意です。

ちなみに、こんな感じになりました。

```js:sample.gs
var prop = PropertiesService.getScriptProperties().getProperties()
var book = SpreadsheetApp.openById(prop.sheetId)

/**
 * グラフをslackにアップロードするメソッドです。
 * スプレッドシートに定義された共有先チャンネルへグラフをアップロードします。
 */
function report() {
  var charts = book.getSheetByName(prop.sheetGraph).getCharts()
  var result = true
  charts.forEach(function(item, index) {
    var name = 'chart' + index + '.png'
    var response = upload(channelId, item.getBlob().setName(name), name)
    if (response['ok'] != true) {
      result = false
    }
  })
  return result
}

/**
 * グラフ画像をアップロードします。
 * channels引数を指定することでメッセージ内で画像が展開されます。
 * 詳細については以下ドキュメントのResponse項目を確認してください。
 * via: https://api.slack.com/methods/files.upload
 */
function upload(channel, chart, name) {
  return app.filesUpload(chart, {
    "filename": name,
    "channels": channel
  })
}

```

### トリガーを設定する
今回はスプレッドシート上にボタンを設置する方法で実装しました。スプレッドシート上で適当な図形オブジェクトを作成します。

![スクリプトを割り当て…](https://qiita-image-store.s3.amazonaws.com/0/185323/1794b298-b561-2473-e1b1-9cb7b25b70eb.png "スクリーンショット 2018-01-15 23.47.05.png")

図形を選択して右クリックで **スクリプトを割り当て…** を選択します。

![スクリプトを割り当て](https://qiita-image-store.s3.amazonaws.com/0/185323/1e3b8975-1ace-1c88-b954-32fd0eb3182e.png "スクリーンショット 2018-01-15 23.47.14.png")

最後に、先ほど書いたスクリプト中のメソッド名を割り当てます。すると割り当てたメソッドはボタンを押した際に実行されるようになります。


## 参考
- [API Methods | Slack](https://api.slack.com/methods)
- [Slack BotをGASでいい感じで書くためのライブラリを作った - Qiita](https://qiita.com/soundTricker/items/43267609a870fc9c7453)