slack app 作成してBoltに入門
1/7 Bolt入門ガイド> アプリを作成する
----
ブラウザでログイン
Create Appボタン(1つもなかった場合はデカデカと緑色のボタンがある)
アプリがある場合は、左上のアプリの選択ボタンの中に「Create App」ボタンがある
From scratch
Use our configuration UI to manually add basic info, scopes, settings, & features to your app.
設定UIを使用して、基本情報、スコープ、設定、および機能を手動でアプリに追加します。
From an app manifest
Use a manifest file to add your app’s basic info, scopes, settings & features to your app.
マニフェストファイルを使用して、アプリの基本情報、スコープ、設定、および機能をアプリに追加します。
----
From scrachを選択
App Name: helloworld
Pick a workspace to develop you app in:箱
Keep in mind that you can’t change this app’s workspace later. If you leave the workspace, you won’t be able to manage any apps you’ve built for it. The workspace will control the app even if you leave the workspace.
このアプリのワークスペースは後で変更できないことを覚えておいてください。ワークスペースを離れると、そのワークスペース用にビルドしたアプリを管理できなくなります。ワークスペースを離れても、ワークスペースはアプリを管理します。
By creating a Web API Application, you agree to the Slack API Terms of Service.
Web APIアプリケーションを作成することで、Slack API利用規約に同意したものとみなされます。
作成
----
2/7 Bolt入門ガイド> トークンとアプリのインストール
アプリがインストールされるとトークンが発行される
そのトークンを使って、アプリはAPIを叩く(OAuth利用)
Slackアプリで使用できるトークンは3種類
ユーザートークン
ボットトークン
アプリレベルトークン
ユーザートークン
認証したユーザーに成り代わってAPIを叩く
10人がインストールすると、1つのワークスペースにトークンが10個になる
ボットトークン
最初にインストールされた時点で1つのトークンが発行される
1つのワークスペースに1つのトークン
ほとんどのアプリで使用されるのはボットトークン
アプリレベルトークン
すべてのワークスペースを横断する
WebSocketコネクションを確立するために使われる
このガイドでは「ボットトークン」と「アプリレベルトークン」を使用する
左のサイドバー > OAuth & Permissions
Scope枠にあるBot Token Scopeまでスクロール > Add an OAuth Scopeをクリック
chat:write というスコープだけを追加
上までスクロールして、「Install App to Workspace」をクリックして、インストール
そうすると、ワークスペースに1つだけのトークンがでる
code:Bot User OAuth Token
xoxb-〇〇-△△-▢▢
控える
----
3/7 Bolt入門ガイド> ローカルプロジェクトの設定
code:shell
mkdir bolt-slack-app-helloworld
cd bolt-slack-app-helloworld
npm init
name,versionなど不要なため、最小限にすると
code:package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
code:shell
code:shell
vi .gitignore
.envrcを追加
2つのクレデンシャルを登録
Basic Information > Signing Secret
控えておいたSLACK_BOT_TOKEN
code:.envrc
# 左のサイドバー > OAuth & Permissions > Bot User OAuth Token
export SLACK_BOT_TOKEN="xoxb-*****"
# 左のサイドバー > Basic Information > Signing Secret
export SLACK_SIGNING_SECRET="*****"
slack/bolt入れてapp.jsを記述
code:shell
npm install @slack/bolt
code:app.js
const { App } = require('@slack/bolt');
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET
});
(async () => {
await app.start(process.env.PORT || 3000);
console.log('⚡️ Bolt app is running!');
})();
code:shell
node app.js
実行されるだけで、HelloWorldもしない
4/7 Bolt入門ガイド> イベントの設定
左のサイドバー > Socket Mode
Enable Socket ModeをEnableにする
Enableにすると、「Generate an app-level token to enable Socket Mode」というモーダルが出る
名前入力を求められる
「helloworld-app-level-token」
Generateボタンを押下
ガイドでは見つけられなかった------ここから
左のサイドバー > Event Subscriptions
Enableにする
ガイドでは見つけられなかった------ここまで
左のサイドバー > Event Subscriptions > Subscribe to bot events
「Add Bot user Event」 > message.channels
を追加(ガイドでは4つできるよとかあるけど、これだけにする)
「Save Changes」ボタンを押下
You’ve changed the permission scopes your app uses. Please reinstall your app for these changes to take effect (and if your app is listed in the Slack App Directory, you’ll need to resubmit it as well).
アプリが使用するパーミッションの範囲を変更しました。変更を有効にするには、アプリを再インストールしてください(Slack App Directory にアプリが登録されている場合は、再提出も必要になります)。
と出たので
左のサイドバー > Basic Information > Install your app > Reinstall to Workspace
5/7 Bolt入門ガイド> メッセージのリスニングと応答
code:app.js
const { App } = require('@slack/bolt');
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET,
socketMode: true,
appToken: process.env.SLACK_APP_TOKEN,
port: process.env.PORT || 3000
});
// "hello" を含むメッセージでトリガーされる
app.message('hello', async ({ message, say }) => {
await say(うぇーい <@${message.user}>!);
});
(async () => {
await app.start();
console.log('⚡️ Bolt app is running!');
})();
1. Slackアプリを @アプリ名 でパブリックチャンネルに参加させる
2. helloと打つ
3. SlackAppが応答する
6/7 Bolt入門ガイド> アクションの送信と応答
(もしHTTPを利用する場合、Slackからイベント送信先であるRequestURLを設定する必要が有る)
押しても何も起きないボタンを出すようにする
code:app.js
const { App } = require("@slack/bolt");
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET,
socketMode: true,
appToken: process.env.SLACK_APP_TOKEN,
port: process.env.PORT || 3000,
});
app.message("hello", async ({ message, say }) => {
// 変わるのはこの部分
await say({
blocks: [
{
type: "section",
text: {
type: "mrkdwn",
text: foobar <@${message.user}>!,
},
accessory: {
type: "button",
text: {
type: "plain_text",
text: "Click Me",
},
action_id: "button_click",
},
},
],
text: うぇーい <@${message.user}>!,
});
});
(async () => {
await app.start();
console.log("⚡️ Bolt app is running!");
})();
ボタンをクリックすると反応するハンドラーを追加
code:app.js
app.action('button_click_foo', async ({ body, ack, say }) => {
// アクションのリクエストを確認
await ack();
await say(<@${body.user.id}> クリック!!);
});
を追加