おすすめ記事

おすすめ記事一覧

Bubble・Slack(スラック)&Box(ボックス)

Do bubble plugin development by Harshaxsoad

みなさん、ごきげんよう。いかがお過ごしでしょうか。寒い日が続きますが、体調にお気をつけください。本日はノーコードツールbubbleにおけるSlack(スラック)とBox(ボックス)について解説していきます。会社内のコミュニケーションツールとしてSlackを利用されている方も多いかと思いますが、bubbleと一緒に使うことができると利便性がさらに高まるのではないでしょうか。それでは張り切ってLet’s Go!

Slack(スラック)

Slackプラグインを使用すると、bubbleアプリからSlackのワークスペースと対話することができます。Slackでログインしたり、bubbleワークフローを使ってメッセージを動的に投稿したり、リマインダーを設定したりすることができます。

BubbleからSlackに接続する

Slackアプリを作成する

Slack APIページに移動し、Slackワークスペースでログインするか、サインアップします。ログインに成功したら、新しいSlackアプリを作成します。ダッシュボード画面の右上にある「Your Apps」ボタンをクリックし、「Create New App」をクリックすることで作成できます。

Bubbleプラグインセットアップ

bubbleエディタのPluginsタブにSlackプラグインをインストールします。

Slackアプリのダッシュボードに戻り、クライアントIDとクライアントシークレットを確認します。これらの資格情報は、Slackアプリのダッシュボードのメインページ、Slackメニューの「基本設定」タブの下にあります。

ワークスペースのインストール、Oauth の設定、およびスコープ

次のステップでは、アプリをSlackワークスペースにインストールし、SlackアプリでSlack権限スコープを設定します。これを行うには、Slackアプリのダッシュボードの「OAuth & Permissions」タブに移動します。

アプリをインストールする前に、少なくとも 1 つの「パーミッション スコープ」を設定する必要があります。OAuthスコープを設定することで、アプリがアクセスできるデータやアクションが決まります。Slackプラグインを最もうまく使用するためには、以下のユーザースコープとボットスコープをすべて含める必要があります。

ユーザースコープ

ボットスコープ

最後に、SlackアプリでリダイレクトURLを設定します。これは、プラグインタブで設定したものと同じリダイレクトURLでなければなりません。

これで設定も完了し、bubbleアプリからSlackのワークスペースにアクセスできるようになりました!

Slackプラグインの特徴

・Slackでログイン
・ユーザーがSlackにログインすると、アプリから「現在のユーザーのSlackプロフィール」にアクセスすることができます。
・ユーザーとして、チャンネルや他のSlackチームメンバーに直接メッセージを送信することができます。
・bubbleアプリからSlackのリマインダーを自分用に設定できる機能
・チームメンバーをSlackチャンネルに追加する機能
・アプリのボットの名前やアクセス可能なチャンネルなどの情報を取得します。
・アプリBotとしてチャンネルに投稿

Slackのワークスペースと既存のアカウント

Slack OAuthを使用して新しいユーザーアカウントを作成したい場合は、「ソーシャルネットワークでのサインアップ/ログイン」ワークフローアクションを使用して、Slackを選択することで作成できます。

また、既存のbubbleアプリのアカウントでSlackワークスペースを接続することもできます。これを行うには、 ユーザーがすでにログインしている必要がありますが、そのユーザーがすでにサインアップしたメールアドレスと一致するSlackアカウントを使ってOAuthフローを実行します。 これにより、アプリの既存のユーザーは、まったく新しいアカウントを作成することなく、自分のSlackワークスペースにアクセスすることができます。

ユーザーはこのようにしてSlackのワークスペースを切り替えることもできます。すでにログインしているユーザーがOAuthワークフローに進むと、接続する別のSlackワークスペースを選択することができます。フローを通過すると、アカウントはその新しいワークスペースに関連付けられます。

以上ここまでがSlackに関する説明でした。貼り付けてある写真の画面を参考にしながら、作業してみてくださいね。それではここからはBox(ボックス)に関する説明をしていきたいと思います。

Box(ボックス)

developer(ディベロッパーログイン)

エンタープライズIDについての注意点 :個人アカウントをお持ちの方は、エンタープライズアカウントと同じ手順でご利用いただけます。ディベロッパー(developer)としてログインすれば、誰でも自動的にエンタープライズIDを取得します。

1, developer.box.com にアクセスして Box アカウントでログインし、ディベロッパーとしての機能を有効にします。

2, ディベロッパーコンソールで「新しいアプリを作成」をクリックします。

3, エンタープライズインテグレーションを選択します。

4, JWT(サーバー認証)で0Auth 2.0を選択します。

5, アプリに名前を付けて、「作成」をクリックしてから「アプリを見る」をクリックします。

6, 下にスクロールして公開鍵を追加します。この時点で、まだ2段階認証を行っていない場合は、2段階認証を設定するように求められます。

7, bubbleエディタを開き、設定 > APIに移動し、”Download public JSON web key “をクリックします。

8, テキストファイルの内容をすべて Box コンソールの公開鍵フィールドにコピーします。

9, これで、短い公開鍵IDが表示されます – それをコピーして公開鍵IDに貼り付けて、bubbleエディタのBoxプラグインの設定に入れます。

10, 必要に応じて、「アプリケーションスコープ」と「高度な機能」を設定します(後でこれらの設定を変更した場合は、ステップ16に従ってください)

11, スクロールして、クライアントIDをコピー – bubbleのBoxプラグインの設定の両方のクライアントIDとAPIキーのセクションに貼り付けます。

12, クライアントの秘密をコピー – Box プラグイン設定のクライアントの秘密セクションに貼り付けてください。

13, Boxのインターフェイスで、左側の “一般 “をクリックして、ユーザーIDと企業IDを見つけてコピーします – bubbleのBoxプラグイン設定のユーザーIDと企業IDのセクションに貼り付けます。

14, Boxインターフェイスで、右上のアカウントドロップダウン > 管理者コンソール をクリックします。

15, ブラウザの右上にある歯車のアイコンをクリックして、「ビジネス設定」をクリックします。

16, タブの「アプリ」>「カスタムアプリ」>「新しいアプリを許可する」をクリックします。

17, Box プラグインの設定で入力した API キーと同じクライアント ID を入力します。次に「次へ」をクリックして承認します。

知っておくと便利なコト

・アップロードは、アップロード要素に設定したフォルダ内のメインアカウントに移動します。
・モノを削除するとデータレコードとしてbubbleから削除されるので、アプリとしては消えますが、ファイルはBoxアカウントに残ります。
・データ > bubbleのプライバシーでプライバシー設定を設定することができることを忘れないでください。
・エレメントにファイルをドロップすると自動的にBoxにアップロードされますが、bubbleにアップロードしているかのように扱い、モノを作成してデータを参照できるようにしておく必要があります。

まとめ

いかがだったでしょうか。今回の記事は文面を見るよりも、貼り付けた写真を中心にみていただけると作業しやすいかと思います。それではまた別の記事でお会いしましょう。See You!

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. 記事作成

    Bubble・APIを定義つける

  2. 記事作成

    Bubble・カスタムイベントの使用とプログラミング時のヒント

  3. Bubbleのお助けツール、ショートカット、操作補助

  4. Adalo Resource・マーケットプレイスペイメント後編(Stripe)(スクリーンとコンポー…

  5. Adalo Resource・地図と各種グラフ(スクリーンとコンポーネントセクション)について

  6. 記事作成

    Bubbleのバルク操作・コメント・コラボレーションを紹介!!

  7. SaaS画像

    Shopify

  8. 記事作成

    【ブログ運営者必見】サイトにCTAを設置できる「HelloBar」をご紹介!

  9. 記事作成

    Bubbleのアカウント管理・プラン・請求について解説!!

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. top_image

おすすめ記事一覧

  1. Productivity
  2. 飲食店 会計
  3. 記事画像
  4. 記事画像
  5. top_image
PAGE TOP