【Discord Bot】Vue.jsでDiscordへメッセージを送る機能を実装する

April 30, 2020

DiscordのWebhook機能をつかってWEBからDiscordへメッセージを送る。非常に簡単なので是非トライしてみてほしい。

安全性

今回はメッセージを受信するWebhookを作るだけなのでDiscord内の個人的なメッセージなどを読み取られることはない(連投によるイタズラは可能性がある)。それらの機能は「Discord Bot」と呼ばれている別機能だ。

というわけで今回はWebhookだけなので気軽に実装してみる。

Discord側の設定

まずはDiscord側にメッセージを受け取る側のチャンネルを作る。

サーバーの作成

左側の「+」ボタンを押す

2020 04 30 20h32 01

「サーバーを作成」ボタンを押す

2020 04 30 20h33 06

サーバー名を入力して「新規作成」ボタンを押す

★次にフレンド招待画面が出るがお好みで。基本スキップでOK。

2020 04 30 20h33 56

テキストチャンネルの一般から「チャンネルの編集」を押す

★お好きなチャンネルを作成しても良い

2020 04 30 20h35 37

「ウェブフック」→「ウェブフックを作成」の順で押す。

2020 04 30 20h36 50

下部にウェブフックURLが表示されるので「コピー」ボタンでクリップボードにコピーしておき「保存」を押す。

2020 04 30 20h38 38

これで画面は閉じて良い。ウェブフックURLがわからなくなったら「編集」ボタンから確認できる。

Vue.js側のコーディング

今回はWebhookに接続するライブラリに「axios」を利用する。

これはVue.jsが公式におすすめしており扱いやすいため選択した。

他にもnode-fetchyやrequest等の選択肢があるがお好みで良い。

今回のコード全文

<template>
  <v-container>
    <!-- メッセージフォーム -->
    <v-card class="mx-auto" max-width="800">
      <v-card-text>
        <v-form ref="messageForm">
          <v-textarea v-model="message" :rules="[required]" label="メッセージ"></v-textarea>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="submit">送信</v-btn>
      </v-card-actions>
    </v-card>

    <!-- ダイアログ -->
    <v-dialog v-model="success_dialog" max-width="300">
      <v-card>
        <v-card-title>
          <v-icon color="green">mdi-check-bold</v-icon>送信成功!
        </v-card-title>
        <v-card-text>
          送信されました。
          <br />ありがとうございました。
        </v-card-text>
        <v-card-actions>
          <v-btn @click="success_dialog=!success_dialog">OK</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import axios from "axios";

export default {
  name: "PostForm",
  data: () => ({
    success_dialog: false,
    message: null,
    webhook_url:
      "https://discordapp.com/api/webhooks/なんとか/かんとか"
    required: value => !!value || "メッセージは必須項目です。"
  }),
  methods: {
    submit() {
      if (this.$refs.messageForm.validate()) {
        const data = {
          content: this.message
        };
        axios.post(this.webhook_url, data).then(() => {
          this.success_dialog = true;
        });
      }
    }
  }
};
</script>

解説

vuetify

今回も画面設計にVuetifyというマテリアルデザインのプラグインを利用している。これはnpmのパッケージではなくVueそのもののオプションなのでコマンドプロンプトにて次のコードでインストールする。

vue add vuetify

axiosのインストール

今回POST通信を担うパッケージだ。

npm install axios

importすることを忘れないように

import axios from 'axios'

data部

さきほどのWebhookのurlはdata部に定義。送信するテキストデータもmessageとして定義した。

success_dialogtrueになると成功メッセージのダイアログが開く。

バリデータに関してはここでは説明しないが、フォームの「必須項目」を設定している。

  data: () => ({
    success_dialog: false, //ダイアログのオンオフ
    message: null,
    webhook_url: "https://discordapp.com/api/webhooks/なんちゃら/かんちゃら"
    required: value => !!value || "メッセージは必須項目です。" //バリデータ
  }),

methods部

  methods: {
    submit() {
      if (this.$refs.messageForm.validate()) {
        const data = {
          content: this.message
        };
        axios.post(this.webhook_url, data).then(() => {
          this.success_dialog = true;
        });
      }
    }
  }

this.$refs.messageForm.validate() の行はv-formで囲った中にあるバリデータをすべて通過した場合にのみtrueとなる。つまりここでは必須項目であるmessageになにか入力があればtrueとなり、処理が実行される。

DiscordはPostメッセージのみ受け付けておりcontentキーの中身が実際にメッセージとして表示されるので必ず定義しておく。ここではdataとしている。

axiosでポストするときは axios.post(URL, 送信するオブジェクト) のコードとなる。

その後 .then とつながっているがこれは非同期処理(promise)によるもの。通信が成功したときにthenが走る。また、このカッコの外側に書いてしまうとまだ通信が完了してないうちに次の処理が実行されてしまうので注意(これが非同期処理といわれるもの)

詳しく知りたければpromiseを勉強してほしい。

実際に実行

次のようになる。

Discord側

このようにメッセージが送られて来る。

2020 04 30 21h13 30

本日はここまで

引き続き別記事にてフォームをより実用的にしていく。

所感

DiscordのWebhookは非常に緩い設定なのでURLに直接POSTするだけで簡単にメッセージを送信できる。

これは逆に言えばイタズラで連続ポストされる可能性もあるため対策は自分で考えねばならないのではないだろうか。

とりあえずいたずら防止に関しては後日考えることとする。調べた範囲ではとりあえず公式の対策等はないようだ。

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
仮想通貨のシステムトレードに役立つ情報を配信中。どんな情報を流しても詰まらないトイレ。当BLOGのメインライター。