0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

DiscordウェブフックをGithub sitesで動かす方法

0
Last updated at Posted at 2025-09-01

はじめに

はじめまして、Qiitaに初投稿させていただきます。下総みなとと申します。

作成経緯

特に私に興味がある人はいないでしょうが、少しだけ今回の記事を作成した経緯について書きます。
私はDiscordで100人超のサーバー運営をしており、そこでの会話も活発です。
このコミュニティは、あるサイトを利用する人の集団なので、そのサイトに関わることも投稿します。
が、私個人が投稿するより、ウェブフックを使った投稿の方が、皆の注目を引けるのではないかと考え、今回の作成に至りました。

私自身、HTMLとCSSにはある程度知識はありましたがJavascriptの作成に関しては全くの素人でしたので、今回はGeminiを利用してコードの修正などを行いました。

コード

HTML

コードはこちらです。
今回は入力内容をtextarea、送信ボタンをbuttonにて作成しました。

<!DOCTYPE html>
<html>
  <body>
  <textarea id="comment"></textarea><br>
  <button onclick="posting()">送信</button>
  </body>
</html>

onclickによって、後述する「posting」という関数を実行します。
()は「関数を実行する」という意味を含んでいるため必ず入力してください。

Javascript

function posting() {
  const discordWebHookURL = "https://discord.com/api/webhooks/000000/XXXXXX";
  // 上にウェブフックのURLを入力

  const commentElement = document.getElementById('comment');
  const messageContent = commentElement.value;

  fetch(discordWebHookURL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      content: messageContent,
      tts: false
    })
  })
  commentElement.value = '';
      // 送信後にtextareaをブランクにする処理。必要ない場合は削除し、特定の文言を入れたい場合はそれを''の中に入れてください。
}

おわりに

以上です。
本当に初期的な装備ですが、私も学習しながら発展させていきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?