Cloudinaryを使って記事タイトル入りOGP画像を作る方法

QiitaのOGPが可愛すぎて、自分のブログにも導入したい！と思い、
`Cloudinary`を使って記事タイトル入りOGPを作成しました。

▼ twitterに記事を投稿すると、こんな感じ。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/dbde451f-9cd0-f026-10c6-217b7638b3b1.jpeg' width='300' alt='Cloudinaryで作成したOGP画像'>

## Cloudinaryとは？
画像の加工が得意なクラウドサービス。
APIを使用して、画像の変形・配信などができます。

### 料金プラン
基本的には無料で使えますが、上限があります。
料金プランに関しては、下記の記事がわかりやすかったです。

> 参考記事: [Cloudinaryの新しいプランを調べてみた](https://qiita.com/kanaxx/items/b3366025e6715562d8f9)

### SDKが提供されている言語・プラットフォーム
サービス開発における言語はほぼ網羅しています。
対応していない言語で使いたい場合も、URLにパラメータを渡して画像を変形することもできます。

![スクリーンショット 2020-09-01 2.40.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/18f2cb90-396f-e4a2-63e0-8153a67922e4.png)
参考： https://cloudinary.com/documentation


### どんなことができるか

下記の記事がわかりやすかったです。

> 参考記事: [Cloudinaryを使って画像の変換をやってみる](https://qiita.com/kanaxx/items/7d88948c9f8f43cdf760)


## OGPを作ってみる
私のブログは、`nuxt.js`で作っていますが、今回は`component`では使わないため、
`vue`のSDKではなく`JavaScript`のSDKを使いました。

その他言語でも、公式ドキュメントを参考にすればOGPを作成できると思います。

### 0. OGPの背景画像をcloudinaryにアップロード
`cloudinary`に登録し、`Media Library`にOGPの背景画像をアップロードしておきます。

![スクリーンショット 2020-09-01 3.30.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142322/19254017-fabc-8f6c-36d9-cc561cd23502.png)

すると、下記のようなURLが生成されます。

```
https://res.cloudinary.com/ワークスペース名/image/upload/バージョン/画像名
```
にupload以降のURLを変更することで、画像を変形することも可能です。

### 1. インストール
SDKをインストールします。

```
yarn add cloudinary-core
```

### 2. cloudinaryの設定
下記のページを参考に、cloudinaryの共通設定を行います。

> 公式ドキュメント: https://cloudinary.com/documentation/javascript_integration#setup

```plugin/cloudinary.js
import cloudinary from 'cloudinary-core';

export default new cloudinary.Cloudinary({
  cloud_name: 'cheezblog', // Cloudinaryアカウントの名前
  secure: true, // httpsで配信するオプション
});
```

その他のオプションは下記ページ参考に設定ができます。

>公式ドキュメント: https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters


### 3. cloudinaryで指定した画像に、textを配置
公式ドキュメントの「adding_text_captions」を参考に、文字をレイアウトしていきます。

> 公式ドキュメント: https://cloudinary.com/documentation/image_transformations#adding_text_captions

```plugin/generateArticleOgp.js
import cloudinary from '~/plugins/cloudinary';

export default ogpText => {
  const encodeText = encodeURI(ogpText);
  
  // 第一引数は画像名、第二引数はオプション
  return cloudinary.url('ogp_ut3n8b.png', {
    // URLのバージョンの部分
    version: '1598892930',
    transformation: [
      {
        // 文字を重ねる設定
        overlay: {
          // フォントの設定(アップロードしたフォントも使えます！)
          font_family: 'notosansjp-bold.otf',
          // フォントのサイズ
          font_size: 40,
          // 文字を中央寄せ
          text_align: 'center',
          // 表示するテキスト
          text: encodeText,
        },
        // 文字の領域
        width: '600',
        // 文字の色
        color: '#333',
        // 画像を領域いっぱいに表示させる設定
        crop: 'fit',
      },
    ],
  });
}
```

> `crop:fit`の参考: https://cloudinary.com/documentation/image_transformations#fit

上記の設定をすることで、タイトルのテキストを渡して新しいURLを生成することができます。

### 4. ogpに設定
先ほど作成した`generateArticleOgp`をimportし、生成したURLを`metaタグ`に設定します。
私のブログはNuxt.jsで作ったため、下記のように設定しました。

```js
import generateArticleOgp from '~/plugins/generateArticleOgp';

computed: {
  ogpImage() {
    const ogpText = this.articleContent.fields.title || 'cheezBlog';
    return generateArticleOgp(ogpText);
  }
},
head() {
  // その他設定は省略
  { hid: 'og:image', property: 'og:image', content: this.ogpImage },
  { property: 'article:publisher', content: 'FacebookURL' },
  { property: 'fb:app_id', content: 'FacebookAppID' },
  { name: 'twitter:card', content: 'summary_large_image' },
  { name: 'twitter:site', content: '@Twitter' },
}
```