Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

DiscordにもWebhookがあります。

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

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

準備

  1. Webhook URL

  2. HTTPクライアント

投稿してみる

とりあえずテキスト

image.png

image.png

このようにContent-Typeapplication/jsonにしてPOSTで送信します。

{
  "content": "Hello from Webhook"
}

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

名前とアイコン、絵文字と改行

image.png

{
  "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

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

image.png

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

image.png

{
  "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

全部盛り

image.png

{
  "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

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

image.png

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

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

image.png

しかしthumbnailをつけると2つまでしか入りません。
image.png

image.png

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

image.png

color

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

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

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

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


WIP

ファイルを送る

Content-Typemultipart/form-dataにしてPOSTで送信します。

image.png

image.png

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

Eai
ニートです
http://mizle.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした