開発中のSSSAPI、ヘルプとかは@nuxt/contentで作ってるけど、
やっぱOGP画像もつけたいな〜と思ったので、いろいろ調べてみたときの備忘録。

Cloudinaryが速いし、文字入れれるし、キャッシュしてくれるらしいので採用。

使い方は簡単。ファイルをアップロードして、所定の形式でURLを組み立てるだけ。

https://res.cloudinary.com/<クラウド名>/<リソースタイプ>/<タイプ>/<変換パラメタ>/<バージョン>/<パブリックID>.<フォーマット>

組み立てるのがめんどうだけど、SDKが用意されている

JavaScriptのSDKもある。
・JavaScript SDK v1
・JavaScript SDK v2(Beta)

v2のほうが便利だけど、ts-nodeなどで使うとエラーが出てうまく行かなかった。。

import { LayerAction } from "./layer/LayerAction";
^^^^^^

SyntaxError: Cannot use import statement outside a module

なので、v1を利用した例。

インストール

$ npm install cloudinary-core --save

使い方: 文字を入れる

使い方はこんな感じ。オプションを設定してURLを取得すればOK。

import { Cloudinary, TextLayer } from "cloudinary-core";

// Cloudinaryインスタンスを作成
const cloudName = "sample";
const cld = new Cloudinary({ cloud_name: cloudName, secure: true });

// 表示する文字
const text = "テキスト";
// 背景画像のpublicId
const imagePublicId = "ogp_image";

const url = cld.url(imagePublicId, {
  transformation: [
    {
      color: "black", // 文字の色
      gravity: "center", // 位置: 中央
      overlay: new TextLayer() // 表示する文字
        .fontFamily(encodeURI("Sawarabi Gothic"))
        .fontSize(60)
        .fontWeight("bold")
        .text(encodeURI(text))
        .toString()
    }
  ]
});

console.log(url);

f:id:wannabe-jellyfish:20210909002529p:plain

具体的な設定値などは、以下を参照。

・Image Transformations for Developers | Cloudinary
・Transformation URL API Reference | Cloudinary

使い方: 文字を折り返す

これだと、長い文字の場合、大変なことになる。

f:id:wannabe-jellyfish:20210909002542p:plain

文字を入れる領域のサイズを指定してcrop: "fit"をつけると、
いい感じに折り返してくれる。

const url = cld.url(imagePublicId, {
  transformation: [
    {
      color: "black",
      gravity: "center",
      overlay: new TextLayer()
        .fontFamily(encodeURI("Sawarabi Gothic"))
        .fontSize(60)
        .fontWeight("bold")
        .text(encodeURI(text))
        .toString(),
      // 追加
      crop: "fit",
      width: 800,
      height: 400
    }
  ]
});

console.log(url);

f:id:wannabe-jellyfish:20210909002556p:plain

・Apply Overlay and Underlay Transformations | Cloudinary

使い方: 複数の文字を入れる

色やサイズが違う文字を複数箇所に入れたい場合はこんな感じ。
transformationに追加すればOK。

const url = cld.url(imagePublicId, {
  transformation: [
    {
      // 略
    },
    { // 追加
      color: "red",
      gravity: "north",
      overlay: new TextLayer()
        .fontFamily(encodeURI("Sawarabi Gothic"))
        .fontSize(36)
        .text(encodeURI("サブテキスト"))
        .toString(),
      y: 80
    }
  ]
});

console.log(url);

f:id:wannabe-jellyfish:20210909002613p:plain

カスタムフォントを利用する

日本語のフォントにしたいなと思ったら、これがかなりハマった。。

Googleフォントが使えるよ！とのことらしいけど、
NotoSansJPとか使えなかったので、カスタムフォントを使う形に。

・Apply Overlay and Underlay Transformations | Cloudinary

カスタムフォントを使うときの注意点はこんな感じ。

拡張子は、.ttf、.otf、.woff2のみ
rawかつauthenticatedでアップロードしないといけない
- なので、Delivery typeをAuthenticatedにしたupload presetを新規作成して
- Media library's upload presetsのRawに設定する必要がある
public_idはアップロード時に指定しないといけない
- 拡張子が必要。拡張子は小文字のみ

1. upload presetを追加する

Setings > Uploadタブを開く。

f:id:wannabe-jellyfish:20210909002658p:plain

次に、下の方にいって、Presetを追加する。

f:id:wannabe-jellyfish:20210909002725p:plain

Upload preset name: 好きな名前(例: custom_fonts)
Delivery type: Authenticated
ほかは初期値のままでOK。「Save」を押して保存

最後に、Media library's upload presets:の
Rawの箇所をさっき作ったcustom_fontsにすればOK。
「Save」を押して保存。

f:id:wannabe-jellyfish:20210909002824p:plain

2. フォントファイルをアップロードする

使いたいフォントをGoogle Fontsからダウンロードしてくる。
・Noto Sans JP - Google Fonts

あとは、アップロードしていく。

Uploadをクリックして、ダイアログを開く。
Advancedを開いて、Public IDを指定
- この例では、notosansjp-medium.otf
アップロードすればOK

f:id:wannabe-jellyfish:20210909002854p:plain

3.カスタムフォントを使う

カスタムフォントを使う場合は、フォントファイルのpublicIdを指定すればOK。

const url = cld.url(imagePublicId, {
  transformation: [
    {
      color: "black",
      gravity: "center",
      overlay: new TextLayer()
        .fontFamily("notosansjp-medium.otf") // カスタムフォントのpublicIdを指定
        .fontSize(60)
        .fontWeight("bold")
        .text(encodeURI(text))
        .toString()
    }
  ]
});

console.log(url);