Amazon S3に置いた画像ファイルがTwitter, Facebook, Chatwork, Slack, Discordでどう展開されるか試してみた
はじめに
こんぬづは、お腹の風邪にかかってしまい、体力の衰えをひしひしを感じている田中です。都内ではお腹の風邪が流行っているそうなのでお気をつけください。
さて...
「S3に置いた画像リソースって、各サービスでどんな展開のされ方をするんだろう？(あるいはされないかな？)」
人はふとそんなことを考える瞬間があります。サービス開発の途中で「S3に置くだけで、画像のSNSシェアとかが実現できるならラクじゃね？」と考える瞬間が。なので調べてみました。
また、先にネタバレをするとTwitterでは画像リソースの置かれたリンクを貼るだけでは画像を展開してくれません。なので、近似した解決策として OGPを設定したhtmlをどう展開してくれるか ということも調べてみました。
結果
結果から先にいうと以下の通り。
| サービス | 画像 | OGP |
|---|---|---|
| × | ◯ | |
| ◯ | ◯ | |
| Chatwork | × | × |
| Slack | ◯ | ◯ |
| Discord | ◯ | ◯ |
Twitterだけ、画像のリンクを貼って投稿するだけでは画像が展開されませんでした。おそらく「画像を投稿したいなら、リンクではなくAPI(ないし投稿用フォーム)からパラメータに画像データをセットして投稿してくれ」ということだと思います。当たり前といえば当たり前な気がします。
ここから先はどういう調べ方をしたか、リンクを貼ってみた結果のイメージを載せていきます。
調べ方
- パブリックアクセス権限を付与したS3バケットを作成する
- 作成したS3バケットに、パブリックアクセス権限と
Content-Type: image-jpegを設定した.jpgファイルを置く - (作成したS3バケットにパブリックアクセス権限を付与し、OGPを設定したhtmlファイルを置く)
- 各サービスでファイルのリンクを貼って投稿する
OGPの設定は以下の通り。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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>> |
画像
展開されない。
OGP
※Twitterのカード型のOGPにはいくつかの設定があります。以下を参考にさせていただきました。
画像(投稿)
画像(コメント)
OGP(投稿)
OGP(コメント)
Chatwork
画像
OGP
Slack
画像
OGP
Discord
画像
OGP
まとめ
S3うんぬんというよりは各サービスでの対応のされ方を試した結果になりました。今回調べてみて、思いがけず各サービスがどういった使い方をされたいのかが垣間見えたような気がしました。
参考・関連
