Amazon S3に置いた画像ファイルがTwitter, Facebook, Chatwork, Slack, Discordでどう展開されるか試してみた

はじめに

こんぬづは、お腹の風邪にかかってしまい、体力の衰えをひしひしを感じている田中です。都内ではお腹の風邪が流行っているそうなのでお気をつけください。

さて...

S3に置いた画像リソースって、各サービスでどんな展開のされ方をするんだろう?(あるいはされないかな?)」

人はふとそんなことを考える瞬間があります。サービス開発の途中で「S3に置くだけで、画像のSNSシェアとかが実現できるならラクじゃね?」と考える瞬間が。なので調べてみました。

また、先にネタバレをするとTwitterでは画像リソースの置かれたリンクを貼るだけでは画像を展開してくれません。なので、近似した解決策として OGPを設定したhtmlをどう展開してくれるか ということも調べてみました。

結果

結果から先にいうと以下の通り。

サービス 画像 OGP
Twitter ×
Facebook
Chatwork × ×
Slack
Discord

Twitterは画像のリンクを貼って投稿するだけでは画像が展開されませんでした。(Chatworkはどちらも展開されないけれど)おそらく「画像を投稿したいなら、リンクではなくAPI(ないし投稿用フォーム)からパラメータに画像データをセットして投稿してくれ」ということだと思います。当たり前といえば当たり前な気がします。

ここから先はどういう調べ方をしたかと、展開のされ方を画像付きで載せていきます。

調べ方

  • パブリックアクセス権限を付与したS3バケットを作成する
  • 作成したS3バケットに、パブリックアクセス権限と Content-Type: image-jpeg を設定した .jpg ファイルを置く
  • (作成したS3バケットに、パブリックアクセス権限を付与してOGPを設定したhtmlファイルを置く)
  • 各サービスでファイルのリンクを貼って投稿する

OGPの設定は以下の通り。

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
    <head>
        <!-- 共通項目 -->
        <meta property="og:title" content="ページのタイトル" />
        <meta property="og:type" content="ページのタイプ" />
        <meta property="og:url" content="ページのURL" />
        <meta property="og:image" content="http://s3.amazonaws.com/tawake-dev/ktanaka117.jpg" />
        <meta property="og:site_name"  content="サイト名" />
        <meta property="og:description" content="ページのディスクリプション" />

        <!-- Twitter -->
        <meta name="twitter:title" content="ページのタイトル" />
        <meta name="twitter:description" content="ページのディスクリプション" />
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@ktanaka117" />
        <meta name="twitter:creator" content="@ktanaka117">
        <meta name="twitter:image" content="http://s3.amazonaws.com/tawake-dev/ktanaka117.jpg" />
    </head>
</html>>

Twitter

画像

スクリーンショット 2017-11-12 11.41.03

展開されない。

OGP

スクリーンショット 2017-11-12 11.41.46

※Twitterのカード型のOGPにはいくつかの設定があります。以下を参考にさせていただきました。

Facebook

画像(投稿)

スクリーンショット 2017-11-12 11.43.37

画像(コメント)

スクリーンショット 2017-11-12 11.43.54

OGP(投稿)

スクリーンショット 2017-11-12 11.43.07

OGP(コメント)

スクリーンショット 2017-11-12 11.43.21

Chatwork

画像

スクリーンショット 2017-11-12 12.08.55

OGP

スクリーンショット 2017-11-12 12.09.23

Slack

画像

スクリーンショット 2017-11-12 11.47.43

OGP

スクリーンショット 2017-11-12 11.48.03

Discord

画像

23515890_1521530874598644_281559312_n

OGP

23513437_1521530867931978_488473442_n

まとめ

S3うんぬんというよりは各サービスでの対応のされ方を試した結果になりました。今回調べてみて、思いがけず各サービスがどういった使い方をされたいのかが垣間見えたような気がしました。

参考・関連