Slack Applicationの作成と説明、ついでにIncoming Web hookをためす

# Slack Applicationの作成と説明、ついでにIncoming Web hookをためす

#### Table of Contents

1. Slack とは
2. Slack の代表的な機能
3. Slack Application の作成
4. Incoming Webhooksを利用したアプリケーションの設定

## 1. Slack とは

![slack-app-index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/f98e68df-cfb0-133f-ebe9-2b2ed48325e6.png)


> メールに代わるビジネスコラボレーション「Slack」

と書かれているようにグループのチャットツールです。
類似サービスに[chatwork](https://go.chatwork.com/)や[Microsoft Teams](https://products.office.com/en-us/microsoft-teams/group-chat-software)があります。
多分qiitaを見てる人なら誰でもしってそう。。。

## 2. Slackの代表的な機能

Slackの代表的な機能としては、6つです

![features.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/3decc88b-2d4e-2d1d-1fd6-d01b99ab9cba.png)

ざっくり書くと

| name | description |
| :---: | :---: |
|Incoming Webhooks | Slackにメッセージを投稿する機能です。 |
| Intractive Components | Slackのメッセージにダイアログやボタン、選択メニューなどのコンポーネントを追加し、ユーザーにインタラクティブな体験を提供する機能です。 |
| Slash Commands | Slack内でユーザーがコマンドを入力してアプリのアクションを実行できるようにする機能です。/のショートカットを利用します |
| Event Subscription | Slackで行われたアクションをフックして何かをする機能です。 |
| Bots | ユーザーがチャネルと通信を通じてアプリを操作できるようにします |
| Permission | Slack APIと対話できるようにアクセス許可を構成する |

です。Slack内である程度のフックは可能なので覚えて置くと色々楽に仕事をこなせるアプリケーションを作成できます。

## 3. Slack Application の作成

slackのアプリケーションの作成(非公開)は、
1. [Slack Api](https://api.slack.com/)にいき Your Apps をクリック
2. [Slack Api Application ](https://api.slack.com/apps)にいき Create An App を押下
3. 表示されたdialogに アプリケーションの名前　と　設定するWork Spaceを選択し Create App を押下

でアプリケーションの雛形は作成されます(ちなみに選択されたWork Spaceにのみアプリケーションが有効化されています)。

以下は画像つきで作成方法を設定していきます。

### 1. [Slack Api](https://api.slack.com/)にいき Your Apps をクリック

![slack-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/257b428c-bfad-3bc9-252c-6561f6f1d6c0.png)

### 2. [Slack Api Application ](https://api.slack.com/apps)にいき Create An App を押下

![slack-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/4f0fd954-5088-15f1-3dad-eb4ffec09015.png)

### 3. 表示されたdialogに アプリケーションの名前　と　設定するWork Spaceを選択し Create App を押下

![Slack API  Applications   Slack (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/19c86cb0-86cc-2eee-730a-eff9eafb41a4.png)

さらっと作成されます。www

![slack-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/7b889918-1674-5ae2-7338-756eb7e4f699.png)


## 4. Incoming Webhooksを利用したアプリケーションの設定

Incomingを利用するまでのステップは、

1. Slack Applicationにいき、Incoming Webhook URLのCardをクリック
2. ToggleをOnに変更する
3. Add New Webhook to Workspaceをおして有効化します
4. Incoming Web Hookを利用するチャンネルを選択してAllowをクリック

以上でweb hook urlの利用は開始することができます。

### 1. Slack Applicationにいき、Incoming Webhook URLのCardをクリック
![select-application.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/792f1ebd-feee-ea03-3e6e-979a06fc6cb0.png)

### 2. ToggleをOnに変更する

![actiavte-incoming-webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/a4b7feec-c466-c2c5-3ad9-c81ee3a38372.png)

### 3. Add New Webhook to Workspaceをおして有効化します

![add-new-webhook-url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/602a2326-c37f-9c31-3309-53a9fdf89764.png)

### 4. Incoming Web Hookを利用するチャンネルを選択してAllowをクリック

![sample-application is requesting permission to access the self Slack workspace   self Slack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/32b82797-6d6f-42ab-2c8a-c44442983cf2.png)

以上で完了です。4つのステップが完了すると下のようにURLが発行されます。

![success-incming-webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/24b9c5a6-6d8d-09f9-2406-5444b03e1aa4.png)

次にIncoming Web Hookを叩いてメッセージを送信します。

作成されたcurlコマンドをコピーして、ターミナルにはってためしてみます

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134343534332f31663730386231392d316532392d303838372d656137352d3538303731633163376136332e706e67  1496×1394 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/9f172f42-bab5-ad9c-273d-affccefca44b.png)



```terminal
$ curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/XXX/YYY/ZZZ
```

こんな感じで設定したwork spaceにメッセージが作成されます。

<img width="513" alt="スクリーンショット 2020-01-30 2.47.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/709924d5-98d7-7a8a-b083-96ffc7c836a5.png">