BubbleでDiscordダイレクトメッセージ送信機能を実装する

こんにちは！

今回の記事では、Discordでダイレクトメッセージ（以下DM）を送信する機能をBubbleで実装する方法をご紹介いたします。以下の記事でご紹介したDiscordチャンネルにメッセージを送信するアプリをBubbleで作る方法の応用版となります。

blog.nocodelab.jp

DMは通常のチャンネルと違いユーザーとのクローズドな環境でのやり取りになるので、うまく活用することでDiscordコミュニティをより活発にしていけるかもしれませんね。

ユーザーと緊密なやり取りがしたい、コミュニティの活気を取り戻したいと考えている方はぜひご参考にしてみてください！！

(1) メッセージ送信方法の確認
(2) ボットアカウントとサーバーの準備
(3) API Connecoterの設定
- (3-1) Create DM API Callの設定
- (3-2) Create Message API Callの設定
(4) ページ・Workflow作成
- (4-1) Create DMパート
- (4-2) Create Messageパート
(5) 動作確認
まとめ

(1) メッセージ送信方法の確認

DMを送信する機能は、２段階で実装していきます。

Step1 DM送信先ユーザーと送信元BotアカウントのDMチャンネルを作成する
Step2 作成したチャンネルにメッセージを送信する

今回はStep1でCreate DM API、Step2でCreate Message APIを使用します。なお、これらのAPIはBotアカウントでしか実行できませんのでご注意ください。

(2) ボットアカウントとサーバーの準備

まずは、メッセージ送信元に使用するボットアカウントとサーバー設定を確認します。

確認内容は、前回の記事の(3) 方法②：Create Message APIでメッセージを送信>(3-1) ボットアカウントの作成～(3-3) サーバー設定の確認と同じになります。同じ手順で準備を行ってください。

(3) API Connecoterの設定

事前の準備が完了したら、API Connectorの設定を行います。以下を参考に設定してください。

名前	値
Authentication	None or self-handled
Shared headers for all calls	Key…`Authorization` / Value…`Bot BOT_TOKEN` ※BOT_TOKEN部には、Discord Developer Portal > 「Applications」>「Bot」タブで確認できる「Token」（ボットトークン）を入力します。ボットトークンの前にBotを付けるのをお忘れなく！

(3-1) Create DM API Callの設定

次に、作成したBot用APIに、DMチャンネルを作成するAPI Callを作成します。

※Create DM APIのドキュメントはこちら

名前	値
Use as	Action
Data type	JSON
HTTP type	POST
HTTP	`https://discordapp.com/api/users/@me/channels`
Headers	Key…`Content-Type` / Value…`application/json`
Body type	JSON
Body	`{"recipient_id":"<recipient_id>"}` ※Key…`recipient_id` / Value…イニシャライズ用に、DMチャンネルを作成したいユーザーのidを入力しておきます。

※「Create DM」は名前から勘違いしやすいですが、DMを作成するのではなく、DMをやり取りするためのDM Channelを作成するAPIという点には注意が必要です！

設定できたら下部の「Initialize call」を押下してイニシャライズを行います。以下の応答が返ってくれば正しく設定できています。ポップアップ下部の「SAVE」を押下して応答を保存します。

応答の一番上の「id」が、これからDMを送信するDMチャンネルです。次のメッセージを送信するステップで使用します。

recipients(list)にはDM送信先のユーザー情報が表示されます。

(3-2) Create Message API Callの設定

次に、作成したDMチャンネルにボットからメッセージを送信するAPI Callを作成します。Bot ActionにAPI Callを新規追加し、以下を参考に設定してください。

※Create Message APIのドキュメントはこちら

名前	値
Use as	Action
Data type	JSON
HTTP type	POST
HTTP	`https://discordapp.com/api/channels/[channel_id]/messages`
URL parameters	Key…`channel_id` / Value…ステップ1で作成したDMチャンネルのid
Body type	Form-data
Parameters	①Key…`content` / Value…`Good evening!` ②Key…`files` / Value…イニシャライズ用ファイルをアップロード

念のためchannel_idが、ステップ1で作成したDMチャンネルのIDになっているか確認します。

ここまで完了すると、実際にDiscordでもDMが確認できるはずです。DMの履歴は、Discordにログイン→画面左のDiscordアイコンを押下して確認できます。

ボットアカウントのDMチャンネルにイニシャライズで送信した通りのメッセージが表示されていますね！

(4) ページ・Workflow作成

それでは、ステップ1とステップ2を実行できるページを作成していきます。

今回は、OAuth2でログインしたユーザーにDMを送信するケースを想定して実装します。

必要に応じてログインユーザーのIDをUser Typeに保存する機能などを追加してみてくださいね！

まずはログイン用のページを作成して、OAuth2ログインを実装します。手順は前回の記事の「実装手順：ユーザー向けアプリ」をご参考ください。

上記に追加して、ログイン後のトップページでログインユーザーの情報を表示する部分にユーザーIDの表示を追加しました。ユーザーIDはDMチャンネルを作成するときに使用します。

表示する動的データは、「Get data from an external API」>Get Current User API Callを選択>idを選択の手順で設定します。

(4-1) Create DMパート

実装ステップ1のDMチャンネルを作成する部分は以下のように作成します。

「recipient_id」の部分にはDMを送信したいユーザーのユーザーIDを入力します。

「Create DM」ボタン押下後に、「body id」の欄に作成したDMチャンネルのチャンネルIDが表示されるよう設定しています。「body id」と、IDを表示したいテキストを一つのグループにし、グループのType of content を「text」に設定します。

では、Create DMに関するWorkflowを設定します。「Create DM」ボタンから「Start/Edit workflow」を押下して新規でWorkflowを作成します。Actionは以下を参考に設定してください。

Step1…「Plugins」>「DISCORD - BOT ACTION - Create DM（作成したCreate DM API Call）」を選択。「recipient_id」には、ページ作成時に配置したInputエレメントの値を設定します。
Step2…「Element Actions」>「Group」>「Display data」を選択。「Element」はチャンネルID表示用に作成したグループを、「Data to display」にはStep1の応答として得られる作成したチャンネルのIDを設定します。

(4-2) Create Messageパート

実装ステップ2のDMチャンネルにメッセージを送信する部分は以下のように作成します。

「channel id」にはメッセージを送信するチャンネルのIDを、「content」にはメッセージ本文を、「files」のファイルアップローダーでは送信するファイルをアップロードします。

では、Create Messageに関するWorkflowを設定します。「Send Message」ボタンから「Start/Edit workflow」を押下して新規でWorkflowを作成します。Actionは以下を参考に設定してください。

Step1…「Plugins」>「DISCORD - BOT ACTION - Create Message（作成したCreate Message API Call）」を選択。「channel_id」には、チャンネルID入力用に配置したInputエレメントの値を、「content」には、メッセージ本文入力用に配置したInputエレメントの値を、「files」のDynamic liskには、ファイルアップローダーの値を設定します。