LoginSignup
0
0

More than 1 year has passed since last update.

【Node.js】Slackアプリの作り方

Last updated at Posted at 2023-03-31

まず

Slack Api のサイトへ
https://api.slack.com/apps

「Create an App」をクリック
Image from Gyazo

「From Scratch」をクリック
Image from Gyazo

「App Name」 を入力、
ワークスペースを選んで、
「Creare App」をクリック
Image from Gyazo

こんな画面になる。
Image from Gyazo

この画面はこのままにしておく。


Node.js

$ npm init -y
$ npm i @slack/bolt

環境変数を使うので

$ npm i --save dotenv

以下のファイルを作成する

  • index.js
  • .env

Image from Gyazo

環境変数

.env
OPENAI_API_KEY="OpenAIのAPI"
SLACK_SIGNING_SECRET="SlackのSigning Secret"
SLACK_BOT_TOKEN="SlackのBot User OAuth Token"

SLACK_SIGNING_SECRET

環境変数「SLACK_SIGNING_SECRET」 は以下
Image from Gyazo

SLACK_BOT_TOKEN

環境変数「SLACK_BOT_TOKEN」 は以下

Settings > Install App
Image from Gyazo

このように「Please add at least one feature or permission scope to install your app.」というメッセージが表示されている場合は 

Image from Gyazo

Image from Gyazo

「app_mentions:read bot scope」 を追加。
Image from Gyazo

再度
Install App > Install to workspace
Image from Gyazo

こんな画面になったら「許可する」をクリック
Image from Gyazo

以下をコピーして .env ファイルの「SLACK_BOT_TOKEN」 にペーストする、
Image from Gyazo

 

OAuth & Permissions の
Add an OAuth Scope で
メッセージ送信の機能の権限設定である chat:write を追加
Image from Gyazo

reinstall しなさいというメッセがきたらそのとおりにする。

コード

以下のコードを入力する。(おうむ返しするアプリ)

index.js
'use strict';

require("dotenv").config();

const { App } = require('@slack/bolt');

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET
});

//メッセージが投稿された時に呼ばれるメソッド
app.message(async ({ message, say }) => {
  await say(message.text);
});
//アプリが起動時に呼ばれるメソッド
(async () => {
  await app.start(process.env.PORT || 3000);
  console.log('⚡️ Bolt app is running!');
})();

実行

ngrok

正式にデプロイする前に、ローカルサーバーで試すためにngrokを使った。

ngrokをインストール

$ npm install -g ngrok

ngrokを起動

$ ngrok http 3000

次のイベントの設定に使う Request URLを控える。
Request URLは 下の画像のURL + /slack/events
Image from Gyazo
たとえば

https://4453-2405-6587-a0-900-d52f.ngrok.io/slack/events

ngrokは起動したままで、 プログラムを実行する。
node index.js

イベントの設定

Event Subscriptions

  • Enable Events の設定を On
  • さきほど控えたRequest URL を入力

Request URL に問題がない場合は入力フィールドの上に緑のチェックマークが表示される。

Image from Gyazo


今の画面を少し下にスクロールして、
「Subscribe to bot events」  > 「Add Bot User Event」をクリック

Image from Gyazo

以下の3つを追加し、「Save Changes」をクリック

  • message.im(オウム返しボットDM内でメッセージを送った際のイベント)
  • message.groups(プライベートチャンネル内でメッセージを送った際のイベント)
  • message.channels(パブリックチャンネル内でメッセージを送った際のイベント)

Image from Gyazo

こんなメッセがでたら、
「reinstall your app」をクリック
Image from Gyazo

Slackアプリの追加

Slackに行き、このアプリを追加したいチャンネルで以下
Image from Gyazo

もしSlackでこんなメッセージがあれば
Image from Gyazo

Slack Apiの管理ページから、
「App Home > Show Tabs」
「Allow users to send Slash commands and messages from the messages tab」の欄にチェックを入れる。

オウム返しアプリが出来た。
Image from Gyazo

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0