概要
Bubbleからチャットワークの指定ルームにメッセージを送信するには、チャットワークの提供するAPIにアクセスします。
APIトークンの取得
チャットワークのAPIにアクセスするには、「APIトークン」という文字列が必要です。
チャットワークにログインし、右上のメニューの「サービス連携」ー「API TOKEN」からAPIトークンを取得します。
パスワードを入力して「表示」をクリックすると、APIトークンが表示されます。
他の人に見られない場所にメモしておきましょう。
APIドキュメントの確認
チャットワークのAPIの使い方が、こちらのAPIドキュメントに書かれているので、目を通しておきます。
API Connectorの設定
API Connectorのインストール
BubbleでAPI接続するには、「API Connector」というプラグインを使います。
Bubbleのエディタ画面の左メニューの「Plugins」から「Add plugins」をクリックし、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 TOKENを使って接続できるか確認します。
上記画面の下の方にある欄に、Nameに「get my information」、URLに「https://api.chatwork.com/v2/me」を指定して、「Initialize call」をクリックします。
以下のように名前やIDが返ってくれば、接続成功です。
「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内に、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」と、テスト送信したいメッセージ
「Initialize call」をクリックして、message_idが返ってくれば、テスト送信成功です。
指定したルームにも、テストメッセージが送信されているはずなので、確認します。
Bubbleの画面で入力した文章を送信する
Bubbleの画面で入力した文章を送信しましょう。
Designタブに移り、Multiline inputや送信ボタンを配置します。
送信ボタンのActionを設定します。
room_idと送信したいメッセージ(body)を設定します。
(tips)Action内でメッセージに改行を入れるには？
Action内でメッセージに改行を追加したい場合は、Bubbleエディタ上では改行が消えてしまうので、Multiline Inputをどこかに配置し、改行1つだけ入れておいて、Action内で改行がわりに使います。