2020-04-30

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

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

安全性

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

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

Discord側の設定

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

サーバーの作成

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

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

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

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

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

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

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

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

これで画面は閉じて良い。ウェブフック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_dialogはtrueになると成功メッセージのダイアログが開く。

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

  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;
        });
      }
    }
  }