(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内で改行がわりに使います。