【Bubble】Slackメッセージを送信する方法

概要

Slackは、2013年にアメリカでリリースされたビジネスチャットツールです。日本においても、企業やチーム内のコミュニケーションに活用されています。

今回はBubbleでSlackメッセージを送信する方法を解説します。

Slackメッセージを送信する方法

完成イメージ

今回は以下3パターンを作成します。

1. ユーザーとしてチャンネルへ投稿
2. ユーザーとしてDM(ダイレクトメール)を送信
3. Botとしてチャンネルへ投稿

ユーザーとして送信すると、Slackへこのようなメッセージを送信できました。

Botとして送信すると、Slackへこのようなメッセージを送信できました。

1. Slackプラグインをインストールする

まずBubbleにて、プラグイン「Slack」をインストールします。（Bubbleが公開しているものを選択します）

表示されている「https://{Bubbleアプリの名称}.bubbleapps.io/api/1.1/oauth_redirect」のURLをメモしておきます。これは後ほど使用します。

2. Slack APIを登録・設定する

Slack APIに登録します。こちらではAPIを使ってメッセージ送信するためのアプリを作成していきます。

トップページより「Create an app」を押します。

「From scratch」を選択します。

「App Name」はアプリ名です。任意の名前を設定します。

「Pick a workspace to develop your app in:」は、アプリを開発するワークスペースです。今回は送信先のワークスペースを選択します。

ℹ️ ワークスペースが表示されない場合は「Sign into a different workspace」よりSlackへサインインします。

「Create App」を押し、アプリの作成を完了します。

ここからは作成したアプリの設定を進めます。

手順はこちらの内容に従っており、各項目が完了するとチェックマークが付与されていきます。

まず1つ目のAdd features and functionalityです。

サイドメニューより「OAuth & Permissions」へ移動します。

スクロールすると現れる「Scopes」の項目を設定します。

ここではSlackアプリが行える操作の権限を設定します。Bot Token ScopesはBotとして、User Token Scopesはログインしたユーザーとして動作する際の権限範囲です。

「Add an OAuth Scope」で選択肢が表示されるので、与える権限を選択します。

今回はチャンネル投稿・DM送信の範囲で必要な権限をまとめるので、順に選択していきます。

Bot Token Scopes

OAuth Scope	Description
channels:read	View basic information about public channels in a workspace
chat:write	Send messages as @アプリ名
chat:write.public	Send messages to channels @アプリ名 isn’t a member of
users.profile:read	View profile details about people in a workspace
users:read	View people in a workspace

User Token Scopes

OAuth Scope	Description
channels:read	View basic information about public channels in a workspace
channels:write	Manage a user’s public channels and create new ones on a user’s behalf
chat:write	Send messages on a user’s behalf
users.profile:read	View profile details about people in a workspace
users:read	View people in a workspace

すべて設定できれば完了です。

続いてサイドメニューより「App Home」へ移動し「App Display Name」を設定します。

Bot操作時にSlack上で表示される名前を任意で決めます。今回はこのように設定しました。

サイドメニューより「Basic Information」へ移動します。Add features and functionalityに、設定完了を表すチェックマークが付いているはずです

続けて2つ目のInstall your appを設定します。「Install to Workspace」で、アプリをワークスペースへインストールします。

認証ページに移動するので、権限内容に問題なければ「許可する」を押します。

Install your appにもチェックマークが付きました。

続いて3つ目のManage distributionを設定します。サイドメニューより「Manage Distribution」へ移動します。

「Set Up Redirect URLs」から、リダイレクトページを設定します。

Bubbleでプラグインインストール時に表示されていた「https://{Bubbleアプリの名称}.bubbleapps.io/api/1.1/oauth_redirect」の値を設定し、「Save URLs」で保存します。

続いて Remove Hard Coded informationにチェックを入れます。

最後に「Activate Public Distribution」をクリックし、設定完了です。

3. メッセージ送信を実装する

Bubbleへの実装を進めます。

まずプラグインに「Client ID」「Client Secret」を設定します。

Slack APIのサイドメニューより「Basic Information」へ移動します。

「App Credentials」にて「Client ID」「Client Secret」をコピーします。

Bubbleへ戻り、プラグインへ各値を設定します。

続いてDesignタブにエレメントを配置し、Workflowを設定します。

ログイン機能

メッセージ送信にはSlackログインが必要です。

Buttonを2つ配置し、ログイン/ログアウトボタンとします。

またログインしたことが分かるよう、Textを配置し「Current User’s email」を設定します。

ログインボタンのWorkflowを設定します。

When	Step	意味
Button ログイン is clicked	Account > Signup/login with a social network	Slackでログインする

OAth providerの項目に「Slack」を設定します。

続いてログアウトボタンのWorkflowを設定します。

When	Step	意味
Button ログイン is clicked	Account > Signup/login with a social network	Slackでログインする

メッセージ送信機能

ユーザーおよびBotとしてのメッセージ送信を実装します。

Input3つとButton3つを配置します。

Inputはそれぞれ「チャンネルID」「ユーザーID」「メッセージ内容」の入力欄です。区別しやすいよう、Textで見出しも作成します。

Buttonは最初に紹介した3パターンのメッセージ送信ボタンです。

1. ユーザーとしてチャンネルへ投稿
2. ユーザーとしてDM(ダイレクトメール)を送信
3. Botとしてチャンネルへ投稿

続いて各ボタンのWorkflowを設定します。

まず1つ目は「チャンネルへ投稿」ボタンです。「1.ユーザーとしてチャンネルへ投稿」にあたります。

When	Step	意味
Button チャンネルへ投稿 is clicked	Plugins > Slack – Post to Channel as User	ユーザーとしてメッセージを送信

Channel IDに「Input チャンネルIDを入力’s value」、Messageに「Input メッセージを入力’s value」を設定します。

2つ目は「DM送信」ボタンです。「2.ユーザーとしてDM(ダイレクトメール)を送信」にあたります。

When	Step	意味
Button DM送信 is clicked	Plugins > Slack – Send a Message as User	ユーザーとしてメッセージを送信

Recipient User IDに「Input ユーザーIDを入力’s value」、Messageに「Input メッセージを入力’s value」を設定します。

3つ目は「チャンネルへ投稿(bot)」ボタンです。「3.Botとしてチャンネルへ投稿」にあたります。

When	Step	意味
Button DM送信 is clicked	Plugins > Slack – Post to Channel as Bot	ユーザーとしてメッセージを送信

Channel IDに「Input チャンネルIDを入力’s value」、Messageに「Input メッセージを入力’s value」を設定します。

以上で実装は完了です。

4. 動作確認

プレビューで動作を確認します。

まずログインボタンからSlackログインします。

Slack URLは、ご自身のSlackの左上から確認できます。

続いてユーザーのメールアドレスを入力します。

ここでサインインしたユーザーが、メッセージを送信できます。

完了すると、Bubbleの画面に戻ります。

続いてメッセージ送信です。

まず「1.ユーザーとしてチャンネルへ投稿」をするために、チャンネルIDを取得します。

取得したチャンネルIDとメッセージを入力し「チャンネルへ投稿」を押します。

ログインしたユーザー名で、チャンネルへメッセージが投稿されました。

続いて「2.ユーザーとしてDM(ダイレクトメール)を送信」をするために、送信先ユーザーのユーザーIDを取得します。

取得したユーザーIDとメッセージを入力し「DM送信」を押します。

ログインしたユーザー名で、指定ユーザーへDMを送信しました。

最後に「3.Botとしてチャンネルへ投稿」を確認します。

「1.ユーザーとしてチャンネルへ投稿」と同じ要領で、取得したチャンネルIDとメッセージを入力し「チャンネルへ投稿(bot)」を押します。

作成したSlackアプリの名前で、チャンネルへメッセージが投稿されました。

以上で、Slackメッセージ送信の動作を確認できました。