Slack連携による生産性向上の施策（その２）〜Slack App編〜

# はじめに
こちらの記事は三部構成になっております。
- [Slack連携による生産性向上の施策（その１）〜Workflow Builder編〜](https://qiita.com/oc-arimura/items/ff4c194c617a9d309d9c)
- [Slack連携による生産性向上の施策（その２）〜Slack App編〜](https://qiita.com/oc-arimura/items/fdb6b1faca5ea1150b3a)
- [Slack連携による生産性向上の施策（その３）〜AWS Lambda編〜](https://qiita.com/oc-arimura/items/e9fb983b411b68fd941a)

また、全ての記事の内容を含んだ動画も用意しております。
動画で確認したい方は[コチラ](https://www.youtube.com/watch?v=JE7ZVJ9yE9Q)まで。
※動画開始50分頃からの内容になります。

# Slack App登録の前に
Slack Appから呼び出されるAPIの準備をします。
## Lambda関数作成
1. AWSのコンソール画面でサービス名に `lambda` と入力し、サービス一覧から【Lambda】をクリック
![スクリーンショット 2024-04-11 17.41.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/3f320705-a4cb-5e1d-1792-4085465563e3.png)

1. AWS Lambdaのサービス画面の【関数の作成】ボタンをクリック
![スクリーンショット 2024-04-11 15.39.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/a1c86caa-2adc-58f3-c3b0-528138c4c15d.png)

1. 関数名に作成するLambda関数名を入力し、今回はランタイムを【Python 3.11】を選択して【関数の作成】ボタンをクリック
![スクリーンショット 2024-04-12 10.00.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/6ae6dc5a-f4b3-4389-60a4-3422128944d6.png)

1. このようにLambda関数が作成されます
![スクリーンショット 2024-04-12 10.12.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/bddf2a20-d506-d671-edc2-44439e6abe01.png)

## API Gatewayの設定
1. 作成されたLambda関数の【トリガーを追加】ボタンをクリック
![スクリーンショット 2024-04-12 10.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/162ce9dc-0350-44f4-a9ee-97a75b303ef2.png)

1. トリガー追加画面のソースを選択から【API Gateway】を選択、Intentラジオボタンから【Create a new API】を選択、API Typeラジオボタンから【REST API】を選択、Securtyリストボックスから【Open】を選択し【追加】ボタンをクリック
![スクリーンショット 2024-04-12 12.23.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/c2168ebf-8797-446a-34f6-5f610e7fc52e.png)

1. こちらでAPI Gatewayのトリガーが作成されます
![スクリーンショット 2024-04-12 12.35.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/c76278ec-ce8a-b368-864a-617bad5f5c00.png)

1. トリガーの詳細はこちら、この`API endpoint`は後ほど使います
![スクリーンショット 2024-04-12 12.43.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/d36e333b-4e2d-79ce-f8e9-7489b05e8221.png)

1. `post_question-API`リンクをクリックし、APIの詳細設定を変更します
![スクリーンショット 2024-04-12 20.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/87120389-6641-7649-f341-a554a2655061.png)

1. API Gateway設定画面の右下にある【統合リクエスト】をクリック
![スクリーンショット 2024-04-12 20.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/21d551d5-bc43-8f6b-2245-f08354917d2a.png)

1. 画面を下にスクロールすると、統合リクエストの設定があるので【編集】ボタンをクリック
![スクリーンショット 2024-04-12 20.37.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/7cce0274-c74a-e4f9-04a2-3055e520da41.png)

1. 統合リクエストの編集画面の【Lambdaプロキシ統合】のスイッチをOFFに設定し、【保存】ボタンをクリック
![スクリーンショット 2024-04-12 20.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/60ae885e-7421-f3d8-4d01-e1706d5ea165.png)

1. 統合リクエストの設定内容が変更されているのを確認して、画面右上の【APIをデプロイ】ボタンをクリック
![スクリーンショット 2024-04-12 20.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/c7cec3cd-18f5-bb54-5d28-50439be0d9b1.png)

1. デプロイ画面のステージから【default】を選択し、【デプロイ】ボタンをクリック
![スクリーンショット 2024-04-12 20.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/e16ebb16-58fd-1b49-5726-de97efe117e6.png)

1. デプロイが成功したと表示されたので、これで完了
![スクリーンショット 2024-04-12 20.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/9ca15f94-5164-c75d-df92-c1c986b0648b.png)


## Lambda関数のコーディング
1. デフォルトで画面のようなコードが既に作成されております
![スクリーンショット 2024-04-12 12.49.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/8041bff2-5d12-7722-740c-07cde54d66d8.png)

1. Slack App作成の際に、APIの認証処理が実行されるので、その認証処理を先に作ります。下記の内容をコードソースに記載します
```python:lambda_function.py
import json

def lambda_handler(event, context):
    # TODO implement
    print(event)
    return {
        'statusCode': 200,
        'body': json.dumps(
            {
                'challenge': event['challenge']
            }
        )
    }
```
3\. コード修正内容を確認して、【Deploy】ボタンをクリック
　![スクリーンショット 2024-04-12 12.59.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/0cdd3a09-31c1-9b56-b982-b4afa3356422.png)

4\. これで準備完了です

# Slack Appの作り方
## 初期作成
1. [Slack App](https://api.slack.com/apps)のサイトへアクセスし、【Create an App】ボタンをクリック
![スクリーンショット 2024-04-12 15.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/94b021a0-d51f-fbe6-62d8-f63bb01cb5e9.png)

1. App作成画面の【From scratch】をクリック
![スクリーンショット 2024-04-12 18.41.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/02e3c4f8-f0b5-87b2-c402-f3bae238a456.png)

1. `App Name`にSlack App名を入力し、`Pick a workspace to develop your app in:`にSlack Appを作成するワークスペースを選択し、【Create App】ボタンをクリック
![スクリーンショット 2024-04-12 18.59.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/821441b8-6191-684e-19e9-879341f25ea1.png)

1. こちらで、Slack Appの基本情報の画面が表示され初期登録が完了です
![スクリーンショット 2024-04-12 19.05.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/9a3c51ae-7c22-1757-3f61-7acd3fcd0f66.png)

## OAuth & Permissions 設定
今回はSlackからメッセージをAPIに投げるまでの組み込みに必要な最低限の設定を実施します。
1. 基本情報画面の左メニューから `OAuth & Permissions` リンクをクリック
![スクリーンショット 2024-04-12 19.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/36a986a0-ed32-c678-9898-8ac00b8195ea.png)

1. OAuth & Permissionsの設定画面を下にスクロールし、Scopesの`Bot Token Scopes`設定の【Add an OAuth Scope】ボタンをクリック
![スクリーンショット 2024-04-12 19.37.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/1fc2c87a-b1b7-f864-6376-5a9c8acc2edd.png)

1. OAuth Scopeリストボックスから【channels:history】を選択
![スクリーンショット 2024-04-12 19.47.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/e2862b90-cb0b-9b54-d510-2174e6ff889e.png)

## Event Subscriptions 設定
1. 基本情報画面の左メニューから `Event Subscriptions` リンクをクリック
![スクリーンショット 2024-04-12 20.57.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/ffc6750d-481c-c0da-ec9e-98eeb359a379.png)

1. Event Subscriptionsの設定画面の `Enable Events` スイッチをONに設定
![スクリーンショット 2024-04-12 20.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/043995ed-8974-d1dd-e2ee-00da15632307.png)

1. Request URLのテキストにAPI Gatewayの設定で用意した`API endpoint`を入力、直後に認証処理が実行され`Verified`と認証OK!の結果が表示される
![スクリーンショット 2024-04-12 21.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/02660d60-84fd-2cc3-d0ac-6fbbddf1d5c5.png)

1. Event Subscriptionsの設定画面を下へスクロールし、Subscribe to bot eventsの設定を開いて【Add Bot User Event】ボタンをクリックし、表示されたリストボックスへ`channels`と入力し、リスト内容から【message.channels】を選択
![スクリーンショット 2024-04-12 21.18.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/7b5a9af5-8f49-a1cf-03f8-d6bca8e3cb77.png)

1. Event内容が設定されたことを確認し、画面右下にある【Save Changes】ボタンをクリック
![スクリーンショット 2024-04-12 21.21.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/346d7a8f-fbe9-d6e6-e47e-aff4ca365880.png)

1. こちらで、EventSubscriptionsの設定が完了です

## Slack Appのインストール
1. 設定が全て完了したので、Slack Appのインストールを実施します。基本情報左メニューから `Basic Information` リンクをクリック
![スクリーンショット 2024-04-15 10.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/2d5262de-a72d-ff03-6f07-a9deffa6cb2c.png)

1. Basic Information画面の【Install to Workspace】ボタンをクリック
![スクリーンショット 2024-04-15 11.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/63e6b407-5510-6b24-4472-8970a9eb18e9.png)

1. 使用しているWorkspaceに対して、Appの許可を得る為【Allow】ボタンをクリック
![スクリーンショット 2024-04-15 11.55.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/65135faa-d5d9-7989-ea8e-302be7fa842c.png)

1. 以下の画面に遷移し、Slack Appのインストールが完了
![スクリーンショット 2024-04-15 11.56.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/68ba9ce9-b860-a89b-426d-44f1bc5693b7.png)

# Slack Appを使ってみよう
1. Slackチャンネルの設定画面を開いて `Integrations` タブをクリック
![スクリーンショット 2024-04-15 16.39.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/8e059436-eae4-5c39-522a-ca430597740f.png)

1. 画面中央のAppsにある【Add an App】ボタンをクリック
![スクリーンショット 2024-04-15 16.39.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/68ed912a-1ad0-d462-2545-4bdbaf19bef2.png)

1. 追加するアプリを選択する画面の検索文字のテキストに `post_question` と記入し、対象のアプリが表示されるので【Add】ボタンをクリック
![スクリーンショット 2024-04-15 16.46.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/ef12b2bb-0bde-5396-3399-0ae7e69d3473.png)

1. これでSlackチャンネルにSlack Appが登録されます
![スクリーンショット 2024-04-15 16.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/8b8f7a1d-1dbf-8d5f-51d1-bcff979226e2.png)

1. それでは、（その１）で作成したWorkflow Builderを使ってみます。各入力欄を記入し【Submit】ボタンをクリック
![スクリーンショット 2024-04-15 16.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/baa62744-ae19-cdaf-d426-82f0f91872fd.png)

1. Workflow Builderで入力された内容がチャンネルのメッセージとして記載されます
![スクリーンショット 2024-04-15 16.47.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/cbb4f0f1-7adb-1d66-5946-508095ca6a3d.png)

1. このタイミングで、作成したLambdaのCloudWatch Logsを確認すると、メッセージの内容がLambda関数に届いていることが確認できます
![スクリーンショット 2024-04-15 16.57.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/86813e8b-3194-aef3-5eed-b17a1ac767d8.png)

# ここまで
![スクリーンショット 2024-04-15 17.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763114/e29ee717-5c7f-ab18-09cb-7e3c74a96431.png)
Workflow Builderを使って入力した内容が、API Gateway/Lambdaにデータを送信するところまで完了
**受け取ったデータを使ってBacklogへの登録、Slackへの通知機能を実装するにはどうするか？**

### Slack連携による生産性向上の施策（その３）〜AWS Lambda編〜　に続く…