0
1

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.

【目指せ完走賞】なりかくんのDiscordAdvent Calendar 2022

Day 19

【19日目】discord.jsでモーダルウィンドウを使ってメールを送信する

Posted at

はじめに

こんにちは、なりかくんです。
今回は、discord.jsを使ってDiscord上でモーダルウィンドウを使ってメールを送信するプログラムを作ってみようと思います。

モーダルウィンドウについては、16日目の記事に書いていますので是非そちらをお読みください。

今回使うメール送信ライブラリ

今回は、nodemailerというライブラリを使ってみようと思います。
このライブラリのいいところは、非常に簡単に使うことが出来るという点と現在もメンテナンスがされているという点です。

以下のコマンドで簡単にインストールできます。

npm install nodemailer

以下のようにしてメールを送信することが出来ます。

const nodemailer = require('nodemailer');

const transport = nodemailer.createTransport({
    host: 'メールサーバーアドレス',
    port: 465,
    secure: true,
    requireTLS: false,
    tls: {
        rejectUnauthorized: false,
    },
    auth: {
        user: 'ユーザー名',
        pass: 'パスワード'
    },
});
await transport.sendMail({
    from: "差出人",
    to: "宛先",
    subject: "件名",
    text: "内容",
});

モーダルウィンドウでメール送信画面を作る

今回は、モーダルウィンドウを使ってメールの送信画面を作ります。モーダルウィンドウを使うと以下のような画面を簡単に作ることが出来ます。
image.png

この画面を作るコードは以下のようになっています。

const { ModalBuilder, TextInputBuilder, ActionRowBuilder, TextInputStyle } = require('discord.js');

const modal = new ModalBuilder()
    .setCustomId('mailSend')
    .setTitle('メール送信');

const fromInput = new TextInputBuilder()
    .setCustomId('fromInput')
    .setLabel("送信元")
    .setStyle(TextInputStyle.Short);

const toInput = new TextInputBuilder()
    .setCustomId('toInput')
    .setLabel("送信先")
    .setStyle(TextInputStyle.Short);

const subjectInput = new TextInputBuilder()
    .setCustomId('subjectInput')
    .setLabel("件名")
    .setStyle(TextInputStyle.Short);

const htmlInput = new TextInputBuilder()
    .setCustomId('htmlInput')
    .setLabel("内容")
    .setStyle(TextInputStyle.Paragraph);

modal.addComponents(new ActionRowBuilder().addComponents(fromInput), new ActionRowBuilder().addComponents(toInput), new ActionRowBuilder().addComponents(subjectInput), new ActionRowBuilder().addComponents(htmlInput));

await interaction.showModal(modal);

組み合わせる

では、送信するコードとモーダルウィンドウのコードを組み合わせてみます。
以下のようなコードになりました。

mailsend.js
const { SlashCommandBuilder, ModalBuilder, TextInputBuilder, ActionRowBuilder, TextInputStyle } = require('discord.js');
const nodemailer = require('nodemailer');

module.exports = {
	data: new SlashCommandBuilder()
		.setName('mailsend')
		.setDescription('メール送信'),
	async execute(interaction) {
		const modal = new ModalBuilder()
			.setCustomId('mailSend')
			.setTitle('メール送信');

		const fromInput = new TextInputBuilder()
			.setCustomId('fromInput')
			.setLabel("送信元")
			.setStyle(TextInputStyle.Short);

		const toInput = new TextInputBuilder()
			.setCustomId('toInput')
			.setLabel("送信先")
			.setStyle(TextInputStyle.Short);

		const subjectInput = new TextInputBuilder()
			.setCustomId('subjectInput')
			.setLabel("件名")
			.setStyle(TextInputStyle.Short);

		const htmlInput = new TextInputBuilder()
			.setCustomId('htmlInput')
			.setLabel("内容")
			.setStyle(TextInputStyle.Paragraph);

		modal.addComponents(new ActionRowBuilder().addComponents(fromInput), new ActionRowBuilder().addComponents(toInput), new ActionRowBuilder().addComponents(subjectInput), new ActionRowBuilder().addComponents(htmlInput));

		await interaction.showModal(modal);
		const filter = (mInteraction) => mInteraction.customId === 'mailSend';
		interaction.awaitModalSubmit({ filter, time: 360000 })
			.then(async mInteraction => {
				const from = mInteraction.fields.getTextInputValue('fromInput');
				const to = mInteraction.fields.getTextInputValue('toInput');
				const subject = mInteraction.fields.getTextInputValue('subjectInput');
				const html = mInteraction.fields.getTextInputValue('htmlInput');
				await mInteraction.deferReply();
				const transport = nodemailer.createTransport({
                    host: 'メールサーバーアドレス',
                    port: 465,
                    secure: true,
                    requireTLS: false,
                    tls: {
                        rejectUnauthorized: false,
                    },
                    auth: {
                        user: 'ユーザー名',
                        pass: 'パスワード'
                    },
				});
				await transport.sendMail({
					from: from,
					to: to,
					subject: subject,
					text: html,
				});
				mInteraction.editReply(`送信しました!`);
			})
			.catch(console.error);
	},
};

実際に動かしてみると、以下のようになります。まず、モーダルウィンドウに入力して送信ボタンを押します。
image.png
そして、宛先のメールボックスを確認するとしっかりと届いていることが確認できました。
image.png

これを活用するといい感じに何かが作れそうな予感がします(笑)
以上です、最後までお読みいただきありがとうございました。

0
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?