プラクティスのOGP画像を1200px × 630pxにリサイズして表示する

[naokinaokiboo]

Issue

• #7423

概要

プラクティスに設定できるOGP画像について、1200px × 630pxでリサイズして使われるよう変更しました。

画像のリサイズの仕様は以下のIssueに記載されています。

• #6415

X（Twitter）で投稿した場合のOGP画像の表示

X（Twitter）で表示されるOGP画像に関しては、1200px × 630pxにリサイズされた画像が、さらに正方形に切り抜かれて表示されます。 （Summary Card | Docs | Twitter Developer Platform）

Facebookで投稿した場合のOGP画像の表示

Facebookで表示されるOGP画像に関しては、1200px × 630pxにリサイズされた画像が、さらにアスペクト比 1.91:1 にリサイズされて表示されます。 （Images in Link Shares - Sharing）

変更確認方法

1. ブランチfeature/resize-ogp-image-in-practiceをローカルに取り込む
2. 以下をそれぞれ確認する

OGP画像の選択/変更の項目の説明文の確認

1. メンターアカウントでログインする
2. プラクティス作成ページ(/mentor/practices/new)、プラクティス編集ページ（/mentor/practices/[practice_id]/edit）にアクセスし、OGP画像の選択/変更の補足説明文が以下のように表示されていることを確認する。

「ここにアップロードした画像が、X（Twitter）、Facebook で投稿した際に表示される画像として使われます。画像サイズが 1200px × 630px でない場合は、アスペクト比を維持したまま1200px × 630pxにリサイズして使われます。」

プラクティスのページで表示される画像の確認

1. メンターアカウントでログインする
2. 任意のプラクティスについて、OGP画像と概要を設定する
3. 手順2で設定したプラクティスのページ(/practices/[practice_id])にアクセスする
4. 設定したOGP画像がリサイズされて表示されていることを確認する
5. プラクティスのページのURLをコピーしておき、ログアウトする
6. ログアウトした状態で手順5でコピーしておいたURLにアクセスする
7. 設定したOGP画像がリサイズされて表示されていることを確認する

X（Twitter）、Facebook投稿時のOGP画像の確認

※ ngrokを使用して、ローカル環境を一時的に外部へ公開する必要があります。公開方法は以下を参照してください。

ngrok の導入手順・使い方 · fjordllc/bootcamp Wiki · GitHub

※テストで使用する画像は任意ですが、念のためテストで使用した画像を以下に置いておきます。 （1000 x 2000, 2000 x 630の画像は内側の四角形がそれぞれ1000px × 630px、1200px × 630pxになるように引いています。）

1. メンターのアカウントでログインする
2. 任意のプラクティスについて、OGP画像と概要を設定する
3. OGP画像が設定されたプラクティスのページのURL（/practices/[practice_id]）をX（Twitter）とFacebookでポストする
4. それぞれ、リサイズされたOGP画像を元に表示されていることを確認する
5. プラクティスのステータスを修了にし、修了投稿するをクリック
6. 喜びを投稿するをクリックしてX（Twitter）でポストする
7. リサイズされたOGP画像を元に表示されていることを確認する

Screenshot

プラクティス編集ページ

変更前

変更後

プラクティス個別ページ

変更前

変更後

X（Twitter）で投稿時

変更前

変更後

Facebookで投稿時

変更前

変更後