...

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

Cloudinaryの使い方

どうもおはようポテト(@ohayoupoteto22)です。

画像に文字を入れてくれるサービス的なの転がってないかな

ということで今回は

「URLで指定するだけで画像に文字を入れたい」

「ページごとに入れる文字を変えてOGP画像を生成したい」

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

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

ブログ主

早速いってみよう!

Cloudinaryでやりたかったこと

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

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

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

Rubyの動的なOGP画像【Ruby】ページごとに動的に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:"入れたい文字"
こんな感じで指定してあげる必要があります。上の例だと「Sawarabi Gothicというフォントでサイズは60、太めの文字でお願いします」とお願いしています。

 

上の例に従って実際にURLをいじって、URLにとんでみると,,,
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

 

 

「y_100」って何?

ソロモン

ブログ主

画像のy座標をずらしてるんだよ

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

まとめ

以上、「Cloudinaryを使って画像を変換・文字を入れる方法」でした。

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA