DiscordにWebhookでいろいろ投稿する

Webhook、いいですよね。
投稿するための認証やらなんやら考えなくても出されたURLにHTTPでPOSTしてあげればそれで終わりなんですから。

DiscordにもWebhookがあります。

https://discordapp.com/developers/docs/resources/webhook
https://discordapp.com/developers/docs/resources/channel

ドキュメントは詳しいですがサンプルが少ないので書いておきます。

# 準備

1. Webhook URL
   - [Intro to Webhooks – Discord](https://support.discordapp.com/hc/en-us/articles/228383668-Intro-to-Webhooks)
   - この記事を参考に 
https://discordapp.com/api/webhooks/000000000000000000/aaaaaaaaaaaaaaaaaaaaaaaaa  
といった感じのURLをもらえればOK。（MAKING A WEBHOOKのところまで）


2. HTTPクライアント
  - cURL とかなんか好きなの
  - 私は[Advanced REST Client](https://install.advancedrestclient.com/#/install)を使います。

# 投稿してみる

## とりあえずテキスト

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/b53e91df-ddb9-4665-81c8-bca9a6dbfa64.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/a6efe280-7612-c351-c575-e98c8484c073.png)

このように`Content-Type`を`application/json`にしてPOSTで送信します。

```json
{
  "content": "Hello from Webhook"
}
```

**HeadersにContent-Typeを指定し忘れると`400`エラーを返します。コードで書くときに忘れがちなので気をつけましょう。**

## 名前とアイコン、絵文字と改行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/a0d99d8a-e46d-5bdd-3d8f-6fd1a9eb2be3.png)

```json
{
  "username": "Qiitaさん",
  "avatar_url": "https://github.com/qiita.png",
  "content": "😎普通の絵文字\r:sunglasses:Discordの絵文字も:ok_woman:"
}
```

jsonの仕様上そのまま改行はできないので改行したいとこは`\r`を入れます。

なお、1度に送る`content`は2000字までで、それ以上入れて送るとエラーが出ます。

```error.json
{
    "content": [
        "Must be 2000 or fewer in length."
    ],
}
```

ここでの文字数は`content`に入れた実際の文字数で、たとえば`:mountain_bicyclist:`は1文字の絵文字に変換されて表示されますがこの判定では20字とカウントされます。

---

普通に通知するだけとかならURL渡せばDiscordがOGP読んでいい感じにしてくれるのでこれ以上は必要ありません。

お疲れ様でした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/9dbbd4a5-d573-22d2-c5f8-98a3954ed4a2.png)

```json
{
  "username": "Qiitaさん",
  "avatar_url": "https://github.com/qiita.png",
  "content": "注目のタグだ！\rhttps://qiita.com/tags/discord"
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/863a4843-eefc-d1c9-7264-baf024c77068.png)

```json
{
  "username": "SoundCloudさん",
  "avatar_url": "https://github.com/soundcloud.png",
  "content": ":headphones: Listen!\rhttps://soundcloud.com/tags/drumandbass"
}
```


![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/3a026017-b927-e531-3221-febc7f99b3c8.png)

```json
{
  "username": "Kim",
  "avatar_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Kim_Jong-un_at_the_Workers%27_Party_of_Korea_main_building.png/200px-Kim_Jong-un_at_the_Workers%27_Party_of_Korea_main_building.png",
  "content": ":nerd: クールな友達！\rhttps://twitter.com/realdonaldtrump"
}
```

---

……もっといい感じにしたい？

# embed

いい感じっぽい書式でメッセージを作れるのがembedです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/dbe83579-efd4-a161-aa17-248fab98b7de.png)

## 全部盛り

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/f2bf2f39-186e-3d82-4d84-d35111185893.png)

```json
{
  "username": "Qiitaさん",
  "avatar_url": "https://github.com/qiita.png",
  "content": "オススメの記事です！",
  "embeds": [
    {
      "title": "Markdown記法 チートシート",
      "description": "Markdown記法のチートシートです。本ページではQiitaで使用可能なMarkdownのみ掲載しているため、一部原文と異なります。Markdownの原文については、Daring Fireball: Markdown Syntax Documentationをご覧下さい。...",
      "url": "https://qiita.com/Qiita/items/c686397e4a0f4f11683d",
      "timestamp":"2018-04-09T00:00:00+09:00",
      "color": 5620992,
      "footer": {
        "text": "© 2011-2018 Increments Inc.",
        "icon_url": "https://github.com/increments.png"
      },
      "image": {
        "url": "http://lorempixel.com/400/200/cats/"
      },
      "thumbnail": {
        "url": "https://github.com/qiita.png"
      },
      "author": {
        "name": "@Qiita",
        "url": "https://qiita.com/Qiita",
        "icon_url": "https://qiita-image-store.s3.amazonaws.com/0/88/profile-images/1512392618"
      },
      "fields": [
        {
          "name": ":thumbsup:いいね",
          "value": "6353",
          "inline":true
        },
        {
          "name": ":file_folder:ストック",
          "value": "999",
          "inline":true
        },
        {
          "name": ":bookmark_tabs:タグ",
          "value": "Qiita, Markdown"
        }
      ]
    }
  ]
}
```

### fieldsとinline

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/48d048c7-ea63-25db-671a-d6c9c1ab0cd0.png)

```json
{
  "embeds": [
    {
      "fields": [
        {
          "name":"1つめだ",
          "value": "ないようがないよう"
        },
        {
          "name":"2つめだ",
          "value": "ないようがないよう"
        },
        {
          "name":"3つめだ",
          "value": "ないようがないよう"
        }
      ]
    }
  ]
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/e5c67725-1e2e-d690-fc77-cba9d4693198.png)

```json
{
  "embeds": [
    {
      "fields": [
        {
          "name":"1つめだ",
          "value": "ないようがないよう",
          "inline": true
        },
        {
          "name":"2つめだ",
          "value": "ないようがないよう",
          "inline": true
        },
        {
          "name":"3つめだ",
          "value": "ないようがないよう",
          "inline": true
        }
      ]
    }
  ]
}
```

`inlie`をつけると3つまで`field`を同じ行に入れることができます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/94d28790-dec1-7ed5-ff01-50e8d33bc054.png)

しかし`thumbnail`をつけると2つまでしか入りません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/e732881c-a18e-1b95-afda-08e724ab8c2b.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/a4f009a9-57c9-6e60-87f7-f65498f9fb67.png)

なおスマホ版から見ると`inline`でも1行1つです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/8a1bad8b-2d06-de8a-6e2f-5e36e64c7272.png)


### color

`embed`左端の色を決めることができます。

`color`は10進数の数値です。よく使う`#55c500`などは16進数なので

```hex2int.js
parseInt("55c500", 16);  
< 5620992
```

のように変換して使います。

---

# WIP

## ファイルを送る

`Content-Type`を`multipart/form-data`にしてPOSTで送信します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/67b4ae87-e6eb-550e-35f7-2bb05aba9aea.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/88024e9c-e16f-2234-cf17-fb58cb937544.png)

いい感じにやってください。知りません。