Cloudinaryで動的にOGP画像を爆速で生成する方法【NotoSansJPを使用】

どーも、ぐるたか@guru_takaです。

動的にOGP画像を生成する際に、Cloudinaryを使うと便利!という記事をみて、実際にやってみました。結論、超簡単に爆速で動的なOGP画像が無料で作れます。マジで便利です!

参考 Cloudinaryで動的にOGP画像を生成する方法 | Cat Knows

ここでは、備忘録もかねて、やり方をメモします。日本語フォント「NotoSansJP」を使いたかったので、フォントのアップロード方法をまとめています。

主な手順

STEP.1
cloudinaryにサインアップ
STEP.2
適当な画像をアップロード
STEP.3
アップロードした画像リンクを編集
STEP.4
NotoSanJPをcloudinaryにアップロード

STEP1:Cloudinaryにサインアップ

まず、Cloudinaryにサインしましょう!
公式 | Cloudinary

必要事項を入力すれば簡単にサインできます。

サインアップに成功すると、登録したメールアドレス宛に認証メールがくるので、忘れないように必ず押しましょう!

注意
メール認証を忘れると、動的にOGP画像を生成できなくなります。

STEP2:適当な画像をアップロード

catnoseさんのブログの画像を拝借し、Cloudinaryにアップロードします!


引用:Cloudinaryで動的にOGP画像を生成する方法

STEP3:アップロードした画像リンクを編集

次に、アップロードした画像のリンクを取得しましょう!

すると、以下のようなリンクがコピペできます

URL
https://res.cloudinary.com/gurutaka/image/upload/v12345678/ogp.png

ここで、https://res.cloudinary.com/gurutaka/image/upload/~~~/v12345678/ogp.png~~~の部分に動的なOGP設定をします。

設定方法はcatnoseさんの記事を引用させて頂きます!

l_text:フォント種類_フォントサイズ_ウェイト:配置するテキストundefinedオプション

・フォント種類
GoogleFontから選ぶ。公式のサポートページでは「GoogleFontのフォントはすべて使える」と書かれていたが、比較的最近追加されたNotoSansJPなどの日本語フォントは使えなかった。なぜか「Sawarabi Gothic」だけは使えたので今回はコレで試すことにする。ちなみにフォント名の半角スペースは%20で置き換える

・フォントサイズ
絶対値(px)で指定する。単位は含めない。

・ウェイト
太字にしたい場合はboldを指定する。記載しなかった場合はnormalになる。

・配置するテキスト
ここにOGP画像に載せるテキストを書く。

・オプション
半角カンマ区切りで書く。テキストカラーなどはここに。

引用:Cloudinaryで動的にOGP画像を生成する方法

他にもこんな設定ができます。

  • co_rgb:色
  • w_幅:テキストの表示幅
  • c_fit:自動で改行してくれる

catnoseさんが紹介している完全なURLを参考に試してみましょう。

https://res.cloudinary.com/hoge/image/upload/l_text:Sawarabi%20Gothic_50_bold:これはOGPテキストです!,co_rgb:333,w_500,c_fit/v12345678/filename.png

引用:Cloudinaryで動的にOGP画像を生成する方法

たったのこれだけの手順で、動的OGP画像が作れます!!

こんな風に複数のテキストに異なる設定をすることもできます。

URL
https://res.cloudinary.com/gurutaka/image/upload/l_text:Sawarabi%20Gothic_50_bold:動的OGP画像ができた!,co_rgb:333,w_500,c_fit/l_text:Arial_45_bold:Hello%20World,co_red,y_100/v12345678/ogp.png

STEP4:NotoSanJPをcloudinaryにアップロード

なぜかcloudinaryで使えるデフォルトの日本語フォントは、Sawarabi GothicとSawarabi Minchoしか使えません。

これでは不便すぎるので、Noto Sans JPをcloudinaryにNodejsでアップロードして、使えるようにします。

まずはgoogle fontsからNoto Sans JPをダウンロードしましょう。
Google Fonts

作業フォルダはこんな感じ!

upload_fonts_cloudinary
├── Noto_Sans_JP
├── index.js
├── node_modules
└── package-lock.json

コードはこちら

upload_fonts_cloudinary/index.js
const cloudinary = require('cloudinary')

cloudinary.config({
  cloud_name: 'gurutaka',
  api_key: '123456788',
  api_secret: '~~~~~~~~~~~~~~~~~'
})

cloudinary.v2.uploader
  .upload('./Noto_Sans_JP/NotoSansJP-Bold.otf', {
    resource_type: 'raw',
    type: 'authenticated',
    public_id: 'notosansjp-bold.otf'
  })
  .then(x => console.log(x))
  .catch(x => console.log(x))

cloud_nameは以下を意味します!

またAPIキーとアクセストークンは以下にあるので、コピペしましょう。

後はNodejsで起動させるだけ!

コマンドライン
$ node index.js

これでNoto Sans JP(Bold)がアップロードできたので、実際に使えるかどうか確かめましょう!

URL
https://res.cloudinary.com/gurutaka/image/upload/l_text:notosansjp-bold.otf_60_bold:NoteSanJPに変わってる!,co_rgb:333,w_500,c_fit/v12345678/ogp.png

これで好きなフォントで動的OGPできちゃいます!

参考リンク

参考 Text overlay positioning | Cloudinary Cookbook 参考 Cloudinaryを使って画像にNoto Sans CJK JPでテキストをオーバーレイする方法 - カモメ’s blog 参考 Cloudinaryで動的にOGP画像を生成する方法 | Cat Knows

コメントを残す