国内初!bubble公式開発試験に合格!

【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 ScopeDescription
channels:readView basic information about public channels in a workspace
chat:writeSend messages as @アプリ名
chat:write.publicSend messages to channels @アプリ名 isn’t a member of
users.profile:readView profile details about people in a workspace
users:readView people in a workspace

User Token Scopes

OAuth ScopeDescription
channels:readView basic information about public channels in a workspace
channels:writeManage a user’s public channels and create new ones on a user’s behalf
chat:writeSend messages on a user’s behalf
users.profile:readView profile details about people in a workspace
users:readView 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を設定します。

WhenStep意味
Button ログイン is clickedAccount >
Signup/login with a social network
Slackでログインする

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

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

WhenStep意味
Button ログイン is clickedAccount >
Signup/login with a social network
Slackでログインする

メッセージ送信機能

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

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

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

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

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

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

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

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

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

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

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

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

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

WhenStep意味
Button DM送信 is clickedPlugins >
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メッセージ送信の動作を確認できました。

資料請求

Swoooのサービス資料をダウンロードいただけます。開発支援をご検討の方はぜひご一読ください。

ご相談・お問い合わせ

お客様の新規事業開発やマーケティング活動における課題解決をサポートします。
お気軽にご相談ください。

料金シミュレーション

たった2分で開発費用が分かります。
簡単な質問に答えるだけでお見積りが可能です。