シェア画像の日本語だけが □ になる — Antigravity に next/og の CJK フォント供給を直させた実装メモ

// 描画する文字だけを含む TrueType サブセットを Google Fonts から取得する
async function loadGoogleFont(
  family: string,
  weight: number,
  text: string,
): Promise<ArrayBuffer> {
  // 文字を重複排除して text= を短く保つ（css2 の text= には長さ上限がある）
  const glyphs = Array.from(new Set(Array.from(text))).join("");
 
  const cssUrl =
    `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}` +
    `:wght@${weight}&text=${encodeURIComponent(glyphs)}`;
 
  // ⚠️ あえてブラウザ風の User-Agent を付けない。
  //    付けないことで css2 は woff2 ではなく truetype を返す。
  const css = await fetch(cssUrl).then((res) => res.text());
 
  const src = css.match(
    /src:\s*url\((.+?)\)\s*format\('(?:opentype|truetype)'\)/,
  );
  if (!src) {
    throw new Error("TrueType サブセットの URL を解決できませんでした");
  }
  return fetch(src[1]).then((res) => res.arrayBuffer());
}

import { ImageResponse } from "next/og";
 
export const runtime = "edge";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
 
const BRAND = "Antigravity Lab";
const DOMAIN = "antigravitylab.net";
 
export default async function Image({
  params,
}: {
  params: { slug: string };
}) {
  const rawTitle = await getArticleTitle(params.slug); // 記事メタから取得
  const title = clampByWidth(rawTitle, 44); // 溢れ対策（後述）
 
  // 描画する全文字をひとまとめにしてサブセットを引く
  const glyphSource = title + BRAND + DOMAIN + "…";
  const fontData = await loadGoogleFont("Noto Sans JP", 700, glyphSource);
 
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          width: "100%",
          height: "100%",
          padding: 80,
          background: "#0b1020",
          color: "#ffffff",
          fontFamily: "Noto Sans JP",
        }}
      >
        <div style={{ display: "flex", fontSize: 30, opacity: 0.7 }}>
          {BRAND}
        </div>
        <div
          style={{
            display: "flex",
            fontSize: 64,
            fontWeight: 700,
            lineHeight: 1.25,
          }}
        >
          {title}
        </div>
        <div style={{ display: "flex", fontSize: 26, opacity: 0.6 }}>
          {DOMAIN}
        </div>
      </div>
    ),
    {
      ...size,
      fonts: [
        { name: "Noto Sans JP", data: fontData, weight: 700, style: "normal" },
      ],
    },
  );
}

// CJK を全角換算で重く見積もり、見た目の幅で切る素朴な近似
function clampByWidth(text: string, maxUnits: number): string {
  let width = 0;
  let out = "";
  for (const ch of Array.from(text)) {
    width += /[\x20-\x7e]/.test(ch) ? 1 : 2; // 半角=1, それ以外=2
    if (width > maxUnits) return out.trimEnd() + "…";
    out += ch;
  }
  return out;
}

const fontCache = new Map<string, Promise<ArrayBuffer>>();
 
function cachedFont(family: string, weight: number, text: string) {
  const key = `${family}:${weight}:${Array.from(new Set(text)).sort().join("")}`;
  if (!fontCache.has(key)) {
    fontCache.set(key, loadGoogleFont(family, weight, text));
  }
  return fontCache.get(key)!;
}