どうもおはようポテト(@ohayoupoteto22)です。
画像に文字を入れてくれるサービス的なの転がってないかな
「URLで指定するだけで画像に文字を入れたい」
「ページごとに入れる文字を変えてOGP画像を生成したい」
という方に向けて「Cloudinaryでの画像の変換の方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
Cloudinaryでやりたかったこと
以前、Peing-質問箱-のようなものを自作してみたことがあったんですが…
その際に一番思考錯誤したのが「どうやってページ(質問)ごとにOGP画像を生成して設定するか」ということです。
設定に関してはこの記事の方法で実現できました↓
【Ruby】ページごとに動的にOGP画像を設定する方法
そこで今回はこのように、画像に文字を入れたかったんですよね。
調べてみたところ色んな方法がありましたが、一番楽そうだったCloudinaryを採用しました。
そもそもCloudinaryってなに？
Cloudinaryというのはクラウドで画像を管理してくれるサービスです。
画像をアップロードしてURLを取得、そのURLをいじる(入れたい文字云々を入れる)だけでその画像を変換してくれる優れもの。
Cloudinaryで画像に文字を入れる方法
会員登録
Cloudinaryを利用するには会員登録が必要になります。
めんどいけどしちゃいましょう。
画像アップしてURLを取得
会員登録が済んだら、画面上部の画像っぽいアイコンのところを押します
そうしたらこのような画面に行くので
ここに変換したい画像をドラッグ&ドロップします
無事画像をアップできたら…
その画像をクリックし、右側にあるURLをコピーします
以下のようなURLが取得できるはずです。
https://res.cloudinary.com/dhyv1iouw/image/upload/v114514/ogp_image_ezngm1.pngURLをいじって文字を入れよう
先ほど取得した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
くるみ
ブログ主
文の後に「,」を入れることによって、色や幅……様々な指定をすることもできます(›´ω`‹ )
まとめ
以上、「Cloudinaryを使って画像を変換・文字を入れる方法」でした。
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
