43
29

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 3 years have passed since last update.

Discord.jsでembed (埋め込みメッセージ) を扱う

Last updated at Posted at 2018-11-05
embed message sample screen shot 2018-11-02 18.11.22.png

embed(埋め込みメッセージ)を使うとこんな感じでカッコよく整形されたメッセージをBotに発言させることができます。
オシャレかつ目立つので積極的に使用していきたいですね。

#前提

  • Node.js環境でのDiscord.jsを用いたBot開発を想定しています
  • Discord.jsの解説は省略

#使い方
message.reply()message.channel.send()等のBotに発言させる関数にembedオブジェクトを渡すだけです。

message.channel.send(
  {embed: {
    color: 16757683,
    description: 'やっはろー'
  }}
);
スクリーンショット 2018-11-02 20.04.16.png

#プロパティの種類
embedオブジェクトで扱えるプロパティには以下のようなものがあります。

message.channel.send(
  {embed: {
    author: {
      name: "author name",
      url: "https://discordapp.com", // nameプロパティのテキストに紐付けられるURL
      icon_url: "https://cdn.discordapp.com/embed/avatars/0.png"
    },
    title: "タイトル",
    url: "https://discordapp.com", // titleプロパティのテキストに紐付けられるURL
    description: "This is description. [URLを埋め込むことも出来る](https://discordapp.com)\n" +
                 "***embedの中でもMarkDownを利用できます***",
    color: 7506394,
    timestamp: new Date(),
    footer: {
      icon_url: client.user.avatarURL,
      text: "©️ example | footer text"
    },
    thumbnail: {
      url: "https://cdn.discordapp.com/embed/avatars/0.png"
    },
    image: {
    url: "https://cdn.discordapp.com/embed/avatars/0.png"
    },
    fields: [
      {
        name: "field :one:",
        value: "*ここはfield 1の内容だよ*"
      },
      {
        name: "field :two:",
        value: "~~ここはfield 2の内容だよ~~"
      },
      {
        name: "field :three:",
        value: "__ここはfield 3の内容だよ__"
      },
      {
        name: "inline field :cat:",
        value: "`これはinlineのfieldだよ`",
        inline: true
      },
      {
        name: "inline field :dog:",
        value: "[これもinlineのfieldだよ](https://discordapp.com)",
        inline: true
      }
    ]
  }}
);
スクリーンショット 2018-11-04 15.20.59.png

左側のカラーバー色を指定できるcolorプロパティの値は10進数(RGB)である必要があります。
#FFFFFFのようなカラーコードは16進数で表されているため、こちら等を利用して10進数へ変換して下さい。

【2020/03/23追記】
JavaScriptでは以下のように16進数で表された数値を記述出来るため、必ずしも10進数である必要はありません。

message.channel.send(
  {embed: {
    color: 0x7289da, // 0x{16進数で表された数値}
    ... //省略
  }}
);

##fields
fieldの動きだけもう少し掘り下げて解説します。
###基本的な使い方

message.channel.send(
  {embed: {
    color: 7506394,
    fields: [
      {
        name: "field :one:",
        value: "1つめのfieldだよ"
      },
      {
        name: "field :two:",
        value: "2つめのfieldだよ"
      },
      {
        name: "field :three:",
        value: "3つめのfieldだよ"
      },
      {
        name: "field :four:",
        value: "4つめのfieldだよ"
      },
      {
        name: "field :five:",
        value: "5つめのfieldだよ"
      }
    ]
  }}
);
スクリーンショット 2018-11-04 15.10.50.png

###inline
inline: trueを持たせることでfieldを横に最大3つまで並べることが可能です。

message.channel.send(
  {embed: {
    color: 7506394,
    fields: [
      {
        name: "field :one:",
        value: "1つめのfieldだよ",
        inline: true
      },
      {
        name: "field :two:",
        value: "2つめのfieldだよ",
        inline: true
      },
      {
        name: "field :three:",
        value: "3つめのfieldだよ",
        inline: true
      },
      {
        name: "field :four:",
        value: "4つめのfieldだよ",
        inline: true
      },
      {
        name: "field :five:",
        value: "5つめのfieldだよ",
        inline: true
      },
      {
        name: "field :six:",
        value: "6つめのfieldだよ",
        inline: true
      }
    ]
  }}
);
スクリーンショット 2018-11-04 15.39.59.png

thumbnailを指定している場合は最大で2列までに制限されます。
スクリーンショット 2018-11-04 16.29.20.png

なお画面サイズによっては2列ないし1列に表示される場合があります。

スマホアプリから見た場合は一列に表示されてしまう↓
IMG_720E96364396-1.jpeg

#embedの注意点
Discordの設定でリンクプレビューをOFFにしているユーザには埋め込みメッセージが表示されません。
スクリーンショット 2018-11-05 4.16.46.png
Botの利用者が自分だけだったり少数ならばリンクプレビューをONにするように呼びかければ済む話ですが、不特定多数の利用者を想定している場合はそれなりのデメリットだと思うのでembedを利用する際は少し注意しましょう。

#参考
https://qiita.com/Eai/items/1165d08dce9f183eac74
https://leovoel.github.io/embed-visualizer/
https://anidiots.guide/first-bot/using-embeds-in-messages

43
29
4

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
43
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?