(Bubble)チャットワークにメッセージを送信する

Bubbleでチャットワークにメッセージを送信する

概要

Bubbleからチャットワークの指定ルームにメッセージを送信するには、チャットワークの提供するAPIにアクセスします。

APIトークンの取得

チャットワークのAPIにアクセスするには、「APIトークン」という文字列が必要です。

チャットワークにログインし、右上のメニューの「サービス連携」ー「API TOKEN」からAPIトークンを取得します。
パスワードを入力して「表示」をクリックすると、APIトークンが表示されます。
他の人に見られない場所にメモしておきましょう。

ChatworkのAPI TOKENの取得

APIドキュメントの確認

チャットワークのAPIの使い方が、こちらのAPIドキュメントに書かれているので、目を通しておきます。

API Connectorの設定

API Connectorのインストール

BubbleでAPI接続するには、「API Connector」というプラグインを使います。
Bubbleのエディタ画面の左メニューの「Plugins」から「Add plugins」をクリックし、API Connectorを検索してインストールします。

API Connectorのインストール方法

API Connectorをチャットワーク用に設定

API Connectorのページを開き、「Add API」をクリックし、APIの設定を開きます。

  • API nameを入力します
  • Authenticationを「Private key in header」とします
  • Key nameを「X-ChatWorkToken」とします
  • Key valueに、上記でメモしたAPI TOKENの文字列を入力します
API Connecotorをチャットワーク用に設定する

チャットワークに接続できるか確認する

チャットワークにAPI TOKENを使って接続できるか確認します。

上記画面の下の方にある欄に、Nameに「get my information」、URLに「https://api.chatwork.com/v2/me」を指定して、「Initialize call」をクリックします。

チャットワークAPIへの接続確認

以下のように名前やIDが返ってくれば、接続成功です。

チャットワークAPIへの接続結果

「SAVE」をクリックして保存します。

ルームIDの取得

送信先のルームのIDを取得します。

Nameに「get room info」、URLに「https://api.chatwork.com/v2/rooms」を指定して、「Initialize call」をクリックします。

ルーム情報の取得

取得した結果はRepeating Groupで表示すると便利です。

Bubbleの左メニューのDesignタブを表示し、Repeating Gruopを画面に配置します。

  • Type of contentsに「get room info」を選択します
  • Data sourceに「Get data from an external API」を選んで、API Providerに「Chatwork API – get room info」を選択します
Repeating Groupにルーム情報を表示する

Repeating Group内に、Textで room_id と name を表示します。

メッセージの送信確認

上記で取得したルームに、メッセージを送信します。

  • Nameを「post message」
  • Use asを「Action」
  • メソッドは「POST」
  • URLは「https://api.chatwork.com/v2/rooms/[room_id]/messages」 (角カッコなので注意)
  • URLパラメタに、「room_id」と、上記で取得したroom_idを指定し、Privateのチェックをはずす
  • Body typeを「Form-data」
  • パラメタに、「body」と、テスト送信したいメッセージ
チャットワークの指定ルームにメッセージを送信するAPIの設定

「Initialize call」をクリックして、message_idが返ってくれば、テスト送信成功です。

指定したルームにも、テストメッセージが送信されているはずなので、確認します。

Bubbleの画面で入力した文章を送信する

Bubbleの画面で入力した文章を送信しましょう。

Designタブに移り、Multiline inputや送信ボタンを配置します。

送信ボタンのActionを設定します。

ButtonのActionの設定

room_idと送信したいメッセージ(body)を設定します。

送信情報の設定

(tips)Action内でメッセージに改行を入れるには?

Action内でメッセージに改行を追加したい場合は、Bubbleエディタ上では改行が消えてしまうので、Multiline Inputをどこかに配置し、改行1つだけ入れておいて、Action内で改行がわりに使います。

2 Replies to “(Bubble)チャットワークにメッセージを送信する”

  1. 初めまして。
    大変有益な情報ありがとうございます。参考にさせていただきました。

    2点質問があります。

    ・各ユーザーと自分の個別チャットのroom_idをURLパラメータに代入することは可能でしょうか?
    (各ユーザーの個別チャットroom_idをuserデータベースに追加して、List Shifter Karma Wareプラグインを使用してFor文で実行したいと考えています。)

    ・post messageの際に、bodyでmultiline input’s valueで任意のテキストをチャットワークに送りますが、その際に、[to:1111111]のように宛先指定をしたいのですが、可能でしょうか?
    (こちらも上記同様に、各ユーザーのaccount_idをuserデータベースに保存し、[to:〇〇〇]に値を代入する形で、List Shifter Karma Wareプラグインを使用してFor文で実行したいと考えています。)

    お手数おかけしますが、ご返答いただけましたら幸いでございます。
    よろしくお願いいたします。

    1. コメントありがとうございます!

      (1)
      各ユーザーとのチャットとは「コンタクト一覧」に表示されるユーザーとのダイレクトチャットのことですよね。

      /contacts というメソッドにGETでアクセスすると、自分のコンタクト一覧が取得できます。その中に room_id も含まれていますので、これが利用できると思います。

      https://developer.chatwork.com/reference/get-contacts

      (2)
      宛先指定は、「[To:123] 山田さん」のように記述します。123は、相手のaccount_idです。

      /rooms/{room_id}/members というメソッドにGETでアクセスすると、チャットのメンバー一覧を取得できます。その中に account_id や name が含まれていますので、これが利用できると思います。

      https://developer.chatwork.com/docs/message-notation#to
      https://developer.chatwork.com/reference/get-rooms-room_id-members

      お試しください〜

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です