【5日目】discord.jsで地震情報をEmbedを使って表示する

はじめに

こんにちは、なりかくんと申します。
前回に、discord.jsで地震情報を出すコマンドを制作しました。今回はその発展で地震情報をEmbed化して表示するように改良してみようと思います。以前の記事を見ていない方は是非見てからこちらの記事をお読みください。

Embedとは？

まずEmbedって何となるかもしれません。Embedというのは埋め込みメッセージです。英語のままですね。
Discord Botを使っていると、以下の画像のような普通のメッセージではないような形のメッセージを見たことがありますよね。これがEmbedです。データなどを表示する際に、通常の文字列では見にくいのでこのようなEmbedにして表示することが多いです。

discord.jsでEmbedを使うには: EmbedBuilderを使う

discord.jsでEmbedを使うには、EmbedBuilderを使います。
以下のようなコードで、画像のようなEmbedを作れます。まあ、説明は無くても大体わかると思いますので省きます。

const { EmbedBuilder } = require('discord.js');

const embed = new EmbedBuilder()
    .setColor(0x46646E)
    .setTitle('タイトル')
    .setAuthor({ name: '名前', iconURL: 'https://i.gyazo.com/43ef3dfee7b402b1582db2ce241731f5.png' })
    .setDescription('ここに説明')
    .setThumbnail('https://i.gyazo.com/43ef3dfee7b402b1582db2ce241731f5.png')
    .addFields(
        { name: 'タイトル', value: '値', inline: true },
        { name: 'タイトル', value: '値', inline: true },
        { name: 'タイトル', value: '値', inline: true },
        { name: 'タイトル', value: '値' },
    )
    .setImage('https://blog.qiita.com/wp-content/uploads/2019/12/8c88f8f4-9783-d36c-a547-e5c799f1253f.png')
    .setTimestamp()
    .setFooter({ text: 'フッター', iconURL: 'https://i.gyazo.com/43ef3dfee7b402b1582db2ce241731f5.png' });

地震情報のために色を作る

Embedには色を付けることが出来ます。今回は、最大深度によって色を変える関数を作りました。switch文を使って少しでもシンプルにできたらなと思っているのですが、もっと最適な書き方があれば申し訳ないです。

function int_color(int) {
    switch (int) {
        case "1":
            return 0x46646E;
        case "2":
            return 0x1E6EE6;
        case "3":
            return 0x00C8C8;
        case "4":
            return 0xFAFA64;
        case "5-":
            return 0xFFB400;
        case "5+":
            return 0xFF7800;
        case "6-":
            return 0xE60000;
        case "6+":
            return 0xA00000;
        case "7":
            return 0x960096;
        default:
            return 0x000000;
    }
}

これらをまとめる

では、これらをまとめてEmbedにまとめてみました。全体のコードはこのようになりました。

earthquake.js

const { SlashCommandBuilder, EmbedBuilder } = require('discord.js');
const request = require("request");

module.exports = {
	data: new SlashCommandBuilder()
		.setName('earthquake')
		.setDescription('地震情報を取得'),
	async execute(interaction) {
		let getData = await getEarthquake();
		const embed = new EmbedBuilder()
			.setAuthor({ name: getData.Control.Title })
			.setTimestamp(new Date(getData.Control.DateTime).getTime());
		if (getData.Control.Title == "震源・震度に関する情報" || getData.Control.Title == "震源に関する情報") {
			embed.addFields(
				{ name: '発生時間', value: getData.Body.Earthquake.OriginTime, inline: true },
				{ name: '震源地名', value: getData.Body.Earthquake.Hypocenter.Name, inline: true },
				{ name: '深さ', value: `${getData.Body.Earthquake.Hypocenter.Depth}km`, inline: true },
				{ name: '規模', value: `M${getData.Body.Earthquake.Magnitude}`, inline: true },
			);
		}
		if (getData.Control.Title == "震源・震度に関する情報" || getData.Control.Title == "震度速報") {
			let color = int_color(getData.Body.Intensity.Observation.MaxInt);
			embed.setColor(color);
			embed.addFields({ name: "最大深度", value: getData.Body.Intensity.Observation.MaxInt, inline: true });
			let intensity = [];
			for (const prefObj of getData.Body.Intensity.Observation.Pref) {
				for (const areaObj of prefObj.Area) {
					intensity.push(`${areaObj.Name} [${areaObj.MaxInt}]`);
				}
			}
			embed.addFields({ name: "各地の震度", value: `\`\`\`\n${intensity}\n\`\`\`` });
		}
		embed.addFields({ name: "コメント", value: getData.Head.Headline })
		await interaction.reply({ embeds: [embed] });
		function getEarthquake() {
			return new Promise((resolve, reject) => {
				request({
					url: "https://dev.narikakun.net/webapi/earthquake/post_data.json",
					json: true
				}, function (error, response, body) {
					if (error) {
						reject(error);
					} else {
						resolve(body);
					}
				});
			});
		}
		function int_color(int) {
			switch (int) {
				case "1":
					return 0x46646E;
				case "2":
					return 0x1E6EE6;
				case "3":
					return 0x00C8C8;
				case "4":
					return 0xFAFA64;
				case "5-":
					return 0xFFB400;
				case "5+":
					return 0xFF7800;
				case "6-":
					return 0xE60000;
				case "6+":
					return 0xA00000;
				case "7":
					return 0x960096;
				default:
					return 0x000000;
			}
		}
	},
};

実行してみると、このようになりました。前回よりダントツに見やすくなりましたね！

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