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

<img width="632" alt="embed message sample screen shot 2018-11-02 18.11.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/243714/6cdef67f-e33c-37b9-1428-b499f569e578.png">

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

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

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

```js
message.channel.send(
  {embed: {
    color: 16757683,
    description: 'やっはろー'
  }}
);
```

<img width="321" alt="スクリーンショット 2018-11-02 20.04.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/243714/5e2b4553-27e0-d64b-d6ec-780383d8f0e4.png">

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

```js
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
      }
    ]
  }}
);
```
<img width="638" alt="スクリーンショット 2018-11-04 15.20.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/243714/81413ad0-b678-d470-b37c-53cf4eed2e5e.png">


~~左側のカラーバー色を指定できる**color**プロパティの値は10進数(RGB)である必要があります。
`#FFFFFF`のようなカラーコードは16進数で表されているため、[こちら](http://iroempitsu.net/zukan/tl-hexdec.htm)等を利用して10進数へ変換して下さい。~~

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

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



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

```js
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だよ"
      }
    ]
  }}
);
```
<img width="603" alt="スクリーンショット 2018-11-04 15.10.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/243714/a1182637-eef2-2f62-2f34-1650afd604ee.png">

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

```js
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
      }
    ]
  }}
);
```
<img width="559" alt="スクリーンショット 2018-11-04 15.39.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/243714/64165b0d-4b5c-e2c9-733a-7cf63ceda60c.png">


`thumbnail`を指定している場合は最大で２列までに制限されます。
<img width="561" alt="スクリーンショット 2018-11-04 16.29.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/243714/a2844a7c-9ec6-3b58-0a0d-9026a3f6d663.png">


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

スマホアプリから見た場合は一列に表示されてしまう↓
![IMG_720E96364396-1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/243714/22db171d-73f7-7551-dd1b-c70be99e59c7.jpeg)

#embedの注意点
**Discordの設定でリンクプレビューをOFFにしているユーザには埋め込みメッセージが表示されません。**
![スクリーンショット 2018-11-05 4.16.46.png](https://qiita-image-store.s3.amazonaws.com/0/243714/46d96943-e022-f19e-49ec-23d2e2388dca.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