LoginSignup
228
190

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-13

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

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

228
190
0

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
228
190