こんにちは。ファンリピートの鳴海です。
今回はBubbleでシステムを運用している際に、リストを特定の時間にSlack通知させる実装について、説明していきたいと思います。
またBubbleやSlack APIについての開発や実際に画面を作成していますので、よければご覧ください。
Bubbleとは?
![](https://funrepeat.com/wp-content/uploads/2023/03/ace3aea25053235a4276a8f333615ed9-1.png)
URL:https://bubble.io/blog/content/images/2020/09/Logo-with-clearspace.png
Bubble.ioはプログラミング知識があってもなくても、Webアプリが簡単に制作できるサービスとなっており、
誰でも使えるようなサービスとなっております概要としては下記の通りとなっています。
- ノーコードツールの一つである
- レスポンシブに対応している
- 拡張性が高い
ノーコードツールの一つである
![](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack93.gif)
ドラッグ&ドロップという操作で、Webアプリが制作できます
またアプリをインストールする必要がなく、
クラウドプラットフォームというサイト上でアプリケーションを構築できるので、
インターネットがあればいつでもどこでもアクセスができるため、チームで連携してアプリを作れます
レスポンシブに対応している
![](https://funrepeat.com/wp-content/uploads/2023/03/b7cb78efaa3751854c2d08e295658ab1-1.gif)
画面サイズに合わせて、自動調整してくれる機能があります
BubbleではCSS Flexboxと呼ばれるページ要素のレイアウト方法により、
要素自体に0~100%、px単位で設定ができるため、細かいデザインの設計が可能となっています。
拡張性が高い
![](https://funrepeat.com/wp-content/uploads/2023/03/ac0e180b435a37cff59d03e24cdf5178-1.png)
プラグインでは、UI、機能など様々なプラグインをインストールできます。
マップ機能や検索機能などデフォルトでも様々なシステムが搭載されていますが、
プラグインでは画像をスライドショーでの表示、ヘッダーをハンバーガーメニューなどといった機能があります。
今回はSlackで通知するためのAPI connectorというプラグインを活用して、具体的にどのように活用していくか説明していきます。
Slack Web APIの設定
APIを使うことにより、外部からの処理や通知などの自動化ができるものとなります。
Slack Web APIとは?
予定があったタスクや予約の申し込みなどSlackに通知させたい内容を自動送信してくれるようなBotという
設定するためのツールとなっており、下記の通りで可能です。
今回はメッセージの送信の設定方法について説明します。
- メッセージの送信や削除
- チャンネルの作成や削除、編集
- ユーザー情報の取得
- チャンネルメンバーの追加や削除
- ファイルのアップロードやダウンロード
アプリケーションの作成
初めにSlack APIを通知する準備するために下記のサイトで登録します。
Creat new APPを押下します。
![slackのBot作成](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack89-1024x370.png)
From scratchを押下します。
選択することによって、どのワークスペースかどの範囲かという設定ができます。
![slackのFrom sractch選択](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack88.png)
次に名前を決めて、どのワークスペースか指定し、Create Appを押します。
![slackのBotのApp nameとworkspaceの接続先の設定](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack87.png)
Botを使いたいので、Add features and functionalityを押します。
![slackのAdd freature and functionalityの設定](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack86-1024x593.png)
Botsを押します。
![slackのbotsを選択](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack85.png)
Botの名前やTokenを発行して、Botsを作成していきます。
![slackのreview scopes to addの選択](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack84.png)
次にBotに権限を与えてあげたいので、calls:readを選択します。
権限についてSlackでドキュメントを公開しているので、詳しくみたい方は下記を参照してください。
![](https://a.slack-edge.com/80588/img/services/api_200.png)
![slack botのchat:writeの選択](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack22.png)
追加するとSuccess!とでるので、これでScopeの設定はOKです。
![botのchat write選択後の確認](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack5.png)
次にBotに名前を付けたいので、App Homeを押して、Home画面に戻ります。
![](https://funrepeat.com/wp-content/uploads/2023/03/43fa278fe148f239194ddbafb2bdb0bf.jpg)
そうすると、Your App’s Presence in SlackというSlackの環境設定が表示されるので、Editを押します。
![slack botの名前](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack6-1024x653.png)
ここで通知された時に、名前が表示されるので、わかりやすい名前で設定しましょう。
![slackl botの名前の編集画面](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack7.png)
次にワークスペースに設定したBotをインストールしたいので、Install Appを押下します。
![install appを押下します。](https://funrepeat.com/wp-content/uploads/2023/03/a665f6d01cfb5a50cae7857eb13324b8-1.png)
Install to appを押します。
![作成したbotをworkspaceへインストール画面](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack9.png)
そうすると、許可しますかと求められますので、ここで指定したワークスペースか問題なければ、許可するを押します。
![](https://funrepeat.com/wp-content/uploads/2023/03/66802c7e1cfd2a1c0d813d48f9c41275-1.png)
そうすると、Tokenが発行されますので、誰にも漏れないようにメモしておきます。
このTokenを知られてしまうと、悪用されて、意図しない通知がされてしまう可能性があるので、気を付けましょう。
![slack botのトークン発行](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack11.png)
Tokenの次はClient idとCliend secretというBotに通知するときの認証情報が必要となりますので、
Basic Informationを押下します。
![basic informationから確認](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack12-1024x646.png)
そうすると表示されるので、こちらもTokenと同様に漏れないようにメモしておきます。
![basic informationからclient idとtokenの発行](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack14.png)
Botを招待
次に作成したボットをワークスペースから招待してあげます。招待したチャンネルを開き、チャンネル名をクリックします。
![](https://funrepeat.com/wp-content/uploads/2023/03/5f06e75cf1164df2efd686a2c604d497-1.png)
インテグレーションに移動すると、Appというのがあるので、アプリを追加するを押下します。
![アプリを追加するを押下](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack16.png)
次にどのAppを追加するか問われますので、作成したBotで追加します。
![作成したボットが表示されるので、そちらの追加を押下](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack17.png)
無事にできたら、これでワークスペースにBotが追加されました。
Bubbleでの手順
ワークスペースにBotを追加ができたので、次は通知させるためにBubbleで設定します。
アプリを作成する
初めにこちらのページにアクセスして、Get started for freeからアカウントを作成しましょう。https://bubble.io/
![](https://funrepeat.com/wp-content/uploads/2023/03/de7b6f6b1da82aac190c231375742bf9-1.png)
メールアドレスやパスワードを打ち込み、Start buidlingをクリックすると画像のようなポップアップが表示されるので、Build→Nextボタン→other→Completeと進めてください。
![](https://funrepeat.com/wp-content/uploads/2023/03/398d4bd124d19303ea5c8ebc2b13cc93-1.png)
そうすると登録したメールアドレスにメールが届くので、そちらをクリックしてあげてください。
![Ok got it!を押下](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack21.png)
リンクをクリックすると、Start buildingのボタンがあるので、クリックしてください。
![メール認証が完了](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack43.png)
トップページのCreate a new appをクリックし、Name your appで名前を決めて、他の項目を入力し、Create appをクリックすると編集画面に飛びます。
![アプリ作成時に目的を聞かれるので、適当に入力](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack25.png)
アシスタントというのが左側に表示されるので、Skip application assistantをクリックしてください。これでアプリの登録が完了です。
![skip application assitantを押下](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack26.png)
必要なプラグインをインストールする
APIでSlack通知させるために、今回はAPI connectorというのを使います。
Search for a plugins…で、API connectorと検索し、installをクリックする。
![PluginsタブからAPI connetorをインストール](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack27.png)
Slack APIが使えるように設定する
Add another APIを押下します。
![Api connectorでAdd another APIを押下](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack28.png)
どのAPIかわかりやすいように名前を付けてあげて、expandを押して、そちらにも名前を付けてあげます。
![API nameをセット](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack29.png)
次に下記の通りで設定します。
![use as Action
Data type Json
Post https;//slack.com/api/chat.postMessageで設定](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack30.png)
Use as Action
Actionに変更することで、Workflow上で使えます。
POST
他にも取得する際のGETや削除や作成などがありますが、今回は送信したいので、POSTを選択します。
https://slack.com/api/chat.postMessage
Slack Web APIの1つで、指定したチャンネルにメッセージを投稿するためのURLとなります。これで送る処理ができます。
他にも色々なSlack Web APIがあるので、みてみてください。
![コピーしたslackのトークンと、content-typeをapplcation/jsonに設定](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack31.png)
次に処理を送る際に認証情報を設定してあげます。こちらを設定してあげないと認証情報がありませんとはじかれますので、下記の通りで設定します。
Headersに追加する。
Authorization
Keyに「Authorization」
valueに「Bearer slackで設定した時のトークン」
Bearer認証となりますので、このような入力となります。
Content-type
Keyに「Content-type」
Valueに「application/json」
Content-typeはHTTPヘッダーの一種で、送信されるコンテンツの種類を示すために使用されます。
application/jsonは、送信するデータがJSON形式であることを示します。
JSONは、Web APIでよく使用されるデータ形式の一つであり、JavaScriptオブジェクトと似た構文を持っています。
HTTPリクエストのボディにJSON形式のデータを含める場合、Content-typeをapplication/jsonに設定して、JSON形式であることを示す必要があります。
![body typeとkeyの設定](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack32.png)
Body type JSON
JSON形式で、送り先のチャンネルIDと送る文章などを設定ができます。
Body
{
"channel": "<channel_id>",
"text": "<text>",
}
Keyに「text」、Valueに「こんにちは」
送信できるように「こんにちは」としています。
channel_id、Valueに「チャンネルID」
チャンネルにAppを追加した時のような手順で、チャンネル設定を開き、IDをコピーします。
![slackのチャンネルからIDをコピー](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack33.png)
入力が終わったら、Initialize callを押してテストします。
Bubbleの方ではtrueと来ていれば成功です。
![initialize callでテスト](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack34.png)
Slackの方にも通知が来ています。
![slackで通知の確認](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack35.png)
データ型を設定する
BubbleのDataタブからテーブルを追加して、テキスト型のカラムを追加し、いくつかデータを入れておこうと思います。
Dataタブを開きます。
![Bubbleのデータタブを開く](https://funrepeat.com/wp-content/uploads/2023/03/5cfd3d0f41fdf0ee348b331627ec6d3e-1-1024x493.png)
Slackという名前で作成します。
![slackというテーブルを作成](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack38.png)
次にCreate a new fieldでカラムを追加します。
![messageというテキストカラムを作成](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack40.png)
入力が終わったら、CREATEボタンを押下します。そうすると、messageが追加されているのが確認できます。
次にデータを入れます。
App dataを押します。
![App dataをクリック](https://funrepeat.com/wp-content/uploads/2023/03/bubble-App-data-1024x472.png)
New entryからいくつかデータを追加します。
![New entryからデータをセットします。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack63.png)
今回は「通知1」という形で、5つほど作成します。
![messageに入力し、createを押下](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack45.png)
下記のように追加していれば、OKです。
![](https://funrepeat.com/wp-content/uploads/2023/03/1078386e97d44e23929098fc5b54fe22-1.png)
画面を作成する
追加したデータを一覧に表示させ、ボタンを押すと即日通知と特定の時間で毎日通知させる方法を説明します。
データを表示する
Designタブで、Repeating groupをドロップします。
![Repeating groupをセット](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack47.png)
データのセット
Type of contentでslackを選択します。
Data sourceに加え、Do a search forで取得します。
![repeating groupのdata sourceに do a search forで作成したslackというテーブルでセット](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack48.png)
Typeをslackにし、messageを降順で表示させます。
![sort byをmessage、Descendingを'no'](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack49.png)
次にテキストを表示させたいので、Textエレメントをドロップします。
![テキストエレメントをRepeating group内にセットします](https://funrepeat.com/wp-content/uploads/2023/03/d11566d492af2748ab2cdb9ca2dbe726-1.png)
…edit me…をクリックして、Current cell’s Slack’s messageを選択します。
![](https://funrepeat.com/wp-content/uploads/2023/03/744f44d08013ec453e43f323f801e06c.png)
これでひとまずプレビューしてみます。
![設定が完了したら、previewを押下します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack64.png)
ボタンを追加
2つボタンを追加します。
![Buttonを2つドラッグアンドドロップします。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack54.png)
名前をA、Bで付けておきます。
![ドロップしたエレメントにA、Bで命名してあげます。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack55.png)
即時通知
Aのボタンを押下したら、通知できるようにしたいので、Aのボタンを選択し、Start/Edit workflowを押します。
![Aボタンを押下時の処理を設定していきます。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack57.png)
そうすると自動的にWorkflowのタブに移りますので、PluginからSlack notification – noticationを選択します。
![](https://funrepeat.com/wp-content/uploads/2023/03/fe8a115c8ec7c2eae3d84eb904233442-1.png)
(body).textで通知する内容をセットできます。
![body.textを空にしてください。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack59.png)
ここではRepeating groupにセットしているデータを送信したいので、
RepeatingGroup Slack’s List of Slack:each item’s messageを選択します。
![](https://funrepeat.com/wp-content/uploads/2023/03/039e08159a7808352c3a9d2f456ef3df-1.png)
毎日セットする方法については、Backendの設定が必要となりますので、次のセクションで説明します。
Backendを設定する
Backendでは基本的にAPIでの処理を設定するときに、使われるページで、デフォルトでは表示されていません。
なので、SettingからBackend workflowを使えるようにします。
設定方法
Settingタブを開きます。
![settingタブを開きます。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack61.png)
APIを押します。
![APIタブを開きます。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack62-1024x472.png)
Enable Workflow API and backend workflowsをチェックします。
![Backend workflowを有効にします。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack65-1024x493.png)
ページをクリックすると、Backend workflowが表示されるので、そちらを押します。
Backendの設定
![左上のページからBackendを選択して、押下します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack65.png)
New API workflowを押します。
![](https://funrepeat.com/wp-content/uploads/2023/03/63909cfc393fa86ff2d658ce67e3d744-1.png)
APIの名前をつけます。
![nameにSlack通知と入れておきます。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack68.png)
Parameterにテキストを受け取るようにします。
![parameterの設定で、typeをmessage、typeをtextにします。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack69.png)
Designタブで行った設定と同じく、Slack Notificationを選択します。
![同じ手順で、plugins>slack notificationを選択します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack70.png)
(body).textで先ほどパラメータで設定したmessageが表示されますので、そちらをセットします。
![body textにmessagesを選択します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack71.png)
次にRecurringというAPI処理で、毎日繰り返すような処理を追加します。
![次にReccuring eventを追加します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack72.png)
Event nameとType of thingをセットします。
![Event nameは毎日通知、Type of thingはSlackにします。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack73.png)
次に先ほどSlack通知のAPI workflowを作成したので、そちらを処理に追加します。
![Schedule API workflowをセットします。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack74.png)
API workflowをslack通知で選択し、Scheduled timeをCurrent date/time、messageにはDo a search forでSlackでのリストを取得し、それぞれmeesageのカラムを出力するようにします。
![schdule timeとmessageには、
それぞれ下記のように設定してください。
Current date/time、repeating groupと同じdata source](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack75.png)
毎日送られるようにセット
DesignタブでBのボタンを押下した時の設定します。
![Bボタンを押下時の設定します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack76.png)
繰り返すためにrecurring eventを選択します。
![set/cancel a recurring eventを選択します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack79.png)
API folder
繰り返し通知するAPIフォルダを選択
Workflow thing
Workflow thingにはDo a search forでSlackのテーブルを選択し、
first itemにします。実際に処理が行われる際にはBackendで設定したリストが通知されます。
Frequency
下記のような間隔で選択できます。今回は毎日通知させたいので、Dailyを選択します。
- Daily(毎日)
- Weekly(一週間ごと)
- Monthly(1か月ごと)
- Quarterly(4半期ごと)
- Yearly(1年ごと)
![](https://funrepeat.com/wp-content/uploads/2023/03/fab7a7a72692bcdc7872a6ddc8ef0567-1.png)
これで設定は完了です。
検証
Aのボタンを押下してみます。Slackで通知されていました。
![Aボタン押下後にslack通知されていることを確認](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack81.png)
Bのボタンを押下してみて、Logsでセットしてあるか確認します。
![Bボタンを押下後にBubble Logs>からセットされていることを確認します。](https://funrepeat.com/wp-content/uploads/2023/03/bubble-slack82-1024x274.png)
通知されるまで待ってみて。しっかりと来てました。
![](https://funrepeat.com/wp-content/uploads/2023/03/a12d1718f810aaa6ee03adbad7dc91c3-1.png)
通知後もセットしてあるか、Logsでみると、しっかり次の日にセットされていました。
![](https://funrepeat.com/wp-content/uploads/2023/03/c75415600576e5e9b6b64399f564e61b-1-1024x274.png)
まとめ
リストを特定の時間にSlack通知させる実装について、説明しました。
BubbleではBackendで細かくAPIの設定ができるので、バッチ処理などもできて、便利ですね。
今後も何か他に活用できそうなことがあれば、紹介していきます。