slack appつくってみた

slack appを業務改善で使ってみたいと思い、つくってみた備忘録残したいと思います。
今回の環境はCodeSandboxで作ってみました。


## 用意するもの
・slackアカウント
・GitHubアカウント

## やること
#### ■slackアプリの設定1
・slackアプリの作成
・botスコープの構成
・アプリをslackにインストール

#### ■CodeSandboxのセットアップ
・ログイン（ここでGitHubアカウントを持っているとスムーズです）
・sandbox作成
・認証情報の設定
・リクエストURLの設定

#### ■slackアプリの設定2
・インタラクティブコンポーネントの設定
・スラッシュコマンド or ショートカットキーの設定
アプリをslackに再インストール

参考URL：https://github.com/seratch/bolt-starter

## slackアプリの設定1
アプリを作りたいslackワークスペースにログインしている状態から
[https://api.slack.com/apps](https://api.slack.com/apps) にアクセスし、slackアプリを作ります。
「Create new App」でアプリを作れます。
![Slack_API__Applications___Slack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/29012b83-f629-450b-aad2-45956ea7f000.png)

アプリを作成後、左メニューバーのAccess Features > OAuth & Permissionsからbotスコープの設定をします。
( https://api.slack.com/apps/{APP_ID}/oauth ）
`app_mentioned:read`
`chat:write`
`commands`
![スクリーンショット_2020-09-26_14_22_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/585b5a3f-68e2-a119-08cd-badc0150d1a8.png)

最後にアプリをワークスペースにインストールをします。
Access Settings > Install App からアプリをインストールし、botトークンを取得します。（xoxb-*****）
(https://api.slack.com/apps/{APP_ID}/install-on-team)
![スクリーンショット_2020-09-26_14_36_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/3972ea2a-a410-622f-f98d-719682c8ad81.png)

![スクリーンショット_2020-09-26_14_34_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/0ef02cb8-f72f-abff-5698-01a282ae4e19.png)
（※ここで許可するが選択できない場合は[こっち](https://slack.com/intl/ja-jp/help/articles/222386767-%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)の記事を参考にしていただきたいです）

## CodeSandboxのセットアップ
GitHubアカウントでサインインします
https://codesandbox.io/

新しいサンドbotを作成。
 `Create Sandbox`から作成
 `Import Project`タブに移動
 テキストボックスに`https://github.com/seratch/bolt-starter`を入力し、`import and Fork`をクリック
![Dashboard_-_CodeSandbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/069d7f13-8012-b2b6-b67a-8176310ef9b1.png)

サンドボックスを作成後、テンプレートプロジェクトをフォークするために、デプロイをします。
![スクリーンショット_2020-09-26_14_51_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/d0e7715b-6cd0-2b46-0bca-6b5ee240a4e9.png)

次に、独自のサンドボックスプロジェクトにシークレットを設定します。
ここで、先程作成したslackアプリの管理画面から、SLACK_BOT_TOKENとSLACK_SIGNING_SECRETを使用します。
（Name：Value）
SLACK_SIGNING_SECRET ： Basic Information > App Credentials > Signing Secret
SLACK_BOT_TOKEN ： Settings > Install App（例：xoxb-*****）
![epic-bose-631y9_-_CodeSandbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/362421f8-8d19-bd25-0e59-2ad80e646217.png)
（シークレットを設定後、サンドボックスに反映されない場合は、`Restart Sandbox`ボタンをクリックすると、リスタートされます。）

サンドボックスの右側にURLが表示されていると思います。
そのURLをコピーしておいてください。★
![スクリーンショット 2020-09-26 15.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/0509ebcc-9495-244f-d1da-c8d260a61f66.png)


## slackアプリの設定2
slack管理画面に戻り、Feature > interactivity & Shortcuts からinteractivityの設定をONにします。
RequestURLには先程sandboxの★でコピーしたURLを貼り付け、最後に`slack/events`を付け足します。
（今回はslash commandsで試しますが、このショートカットで設定するとショートカットからslack appを動かすことも可能です。）
![スクリーンショット_2020-09-26_15_10_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/3c8eece3-bbdb-63a9-e627-eb23a8d3d246.png)

次に、コマンドの設定をします。
Feature > Slash Commands から コマンドを新しく作成します。
commandには実際にslackで入力するコマンド（ここでは`/open-modal`にしています）
Request URLには先程sandboxの★でコピーしたURLを貼り付け、最後に`slack/events`を付け足します。
Short Descriptionにはcommandと同じものを一旦入力しておきます。
![Slack_API__Applications___開発_Slack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418704/8fde987c-2e50-ec6a-64c3-37b8e6ca7e98.png)


コマンド設定が終わったら、再度アプリを再インストールする必要があるので、
Settings > Install App から再インストールをしてください。

これで完成です！
slackで先程設定したコマンドを入力すると、モーダルがでてくるようになると思います！