<p>今までこの備忘録ブログのOGP画像は、microCMSで使えるimgixのURLパラメータを使って画像に記事タイトルのレイヤーを重ねて色を設定した画像を連携していました。</p><p>OGP画像を確認したところ記事タイトルが長くパラメータが肥大化してしまい、うまく表示されないケースがあったことに最近気づきました😭</p><p>そこでこれを機に前から実装してみたかったCloudflare Workers + R2で画像を生成・保存する仕組みを作ることにしました。画像の生成はCloudinaryを使います。</p><p>imgixを使った画像加工についてまとめた記事は「📝<a href="https://841-biboroku.info/entry/imgix-create-ogp/">microCMS×imgixでOGPを自動生成する</a>」をご覧ください。</p><h2 id="h06e76817df">💡この記事で実現できること</h2><ul><li><strong>OGP自動生成</strong><ul><li>記事URLにアクセスがあった際、microCMSからタイトルやカテゴリ色を動的に取得し、Cloudinaryで画像を合成。</li></ul></li><li><strong>Cloudinaryでの画像加工</strong><ul><li>日本語<code>Noto Sans JP</code>フォントを利用。パラメータの組み合わせで複数レイヤーと効果を使用した加工。</li></ul></li><li><strong>コストパフォーマンスと高速配信</strong><ul><li>一度生成した画像は<strong>Cloudflare R2</strong>にキャッシュ。<br>2回目以降は画像生成をスキップし、R2から即座にレスポンスを返すことでCloudinaryの無料枠を節約。</li></ul></li><li><strong>microCMS連動のキャッシュ自動削除</strong><ul><li>microCMSで記事を更新・削除した際、Webhook（カスタム通知）を飛ばして<strong>R2上の古いキャッシュ画像を自動で削除</strong>。<br>常に最新の情報を反映。</li></ul></li></ul><h3 id="hac02c8f33c">OGP生成・配信のフロー</h3><ol><li>OGP画像URLへアクセス（SNSでのシェアや直接アクセス）</li><li>Cloudflare Workersが起動</li><li>R2キャッシュの確認 <ul><li>キャッシュあり： R2から画像を返して終了（爆速＆低コスト）</li><li>キャッシュなし： 次のステップへ</li></ul></li><li>microCMSから記事情報を取得（タイトル、カテゴリ色、IDなど）</li><li>Cloudinaryで画像を動的生成<ul><li>R2にある素材画像（ベース画像・1px画像）とフォントを組み合わせて合成</li></ul></li><li>生成画像をR2に保存（次回のアクセスのためにキャッシュ）</li><li>画像をレスポンスとして返却</li></ol><h3 id="h1c45e48120">キャッシュ削除のフロー（Webhook）</h3><ul><li>microCMSでの記事更新・削除を検知</li><li>Workersの削除専用エンドポイントを実行</li><li>HMAC署名検証でリクエストの正当性を確認</li><li>R2上の該当キャッシュ画像を削除（これで次回のアクセス時に新デザインで再生成される）</li></ul><h2 id="h40cdd7aa75">まずはCloudinary+Cloudflare R2とCloudflare Imagesの比較</h2>

<p>はじめはCloudflareでまとめようと画像の加工にCloudflare Imagesを使おうと思いました。</p><p>しかしCloudflare Imagesはリサイズや圧縮には優れていますがレイヤーの重ね合わせや、動的なテキスト合成の自由度が低かったため運用の柔軟性とコストを考え、今回はCloudinary＋R2を採用することにしました。</p><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>比較項目</strong></p></th><th colspan="1" rowspan="1"><p><strong>Cloudinary+Cloudflare R2</strong></p></th><th colspan="1" rowspan="1"><p><strong>Cloudflare Images</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>無料枠</strong></p></td><td colspan="1" rowspan="1"><p><strong>最強。</strong><br>Cloudinary(25クレジット)<br>+R2(10GB)+Workers(10万件リクエスト/日)</p></td><td colspan="1" rowspan="1"><p>月5,000回まで。<br>超えると有料。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>加工自由度</strong></p></td><td colspan="1" rowspan="1"><p><strong>非常に高い。</strong><br>文字入れやレイヤー加工が自由自在。</p></td><td colspan="1" rowspan="1"><p>基本的なリサイズ・圧縮がメイン。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>構成</strong></p></td><td colspan="1" rowspan="1"><p>複雑（Workersのコード管理が必要）</p></td><td colspan="1" rowspan="1"><p>シンプル（スイッチ一つで完結）</p></td></tr></tbody></table>

<h2 id="h8ab2fbd718">1. Cloudflare R2の準備</h2><p>生成した画像のアップロード先のバケットを作成します。</p><ol><li>Cloudflareダッシュボードの「ストレージとデータベース＞R2オブジェクトストレージ＞概要」を開き「バケットを作成」をクリック。</li><li>名前を入力（例:<code>blog-ogp-images</code>）して作成。</li></ol>

<h2 id="h4cbf3d38e4">2. WorkersとR2の紐付け（バインディング）</h2><h3 id="h308f35ce97">2-1. Workersの作成</h3><ol><li>コンピューティングとAI</li><li>Workers &amp; Pages</li><li>アプリケーションを作成する</li><li>Ｈello Ｗorldを開始する</li><li>Worker nameを入力（例：<code>ogp-generator</code>）</li><li>（一旦）デプロイ</li></ol><p>※後ほどコードを書き換えます。</p><h3 id="h5d4f5a773f">2-2. バインディングの設定</h3><ol><li>作成したWorkersを開く</li><li>バインディングを開く</li><li>バインディングを追加</li><li>R2 バケットを選択しバインディングを追加</li><li>Workersで使うR2バケット名の変数名（例：<code>OGP_R2_BUCKET</code>）を入力し、「1. Cloudflare R2の準備」で作成したバケットを選択。</li><li>デプロイ</li></ol><h3 id="he5eb6531bc">2-3. ランタイムの設定</h3><ol><li>設定＞ランタイム＞互換性フラグ</li><li>nodejs_compatを追加</li></ol>

<h2 id="h07965a6c6a">3. Workersのコードを編集（Cloudinaryとの連携）</h2><p>今回はCloudinaryを画像加工エンジンとして使い、その結果をR2にキャッシュさせる仕組みにしました。</p>

export default {
  async fetch(request, env) {
    // 1. 環境変数のバリデーション
    const validationError = validateEnvironment(env);
    if (validationError) return validationError;

    const SITE_URL = env.SITE_URL;
    const url = new URL(request.url);

    // ---------------------------------------------------------
    // A. Webhookによるキャッシュ削除ロジック
    // ---------------------------------------------------------
    // microCMSなどのWebhook通知を受け取ってR2上の画像を削除します
    if (url.pathname.endsWith("/★delete-cache-endpoint")) {
      let targetId = url.searchParams.get('id'); 

      if (request.method === "POST") {
        const bodyText = await request.text();

        // Webhook署名検証 (Secretが設定されている場合)
        if (env.MICROCMS_WEBHOOK_SECRET) {
          const signature = request.headers.get('X-Microcms-Signature');
          const expected = await createSignature(bodyText, env.MICROCMS_WEBHOOK_SECRET);
          if (signature !== expected) {
            return new Response("Unauthorized", { status: 401 });
          }
        }

        try {
          const body = JSON.parse(bodyText);
          // microCMSのJSON構造からID（slugなど）を抽出
          targetId = body.contents?.new?.publishValue?.★field_name
            || body.contents?.old?.publishValue?.★field_name
            || targetId;
        } catch (e) {
          console.log("JSON parse failed. Using query parameter.");
        }
      }

      if (!targetId) return new Response("ID missing", { status: 400 });

      try {
        const R2_KEY = `${targetId}.png`;
        await env.OGP_R2_BUCKET.delete(R2_KEY);
        return new Response(`Deleted: ${R2_KEY}`, { status: 200 });
      } catch (e) {
        return new Response(`Delete failed: ${e.message}`, { status: 500 });
      }
    }

    // ---------------------------------------------------------
    // B. 画像取得・生成ロジック
    // ---------------------------------------------------------
    const filename = url.pathname.split('/').pop()?.replace('.png', '');

    // 不正なアクセスやルートへのアクセスはブログトップへリダイレクト
    if (!filename || filename === "" || filename === "favicon.ico") {
      return Response.redirect(SITE_URL, 301);
    }

    const R2_KEY = `${filename}.png`;

    // 素材画像（背景や1px画像）はそのままR2から返却する
    if (filename === "★base_image_name" || filename === "★dot_image_name") {
      const material = await env.OGP_R2_BUCKET.get(R2_KEY);
      if (material) {
        return new Response(material.body, { headers: { 'Content-Type': 'image/png' } });
      }
      return new Response('Material Not Found', { status: 404 });
    }

    try {
      // 2. R2キャッシュチェック
      const cached = await env.OGP_R2_BUCKET.get(R2_KEY);
      if (cached) {
        return new Response(cached.body, { headers: { 'Content-Type': 'image/png' } });
      }

      // 3. データソース（microCMS等）から記事情報を取得
      const apiRes = await fetch(
        `https://${env.MICROCMS_SERVICE_ID}.microcms.io/api/v1/★endpoint?filters=★field_name[equals]${filename}`,
        { headers: { 'X-MICROCMS-API-KEY': env.MICROCMS_API_KEY} }
      );
      const data = await apiRes.json();

      if (!data.contents || data.contents.length === 0) {
        return Response.redirect(SITE_URL, 302);
      }

      const { title, category } = data.contents[0];
      const themeColor = (category?.[0]?.imgColor || '3d50f5').replace('#', '');

      // 4. Cloudinary URL構築
      const cloudinaryUrl = buildCloudinaryUrl({
        cloudName: env.CLOUDINARY_NAME,
        title,
        themeColor,
        workerDomain: url.host
      });

      // 5. Cloudinaryから画像を取得
      const imageRes = await fetch(cloudinaryUrl);
      if (!imageRes.ok) throw new Error('Cloudinary Error');

      const imageBuffer = await imageRes.arrayBuffer();

      // 6. 次回のためにR2にキャッシュ保存
      await env.OGP_R2_BUCKET.put(R2_KEY, imageBuffer, {
        httpMetadata: { contentType: 'image/png' },
      });

      return new Response(imageBuffer, { headers: { 'Content-Type': 'image/png' } });

    } catch (e) {
      console.error(e.message);
      return Response.redirect(SITE_URL, 302);
    }
  }
};

/**
 * 署名作成 (HMAC-SHA256)
 */
async function createSignature(body, secret) {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw", encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false, ["sign"]
  );
  const signed = await crypto.subtle.sign("HMAC", key, encoder.encode(body));
  return Array.from(new Uint8Array(signed))
    .map(b => b.toString(16).padStart(2, "0"))
    .join("");
}

/**
 * 環境変数のチェック
 */
function validateEnvironment(env) {
  const vars = ['OGP_R2_BUCKET', 'API_SERVICE_ID', 'API_KEY', 'CLOUDINARY_NAME', 'SITE_URL'];
  for (const v of vars) {
    if (!env[v]) return new Response(`Missing env var: ${v}`, { status: 500 });
  }
  return null;
}

/**
 * Cloudinaryの変換URLを生成
 */
function buildCloudinaryUrl({ cloudName, title, themeColor, workerDomain }) {
  const baseImageUrl = `https://${workerDomain}/★base_image_name.png`;
  const BASE_IMAGE_B64 = safeBase64(baseImageUrl);
  const encodedTitle = encodeURIComponent(title).replace(/,/g, '%252C');
  const ONE_PIXEL_URL = `https://${workerDomain}/★dot_image_name.png`;
  
  return [
    // Cloudinaryの画像生成URL
  ].join('/');
}

/*
 * Cloudinary用のURLセーフなBase64エンコード
 */
function safeBase64(str) {
  return Buffer.from(str)      // 文字列をBufferに変換
    .toString('base64')        // Base64文字列へ
    .replace(/\+/g, '-')       // URLセーフ化（+ を -）
    .replace(/\//g, '_')       // URLセーフ化（/ を _）
    .replace(/=+$/, '');       // パディング削除
}

<h2 id="h98b1dc753e">4. microCMSのWebhookでキャッシュを自動削除</h2><p>記事を更新したのにOGPが古いままという事を防ぐため、microCMSのWebhook機能を使って、記事公開・更新時にR2のキャッシュを自動で削除する設定を行います。</p><h3 id="hf5e9d18e75">4-1. microCMS側の設定</h3><ol><li>microCMSの管理画面で「API設定」&gt;「Webhook」&gt; 「追加」をクリック</li><li>「カスタム通知」を選択</li><li>以下の項目を入力<ul><li>Webhookの名前</li><li>URLの入力（Workersの実行エンドポイント）</li><li>通知タイミング（実行したいタイミングにチェック、今回はコンテンツの公開と削除にチェック）</li><li>シークレット（認証用）</li></ul></li></ol>

<h3 id="ha79af6bbb4">4-2. Workersの環境変数を設定</h3><p>Workers側で、先ほど決めた「シークレット」を環境変数<code>MICROCMS_WEBHOOK_SIGNATURE</code>で登録します。</p>

<h2 id="hcd6ce4ca04">😞試行錯誤したポイント</h2><h3 id="h3c1a82dbd7">👿R2バケットが「ない」と怒られる</h3><p>Workersにいくつか環境変数を読み込んでいる箇所があり、R2のバケット名も環境変数<code>env.OGP_R2_BUCKET</code>で設定していたところ、バケット名がない・空だ！とエラーがでて進まない...</p><p>WorkersでR2を扱う際、バケット名は「環境変数」として登録するのではなく、「バインディング」という設定が必要でした。これをしないと<code>env.OGP_R2_BUCKET</code>が空（undefined）になり、エラーで進めなくなります。</p><h3 id="h7743d32f3c">👿Cloudinaryでカスタムフォントが適用されない</h3><p>Cloudinaryで「Noto Sans JP」などのデフォルトで指定ができない日本語フォントを使うには、単にMedia Libraryにアップロードするだけでは不十分でした。</p><p>使用できるようにするには、管理画面の<code>Settings &gt; Upload &gt; Upload presets</code>で設定が必要です。</p>

<p>Delivery Typeを「Authenticated」、Access Controlを「Public」設定したプリセットでアップロードしたアセットを使わないと、Workers内のCloudinary画像生成URLで呼び出すことができません。</p><p>CloudinaryのURL構築で<code> l_text:★YourFontName</code>を使う際、フォント名にはAuthenticatedでアップロードした際の<strong>Public ID</strong>を指定する必要があります。</p>

<p>📝参考</p><ul><li><a href="https://blog.kentarom.com/posts/98c62e79-836b-447b-910f-181615d70758" target="_blank" rel="noopener noreferrer nofollow">Cloudinaryを利用して、OGP画像を動的生成する</a></li><li><a href="https://memory-lovers.blog/entry/2021/09/09/070000" target="_blank" rel="noopener noreferrer nofollow">CloudinaryでOGP画像を設定する</a></li></ul><h3 id="hd2d542302f">👿imgixの多重ブレンドをCloudinaryで再現する</h3><p>imgix（microCMS標準）で作り込んでいたレイヤー加工にも苦戦しました。</p><p>もともと使っていたimgixのクエリは、単に文字を載せるだけでなく、背景色と素材画像を高度に合成していました。</p><h4 id="h7ca08f0168">🖼️imgixの生成URL</h4>

`https://images.microcms-assets.io/assets/.../ファイル名.png?
  w=1200&h=630
  &bg=${color}                // 1. 背景色の指定
  &blend-mode=multiply        // 2. 乗算で背景と合成
  &monochrome=95${color}      // 3. ベース画像を単色化
  &blend64=${base64url(text)} // 4. 文字を乗せる
  &fm=png`

<h4 id="h6794eeeb07">🖼️Cloudinaryの生成URL</h4>

return [
  `https://res.cloudinary.com/${cloudName}/image/fetch`,
  `w_1200,h_630,c_fill,b_rgb:${themeColor},e_colorize:100,q_auto`, // 塗り
  `l_fetch:${BASE_IMAGE_B64},w_1200,h_630,c_fill,e_replace_color:${themeColor}:1:979C9F,fl_layer_apply`,  // ベース画像＋色置き換え
  `co_rgb:${themeColor},l_text:★YourFontName_50_bold:${encodedTitle},w_1000,c_fit,fl_layer_apply,g_west,x_100`,  // タイトル
  `f_png`,
  ONE_PIXEL_URL  // 1px画像
].join('/');

<p>ロゴ色を一番下の塗りとタイトルの色に合わせるため、ベース画像の中のロゴ色を置き換える必要がありました。</p><p>はじめはimgixのときと同じようにグレースケール・乗算プロパティで再現しようと思いましたが、imgixとCloudinaryでは処理が違うようで再現できませんでした。</p><pre><code>e_replace_color:${themeColor}:1:979C9F</code></pre><p>そこで使用している色が<code>#979C9F</code>の単色ということもあり、しきい値を1に設定して<code>${themeColor}</code>に置き換えることに成功しました🌟</p><h4 id="h80e76f8c9e">画像の圧縮</h4><p>はじめは圧縮設定をしていませんでしたが<code>q_auto</code>を設定することで、画像サイズが22KB→9.59KBまで圧縮されました。</p>

<h3 id="h8ed8fbce7d">👿キャッシュ削除が動かない？</h3><p>カスタムドメイン経由のWebhookだと削除が動かない現象がありました。</p><p>おそらくCloudflareのWAFなどがmicroCMSからのリクエストをブロックしていた可能性があります。Workersの初期ドメイン（*.workers.dev）を通知先にすることで解決しました。</p><h2 id="h49debcb9ef">最後にデバッガーでOGPチェック</h2><p>WorkersのプレビューやOGP画像のURLにアクセスすると問題なく生成されることを確認できました。</p><p>普段使うチェッカーやデバッガーでも確認すると、生成されるものとされないものが...チェッカーツールでは初回生成時の処理時間によるタイムアウトや、Workers内でのリダイレクト処理が影響しているのかもしれません。</p><h3 id="h6bce815a3e">👏自動生成される</h3><ul><li>X（旧Twitter）のポスト</li><li>Facebookシェアデバッガー</li><li>microCMSのリッチエディタ内の埋め込み</li></ul><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/workers-r2-cloudinary-ogp-automation/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Fworkers-r2-cloudinary-ogp-automation%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script><p><strong>自動生成されない</strong></p><ul><li>OGP画像確認｜ラッコツールズ</li><li>Chrome拡張ツール：Alt &amp; Meta Viewer</li></ul><h2 id="ha214098e44">まとめ</h2><p>設定の罠にハマり、何度もURLを書き換えた苦労はありましたが、その分、既存のツールでは届かない「かゆいところに手が届く」自分専用の機能を作ることができました。</p><p>OGPのURLを短縮しつつ、Cloudflare R2やCloudinaryといった初めて使用するサービスを組み合わせることができ良い経験となりました🙌</p>

microCMSのimgixで自動生成していたOGP画像をCloudflare WorkersとR2×Cloudinaryに変えてみた

<p>OGP画像をmicroCMSで紹介されている「<a href="https://blog.microcms.io/imgix-ogp/" target="_blank" rel="noopener noreferrer">imgixで動的画像・OGPを作成する</a>」を参考に設定しました。</p><p><br></p><h2 id="hc5442734bc">自動生成したOGP</h2><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f0b9cc0f7a74337b0390aa53eeef6ca/ogp-sample.png" alt="" width="1200" height="630"></p><p><br></p><p><br></p>

import base64url from "base64url";

export const createOgImage = (title: string, color: string) => {
  const ogImageUrl = `${ベースになる画像URL}?w=1200&h=630&blend64=${base64url(
    `https://assets.imgix.net/~text?txtsize=50&txt-color=${color}&w=1000&h=230&txt-align=middle,left&txtfont=Hiragino%20Sans%20W6&txt-track=2&txt64=${base64url(
      title
    )}`
  )}&blend-mode=normal&blend-x=100&blend-y=200&monochrome=95${color}&fm=png`;
  return { ogImageUrl };
};

<h3 id="h4b5581ac68">選択したカテゴリによってロゴカラーを変化させる</h3><p>使用したimgixパラメータは、「<a href="https://docs.imgix.com/apis/rendering/stylize/monochrome" target="_blank" rel="noopener noreferrer">monochrome</a>」。</p><p>色を設定することで全体の色相を変化させることができます。</p><p><br></p><p>用意したベース画像のロゴは、指定した色によって変化させるためあえてグレースケールにしています。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/681fc260d17943b8997324794108c203/ogpbase.png?w=350&amp;h=183" alt="" width="350" height="183"></p><p><br></p><p>カテゴリのAPIスキーマにイメージカラー（imgColor）のフィールドを追加し、カラーコードを設定します。</p><p>1つ目のカテゴリに指定したimgColorをmonochromeに設定することで、選択したカテゴリによってOGP画像内のロゴカラーを変化させています。</p>

<h3 id="h148780a7d5">タイトルが複数行になっても上下中央に配置する</h3><pre><code>w=1000&amp;h=230</code></pre><p>タイトルが入る枠の幅と高さ位置を設定。</p><p>高さは最大3行を想定した高さにしました。</p><p><br></p><pre><code>txt-align=middle,left</code></pre><p>タイトル枠に対してテキストに配置を上下中央の左寄せにします。</p><p><br></p><pre><code>blend-x=100&amp;blend-y=200</code></pre><p><strong>X軸</strong></p><p>(OGP画像の幅(1200px)-テキスト枠の幅(1000px))÷2=100</p><p><strong>Y軸</strong></p><p>OGP画像の高さ(630px)÷2-タイトル枠(230px)÷2=200</p>

<h2 id="h30484efed0">OGP画像を設定する</h2><p>記事詳細ページに先ほど作成したコンポーネントを読み込み画像のURLを生成する。</p><p>生成したURLをnext-seoのimages-&gt;urlに設定するだけでOK。</p>

import { createOgImage } from "@/components/createOgImage";
～略
const PostDetail: NextPage<PostPageProps> = ({ postData, categories }) => {
  const { ogImageUrl } = createOgImage(post.title, post.category[0].imgColor);
  return (
    <>
      <NextSeo
        title={post.title}
        canonical={pageUrl}
        openGraph={{
          url: pageUrl,
          images: [
            {
              url: ogImageUrl,  //生成したOGPのURLを設定
            },
          ],
          title: post.title,
        }}
      />
～略
    </>
  );
};