Cloudinaryを使って画像に動的に文字を入れる方法

という方に向けて「Cloudinaryでの画像の変換の方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

Cloudinaryでやりたかったこと

以前、Peing-質問箱-のようなものを自作してみたことがあったんですが…

その際に一番思考錯誤したのが「どうやってページ(質問)ごとにOGP画像を生成して設定するか」ということです。

設定に関してはこの記事の方法で実現できました↓

【Rails】ページごとに動的にOGP画像を設定する方法

そこで今回はこのように、画像に文字を入れたかったんですよね。

調べてみたところ色んな方法がありましたが、一番楽そうだったCloudinaryを採用しました。

そもそもCloudinaryってなに？

Cloudinaryというのはクラウドで画像を管理してくれるサービスです。

画像をアップロードしてURLを取得、そのURLをいじる(入れたい文字云々を入れる)だけでその画像を変換してくれる優れもの。

Cloudinaryで画像に文字を入れる方法

会員登録

Cloudinaryを利用するには会員登録が必要になります。

めんどいけどしちゃいましょう。

画像アップしてURLを取得

会員登録が済んだら、画面上部の画像っぽいアイコンのところを押します

そうしたらこのような画面に行くので

ここに変換したい画像をドラッグ&ドロップします

無事画像をアップできたら…

その画像をクリックし、右側にあるURLをコピーします

以下のようなURLが取得できるはずです。

https://res.cloudinary.com/dhyv1iouw/image/upload/v114514/ogp_image_ezngm1.png

URLをいじって文字を入れよう

先ほど取得したURLをいじれば画像が変換できます。

https://res.cloudinary.com/dhyv1iouw/image/upload/ここをいじるよ！/v114514/ogp_image_ezngm1.png

上の「ここをいじるよ！」というところに入れたい文字を挿入。

その際に、ただ文字を入れるのではなく、フォントやフォントサイズを指定してあげる必要があります。

l_text:Sawarabi%20Gothic_60_bold:"入れたい文字"

https://res.cloudinary.com/dhyv1iouw/image/upload/l_text:Sawarabi%20Gothic_60_bold:ソロモンちゃんは世界一/v114514/ogp_image_ezngm1.png

画像が変換されてる！文字が入ってますね！

複数の文を入れたいときは「/」で区切って指定してあげます。

https://res.cloudinary.com/dhyv1iouw/image/upload/l_text:Sawarabi%20Gothic_60_bold:ソロモンちゃんは世界一/l_text:Sawarabi%20Gothic_60_bold:ソロモンちゃんは銀河一,y_100/v114514/ogp_image_ezngm1.png

文の後に「,」を入れることによって、色や幅……様々な指定をすることもできます(›´ω`‹ )