この記事の目的

下記の実装のための知見をまとめてみた

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/