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

(小ネタ)Discord WebhookでTwitterみたいな4枚画像を表示してみる

はじめに

最近、Discordではやっとツイートの埋め込みに複数枚画像が対応しましたね。
こんな感じでツイートのURLを貼るだけで、本物のTwitterのように画像が表示されるようになりました。
image.png
ただ、モバイル版ではまだ対応しておらず、1枚目の画像しか表示されないのが残念ですね。
(Android版では当初対応していたのですが、その後のアップデートで未対応になりました。)

さて、このEmbedの複数画像表示機能、実はWebhookを使えば自前で、しかもTwitter以外の画像でも使用できるようです。
今回は「DiscordにWebhookでいろいろ投稿する」を参考にして、実際に試してみたいと思います。

下準備

先ほど紹介した記事を参考に、チャンネルにウェブフックを追加して「Advanced REST Client」が使える状態にしておいてください。

実験その1

これは冒頭の画像に写っていた私のツイートの埋め込みのデータをAPIで取得し、不要なデータを削除したものです。

{
  "embeds": [
    {
      "url": "https://twitter.com/GrapeColorSoft/status/1205289368786620416",
      "description": "複数枚画像投稿テスト",
      "author": {
        "name": "GrapeColor (@GrapeColorSoft)",
        "url": "https://twitter.com/GrapeColorSoft",
        "icon_url": "https://pbs.twimg.com/profile_images/1063236006135062528/493Dm2lD_bigger.jpg"
      },
      "image": {"url": "https://pbs.twimg.com/media/ELoMRwLVUAAFlm_.jpg:large"}
    },
    {
      "url": "https://twitter.com/GrapeColorSoft/status/1205289368786620416",
      "image": {"url": "https://pbs.twimg.com/media/ELoMRwNU8AEMaoO.jpg:large"}
    },
    {
      "url": "https://twitter.com/GrapeColorSoft/status/1205289368786620416",
      "image": {"url": "https://pbs.twimg.com/media/ELoMRwNUwAAWako.jpg:large"}
    },
    {
      "url": "https://twitter.com/GrapeColorSoft/status/1205289368786620416",
      "image": {"url": "https://pbs.twimg.com/media/ELoMRwMU8AELiyj.jpg:large"}
    }
  ]
}

試しに、これを「Advanced REST Client」でWebhookに送ってみましょう。
image.png
お、上手くいったようですね。パラメータを多少はしょったために、見た目がちょっと違うようですが、複数枚の画像を表示できましたね。
既にJSONデータを見てお気づきになられたかもしれませんが、実はこの複数枚画像、ツイートのEmbedと画像だけのEmbed複数によって構成されているのです。
さらに注目して欲しいのが、urlパラメータの値に全て同じURLが指定されていることに気づかれたかと思います。
どうやらDiscord内部では同じURLを持った画像だけのEmbedが後に続いた場合、画面上では1つのEmbedとして表示するようになっているようです。

実験その2

先ほどはツイートの埋め込みを元に実験してみましたが、上の仮説が正しければ他のサイトの画像でもできるはずですよね。
という訳で別のサイトの画像で試してみましょう。
今回は私の「pixivFANBOX」で実験していきたいと思います。

{
  "embeds": [
    {
      "title": "GrapeColor|pixivFANBOX",
      "url": "https://www.pixiv.net/fanbox/creator/2985748",
      "author": {
        "name": "GrapeColor",
        "url": "https://www.pixiv.net/fanbox/creator/2985748",
        "icon_url": "https://pixiv.pximg.net/c/160x160_90_a2_g5/fanbox/public/images/user/2985748/icon/dLL4qL9wsm2FLb1EvNzC64FZ.jpeg"
      },
      "image": {"url": "https://pixiv.pximg.net/fanbox/public/images/creator/2985748/profile/vpwby6SqjUS2Z9M4NFQuahcy.jpeg"}
    },
    {
      "url": "https://www.pixiv.net/fanbox/creator/2985748",
      "image": {"url": "https://pixiv.pximg.net/fanbox/public/images/creator/2985748/profile/WxUeBmOPefmKqFcnUE5z4SNR.jpeg"}
    },
    {
      "url": "https://www.pixiv.net/fanbox/creator/2985748",
      "image": {"url": "https://pixiv.pximg.net/fanbox/public/images/creator/2985748/profile/6NqUWxUgC3WIj0dRp8bQ6Ayt.jpeg"}
    },
    {
      "url": "https://www.pixiv.net/fanbox/creator/2985748",
      "image": {"url": "https://pixiv.pximg.net/fanbox/public/images/creator/2985748/profile/L6sNRGsQz650TreT0DlzDaOR.jpeg"}
    }
  ]
}

ちょっと画像のURLが長いので見にくいですが、これをWebhookに送ってみましょう。
image.png
お、しっかり表示できましたね。
このように、Twitter以外のサイトのURL・画像でもちゃんと複数枚表示に対応できるようです。

まとめ

ツイートの画像の複数枚表示する機能も、簡単に応用できることが分かって頂けたかと思います。
ただ注意しておきたいのが、やはりurlパラメータが一致していることがキーになっているようで、少しでも違えば別のEmbedとして認識されてしまいます。
また、5枚以上の画像には対応していないらしく、同じ手法で5枚目以降を追加しても表示されないことが分かっています。
それと、やはりモバイル版が対応していないのが一番痛いですね...。

以上、Embedの複数枚画像表示に関する小ネタでした!

GrapeColor
満月の夜に分裂するかもしれません
https://www.pixiv.net/fanbox/creator/2985748
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
ユーザーは見つかりませんでした