【21日目】discord.jsで5000兆円画像を生成するコマンドを作る

はじめに

こんにちは、なりかくんです。
今回は、discord.jsで5000兆円画像を生成するコマンドを作ってみようと思います。

5000兆円画像とは

5000兆円画像って何？となる方も多いと思います。
「5000兆円欲しい!」という画像を見たことはありませんか？まあ、詳しくは以下の記事を見てください（笑）

これを生成するAPIを有志の方が作成されています。今回はこれを利用したいと思います。

プログラムを作る

では、プログラムを作ります。といっても、非常にシンプルで手抜きな感じになりました。

1000choyen.js

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

module.exports = {
	data: new SlashCommandBuilder()
		.setName('1000choyen')
		.setDescription('1000兆円画像生成'),
	async execute(interaction) {
		const modal = new ModalBuilder()
			.setCustomId('1000choyen')
			.setTitle('1000兆円画像生成');

		const topInput = new TextInputBuilder()
			.setCustomId('topInput')
			.setLabel("上部文字列")
			.setStyle(TextInputStyle.Short);

		const bottomInput = new TextInputBuilder()
			.setCustomId('bottomInput')
			.setLabel("下部文字列")
			.setStyle(TextInputStyle.Short);

		modal.addComponents(new ActionRowBuilder().addComponents(topInput), new ActionRowBuilder().addComponents(bottomInput));

		await interaction.showModal(modal);
		const filter = (mInteraction) => mInteraction.customId === '1000choyen';
		interaction.awaitModalSubmit({ filter, time: 360000 })
			.then(async mInteraction => {
				const top = mInteraction.fields.getTextInputValue('topInput');
				const bottom = mInteraction.fields.getTextInputValue('bottomInput');
				mInteraction.reply({
					embeds: [{
						image: {
							url: `https://gsapi.cbrx.io/image?top=${encodeURIComponent(top)}&bottom=${encodeURIComponent(bottom)}&type=png`
						}
					}]
				})
			})
			.catch(console.error);
	},
};

実際に動かしてみる

実際に使ってみます。このようにモーダルウィンドウに入力して送信してみると...

このように画像が表示されます。これで完成です！

以上です、最後までお読みいただきありがとうございました。