外部サービスからDiscordにメッセージを送る（Webhook)

はじめに

以前からやろうと思っていたのですが、スラッシュコマンドからDiscord関連の開発を初めた経験から、手順が煩雑なんだろうなと思い込んでいたんですが、簡単でした。。。

ただ、管理画面で紹介されている資料かえって分かりににくいので、記事にするほどのものでもないかと思いつつ、丁寧めに記事にすることにしました。
Webhooksへの序章
Webhook Resource

Webhook作成

• 「サーバー設定」を選択

• 「連携サービス」を選択
  

• 「ウェブフック」を選択
  

• 「新しいウェブフック」を選択
  

• 名前と投稿先のチェンネルを選んだら「ウェブフックURLをコピー」をクリック
  

https://discord.com/api/webhooks/0000000000000000000/xxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

これはもちろん実在しないURLですが、こんな形式で発行されています。

まずはシェルからcurlで試す

curlなんて返って難しいわという人は読み飛ばしてくださ。

#!/bin/bash

# Webhook URL
WEBHOOK_URL="YOUR_WEBHOOK_URL"

# メッセージコンテンツ
MESSAGE_CONTENT="Hello, this is a test message sent via webhook!"

# リクエストボディ
REQUEST_BODY="{\"content\":\"$MESSAGE_CONTENT\"}"

# POSTリクエストを送信
curl -X POST -H "Content-Type: application/json" -d "$REQUEST_BODY" "$WEBHOOK_URL"

実行するとこのように届きます。

パラメーター

メッセージを送る以外にできることはたくさんありますが、
node-fetchのサンプルコードを兼ねて２パターン、簡単なものを掲載します。

詳しくは以下を読んでください。
私も正直一部しか試したことがないですが。。。

Execute Webhook

名前とアバター画像の指定

import fetch from "node-fetch";

const webhookUrl = "webhookのURL";

const requestBody = {
  content: "Hello!!",
  username: "やまだたろう",
  avatar_url: "https://example.com/path/to/img.png",
};

fetch(webhookUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(requestBody),
})
  .then((response) => {
    console.log(response.status);
    console.log(response.statusText);
  })
  .catch((error) => {
    console.error("Error sending webhook:", error);
  });

embed

requestBodyのみ書き換えます。

const requestBody = {
  content: "Hello!!",
  embeds: [
    {
      type: "link",
      title:
        "LangChain JSを参考にしつつ、Supabaseで作成したベクトルデータベースの検索を実装してみる",
      description: "zennに書いた記事です。",
      url: "https://zenn.dev/lambta/articles/c55941310e6687",
    },
  ],
};

まとめ

何か自分用に便利なツールを思いついた時、スラッシュコマンドを追加しようと思うと億劫になるのですが、この方法だとかなりお手軽にできますね。

これでアイデアを形にする頻度が増えそうです。