この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんぬづは、小学生の弟の誕生日プレゼントに、カードゲームのブースターパックを箱買いして夢を与えた田中です。
さて...
「S3に置いた画像リソースって、各サービスでどんな展開のされ方をするんだろう？(あるいはされないかな？)」
人はふとそんなことを考える瞬間があります。サービス開発の途中で「S3に置くだけで、画像のSNSシェアとかが実現できるならラクじゃね？」と考える瞬間が。なので調べてみました。ちなみに以下の記事の続きです。
結果
結果から先にいうと以下の通り。OGPを設定したhtmlも調査対象に含んでいるのは、前回を踏襲したかったからです。(> Twitterでは画像リソースの置かれたリンクを貼るだけでは画像を展開してくれません。なので、近似した解決策として OGPを設定したhtmlをどう展開してくれるか ということも調べてみました。)
| サービス | 画像 | OGP |
|---|---|---|
| GitHub issue | × | × |
| LINE | × | × |
| Facebook Messenger | ◯ | × |
残念ながらFacebook Messenger以外のサービスではURLが展開されませんでした。いずれのサービスも画像を添付する機能があるため、おそらく「画像を投稿したいなら、リンクではなく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>>GitHub issue
画像
OGP
LINE
画像
OGP
FaceBook Messenger
画像
OGP
まとめ
またもやS3うんぬんというより、各サービスの仕様を調べる感じになりました。また調べてみたいサービスが出てきたら調べます。
0
