slackで「投稿ルールが守られない問題」を自作のスラッシュコマンドで解決する(設定編)

# slackあるある

>※※お知らせ※※
今後、備品購入を希望される方は当チャンネルで
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
>【購入品名】　：
【購入URL】　：
【購入承諾者】：
【納品希望日】：2019/mm/dd
【備考】　　　：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
>というフォーマットを使って下さい。
(ピンどめしておきます)

現実は・・・

- フォーマットを自己流に改変する人
- そもそもフォーマットを使ってくれない人
- 別のチャンネルで依頼する人 etc.....

# 解決策
>今後、備品購入依頼は
当チャンネルで /bihin と投稿し、
表示されるダイアログから依頼して下さい。

## 表示されるダイアログ
簡易バリデーションチェックあり
![スクリーンショット 2019-06-14 23.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/5556c3c0-911f-13cd-e70e-dab5fbe15313.png)

## ダイアログ経由で生成される投稿
確実に期待したフォーマットで投稿してもらえる
![スクリーンショット 2019-06-14 23.16.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/f59c2936-4d11-5756-594c-ee8f3e2b0068.png)

### 指定のチャンネル以外でコマンドを使用した際のエラー表示
投稿者本人だけにエラーが通知され、無駄な通知が飛ばない。
![スクリーンショット 2019-06-14 23.20.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/4a5ae554-1470-41c7-a958-3c9d9066ea7a.png)

### スマホからも投稿しやすい(外回りの営業さんも安心)
<img width="375" alt="Image from iOS.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/9325cbd9-7aa3-ce07-ac6e-f33157b963eb.png">


# 実装

- GoogleAppsScriptを使用します
- コード&処理内容だけ見たい方は[コード解説編](https://qiita.com/marogoma/items/93c1825454e03ee79523)を御覧ください。

## 処理の流れ
slack上でスラッシュコマンドを投稿
→slackAppの「コマンドごとに設定されたURL」にPOST
→GoogleAppsScript(サーバー)が受けてダイアログを返す
→slack上にダイアログが表示され、各項目を入力して投稿をする。
→slackAppの「InteractiveComponentsに設定されたURL」にPOST
→GoogleAppsScript(サーバー)が受けて、入力内容を整形してslackに投稿

## 設定手順
### 1.GoogleAppsScript(以下GAS)の準備
#### 1-1.スプレッドシート新規作成
新規でスプレッドシート作成し、ツール>スクリプトエディタを開く。
![スクリーンショット 2019-06-15 9.15.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/1dc0f40c-5795-7c5e-52c0-04f479f609ea.png)

#### 1-2.
コードなどは特に書かずに、公開>ウェブアプリケーションとして導入を開く。
![スクリーンショット 2019-06-15 9.36.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/56b9edc8-70d5-0cec-0010-efb62196989c.png)

#### 1-3.プロジェクト名編集
プロジェクト名を入力。わかりやすい名前であれば何でも良いです。
![スクリーンショット 2019-06-15 9.37.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/730e8025-3c7f-917b-3301-ea7c16181147.png)

#### 1-4.アクセス権限変更
slackのappがこのスクリプトを実行できるようにするために、「アプリケーションにアクセスできるユーザー」の項目を「全員(匿名ユーザーを含む)」に変更する。
![スクリーンショット 2019-06-15 9.38.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/a1ebcf16-9b61-45d3-966e-ba9d52825184.png)

#### 1-5.スクリプトのURL取得
現在のウェブアプリケーションのURLが表示されるので、このURLをメモしておきます。
![スクリーンショット 2019-06-15 9.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/406d9543-279b-eb00-bd80-3ecd537d835c.png)

### 2.slackの設定
#### 2-1.SlackApp新規作成
https://api.slack.com/apps にアクセスし、「Create New App」を押す。
![スクリーンショット 2019-06-15 9.54.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/5b2b283d-1bf7-4839-4a8b-ee7ca2dade6e.png)

#### 2-2.SlackApp基本設定
- App_Nameに任意の名前を入力し(この名前はコマンド呼び出し時にユーザーに表示されます)
- DevelopmentSlackWorkspaceはプルダウンから自分のWorkspaceを選択

入力したら右下の「Create App」を押す。
![スクリーンショット 2019-06-15 9.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/9f564059-b673-7996-c06d-ee4e3a105fe7.png)

#### 2-3.Verification Token取得
遷移した先のページ(appのBasic Information)の中段「App Credentials」内に`Verification Token`が表示されているので、この値をメモする。
![スクリーンショット 2019-06-15 10.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/396bd5fb-224a-3ffd-a785-0dd64804e8a3.png)

#### 2-4.SlackApp詳細設定
同じページ(appのBasic Information)の上段「Building Apps for Slack」内の「Add features and functionality」を編集する。
編集する項目はInteractiveComponents,SlashCommands,Permissionsの３つ。
##### 2-4-1.InteractiveComponents
InteractivityをOnにして、
RequestURLには1-5.で取得したURLを入力する。
URL入力後にエンターキーを押すと、画面右下の「SaveChanges」ボタンがアクティブになるので押す。
![スクリーンショット 2019-06-15 10.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/91004382-d77f-42b9-f548-944ddc574c61.png)

##### 2-4-2.SlashCommands
まず、画面左のリンクから `SlashCommands` を開く。
![スクリーンショット 2019-06-15 10.14.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/b2de1c59-7e16-8ffc-e3d4-da2cda9c57e5.png)

CreateNewCommandを押す。
![スクリーンショット 2019-06-15 10.15.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/9c6c6b36-e0b8-1c79-ef66-fe359970c269.png)

CreateNewCommandの画面に遷移するので、

- Commandに今回自分が追加したいコマンドを入力
- RequestURLに1-5.で取得したURLを入力
- ShortDescriptionに実行されるコマンドの目的を入力
- UsageHintは特に入力してもしなくても良いです

入力が完了したら画面右下の「Save」を押す。
![スクリーンショット 2019-06-15 10.16.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/301653f2-efda-3379-bf91-32ac603233c4.png)

##### 2-4-3.Permissions
まず、先ほどと同様に画面左のリンクから`OAuth&Permissions`を開く。

【※↓2019/06/27手順追記】
画面中段にあるScopes欄内の `Select Permission Scopes` のプルダウン内の「Send messages as {{slackApp名}}」を選択し、
SaveChangesを押す。
![スクリーンショット 2019-06-27 10.30.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/d645184e-e669-c0a2-1b90-ce579cba747b.png)
【※↑2019/06/27手順追記ここまで】

画面上部の「Install App to Workspace」を押す。
![スクリーンショット 2019-06-15 10.24.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/5f6a8b22-cd77-9eba-6cc3-6c7619a790fd.png)

インストール画面が表示されるので、右下の「Install」を押す。
![スクリーンショット 2019-06-27 10.30.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/f3c9d0d2-377a-d4f4-4207-2bd40a5328b0.png)


OAuth&Permissionsのページにリダイレクトされ、
`OAuth Access Token`の値が表示されるのでこの値をメモする。
![スクリーンショット 2019-06-15 10.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/c35e5b4a-def1-2b4f-67ac-c6e00f0da97d.png)

### 3.GoogleAppsScriptの本設定
#### 3-1.tokenの登録
1-1.同様にスプレッドシートからスクリプトエディタを開き、
左上のファイル＞プロジェクトのプロパティを開く。
![スクリーンショット 2019-06-15 13.08.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/00682ec0-c924-66c7-a510-80075353cad5.png)

スクリプトのプロパティに

- `verified_token` というプロパティ名で、2-3.で取得したtokenの値
- `OAuth_token`  というプロパティ名で、2-4-3.で取得したtokenの値

を入力し、左下の保存を押す。
![スクリーンショット 2019-06-15 13.19.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/c396f472-cf4f-4fda-d120-7cd884460269.png)

#### 3-2.SlackAppライブラリの追加
スクリプトエディタ上部のリソース＞ライブラリを開く。
![スクリーンショット 2019-06-15 13.31.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/0a8f6009-a6d9-5626-585f-c50b2f8c6a8e.png)

- 「ライブラリを追加」の欄に `M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO` と入力し、「追加」を押す
(※こちらは@soundTrickerさん作のライブラリです。詳細は[作者様の紹介記事](https://qiita.com/soundTricker/items/43267609a870fc9c7453)をご確認下さい)
![スクリーンショット 2019-06-15 13.32.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/024b0961-265e-241e-4ee1-94de7b453678.png)
- ダイアログ上部にバージョン選択のプルダウンが表示されるので22を選択
![スクリーンショット 2019-06-15 13.33.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/0fc811de-fd1f-374a-6cae-0606c855867b.png)
- 左下の「保存」を押す
![スクリーンショット 2019-06-15 13.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/21ed4a39-bb45-5061-1eac-0f3e4cb0f4c3.png)

#### 3-3.コード追加
- [slashコマンドgasコード例※githubリンク](https://github.com/marozex/myGas/blob/master/slash_command/slash.gs)をコピーして、
スクリプトエディタのコード.gsに貼り付ける
- 1行目のchannelNameの値を実際にコマンドを使用したいチャンネル名に書き換える
- フロッピーのアイコンを押して保存する。
![スクリーンショット 2019-06-15 13.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/a78e661e-346d-f340-e7aa-824ec8bd9276.png)

#### 3-4.公開スクリプトのバージョンアップ
- スクリプトエディタ左上の「ファイル」＞「版を管理」を押す。
- コミットコメントを入力し、「新しいバージョンを保存」を押す。
![スクリーンショット 2019-06-15 13.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/c08c7dfd-3176-7d60-cd57-0e223fecc43b.png)
- 左下のOKを押してダイアログが閉じられる。
- スクリプトエディタ上部の「公開」＞「ウェブアプリケーションとして導入」を押す。
- プロジェクトバージョンを最新(下記画像では2)にする
![スクリーンショット 2019-06-15 13.52.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/66593822-c3d1-ef1e-cea7-94d8562a3800.png)
- ダイアログ最下部の「更新」を押す。
- 承認が求められるので、「許可を確認」を押す。
- 「このアプリは確認されていません」の警告が出ますが、「詳細」＞「自作スラッシュコマンド(安全ではないページ)に移動」を押す。
![スクリーンショット 2019-06-15 13.55.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/8dafeb79-b933-d367-8b5a-ec41e149eac5.png)
- 各種許可が求められるので、右下の「許可」を押す。
![スクリーンショット 2019-06-15 13.57.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/4003adba-fcd5-1348-dc3f-c6c125f1fcc7.png)
- 「このプロジェクトをウェブアプリケーションとして導入しました。」と出るのでOKを押して完了。

### 4.おまけ(slackで設定する際の注意点)
- slack側でコマンドを設定する際に「すでにそのコマンド自体が登録されているか否か」という判定はされません。
- つまりAというappで `/hoge` を登録し、Bというappでも `/hoge` を登録する、という事ができてしまいます。
- このように複数登録されたコマンドを呼び出した場合、下記のような `Authorization is required to perform that action.` というエラーになりますので、ご注意ください。(私はこのエラーをpermissionの設定ミスと勘違いしハマりました)
![スクリーンショット 2019-06-15 15.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225823/25653e7e-673f-841f-5c22-45cd5627d69c.png)

---

設定編は以上となります。
ここまでの手順を完了すると、
「slack上で `/bihin` を実行→ダイアログ表示→投稿が可能」となっているはずです。
※[コード解説編](https://qiita.com/marogoma/items/93c1825454e03ee79523)に続きます。