search

apprentice-team-3 / team-weekly-report

Team Weekly Reportのリポジトリです。
0 stars 0 forks source link

ブラウザからDiscordにデータを送信する #343

Open YNSTakeru opened 4 months ago

YNSTakeru commented 4 months ago

タスク概要

DiscordとJavaScriptを連携させ、ブラウザからDiscordへのメッセージ送信機能を実装します。

背景

現在、Discordへのメッセージ送信はDiscordアプリを介して行われています。これをブラウザから直接行えるようにすることで、ユーザーの利便性を向上させます。

ハイアーキテクチャ

graph LR
  A[ブラウザ] -->|メッセージ送信| B((JavaScript))
  B -->|Discord API経由| C[Discord]

課題

ブラウザから直接Discordへメッセージを送信する機能がない。

解決策

Discord APIとJavaScriptを連携させ、ブラウザからDiscordへのメッセージ送信機能を実装します。

やること

https://intercom.help/yoom/ja/articles/7031857-discord%E3%81%AEwebhookurl%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

webhookURLでfetchから投稿できるっぽい

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Discordのテスト</title>
  </head>
  <body>
    <input type="text" name="content" value="テスト投稿" />
    <button>送信</button>
    <script>
      const $input = document.querySelector("input");
      const $button = document.querySelector("button");

      $button.addEventListener("click", () => {
        const data = "日報のデータ";

        // Webhook URL
        const url = `${$input.value}`;

        // 送信データ
        const payload = {
          content: data,
        };

        // 送信設定
        const options = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        };

        // 送信
        fetch(url, options)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.error(err);
          });
      });
    </script>
  </body>
</html>

やらないこと

ブラウザ以外からのメッセージ送信機能は考慮しません。

テスト方案

ブラウザからメッセージを送信し、Discordで正しく表示されることを確認します。