この記事の目的
下記の実装のための知見をまとめてみた
- OGP画像に可変のテキストを入れたい
- dynamic URLを使い、加工したい
- ただし、他のユーザーがURLをいじって画像を大量に作成できないように制限をかけたい
- transformationをサービスドメインから出ないとできないようにしたい
- 閲覧には逆に制限をかけたくない（少なくともOGPを取得するであろうtwitterからは見れるように）
cloudinaryの用語解説
dynamic URLとは？
URLを変更することで画像を加工できる機能。今回はogpに記事のタイトルを入れて動的にしたいんだけどこのdynamicurlでテキストをoverlayでいれる。
signed delivery urls
下記のsigneddeliveryurlを使うことでtagで作成しないと画像を生成できないようにする。これで他人に勝手に大量生産される心配がなくなる。
「Signed delivery URLs」
https://cloudinary.com/documentation/control_access_to_media#signed_delivery_urls
railsでOGP生成の全体仕様
全体の流れとしては下記
- cloudinary_gemの導入
- cloudinaryのdashboardからcloudinary.ymlを設置
- metatagsの導入
- ogptagにcl_image_pathでurlを生成し、いれる
gemの導入
rails導入ドキュメント
https://cloudinary.com//documentation/rails_integration
gem 'cloudinary'
cloudinaly初期設定
cloudinaryのdashboardからcloudinary.ymlを設置
ここのymlを落としてconfigディレクトリ内に設置
cloudinary内の設定
- Strict transformationsをenabledに
- Strict transformationsは許可された変換のみできる。ユーザーがurlを変更したら自由に画像変換できるだと変な画像を意図的に作られたり大量に画像を生成されてしまう恐れがるため、それを避けるための機能
- https://cloudinary.com/documentation/control_access_to_media#strict_transformations
- Restricted media typesにfetchedurlなど対象を
carrierwaveをいれるか
「CarrierWave integration」
https://cloudinary.com/documentation/rails_carrierwave
model経由でuploadしたい場合はcarrierwaveでやると簡単。基本、form_withなどでuploadする場合はこのパターンかなと。今回OGPの生成はすでにuploadずみの画像を加工するのでuploadではない。よって今回はcarrierwave経由ではない。
OGP変換の場合はuploadじゃなくてimageの変換になる
rubyでcloudinaryのurlを生成する場合
- imgタグごと発行するなら→cl_image_tag
- urlのみなら→cl_image_path
画像pathの設定
<% set_meta_tags title: "",
description: "",
image: cl_image_path("question_ogp.png",
:transformation=>[
{:width=>500, :crop=>"scale"},
{:width=>470, :overlay=>{:font_family=>"Arial", :font_size=>25, :text=>""}, :crop=>"fit"}
],
:sign_url=>true
)
%>
- cl_image_pathでurlのみ生成
- 外側の画像自体の大きさを設定し、内側を470で設定し、その中で文字をcropで折り返されるように設定している
参考資料
gem
https://rubygems.org/gems/cloudinary
cloudinary自身が公式のgemを出してくれている
document
https://cloudinary.com//documentation/rails_integration
「Cloudinary + Rails 画像アップロード」
https://qiita.com/ttexan/items/a1004121e806c477d030
「Rails + Cloudinaryで画像を最適化しよう！」
https://blog.favy.co.jp/8554/