Cloudinary に画像処理を任せて Next.js 製ノベルゲーム UI の実装をシンプルにする

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const publicId = searchParams.get("publicId");
  const transform = searchParams.get("transform") ?? "";

  if (!publicId) {
    return NextResponse.json(
      { error: "publicId query parameter is required" },
      { status: 400 }
    );
  }

  const cloudName = process.env.CLOUDINARY_CLOUD_NAME;
  if (!cloudName) {
    return NextResponse.json(
      { error: "CLOUDINARY_CLOUD_NAME is not configured" },
      { status: 500 }
    );
  }

  const transformPath = transform ? `${transform}/` : "";
  const cloudinaryUrl =
    `https://res.cloudinary.com/${cloudName}/image/upload/` +
    `${transformPath}${publicId}`;

  try {
    const response = await fetch(cloudinaryUrl);

    if (!response.ok) {
      return NextResponse.json(
        { error: "Failed to fetch image from Cloudinary" },
        { status: 502 }
      );
    }

    const buffer = await response.arrayBuffer();
    const contentType =
      response.headers.get("content-type") ?? "image/png";

    return new NextResponse(buffer, {
      status: 200,
      headers: {
        "Content-Type": contentType,
        "Cache-Control": "public, max-age=86400, s-maxage=86400",
      },
    });
  } catch (error) {
    console.error("Error fetching image from Cloudinary:", error);
    return NextResponse.json(
      { error: "Unexpected error while fetching image" },
      { status: 500 }
    );
  }
}

"use client";

type NovelSceneProps = {
  speakerName: string;
  dialogue: string;
  backgroundId: string;
  characterId: string;
  windowFrameId: string;
  nextArrowId?: string;
};

/** 画像プロキシ API の URL を生成 */
function getImageUrl(publicId: string, transform?: string): string {
  const params = new URLSearchParams({ publicId });
  if (transform) {
    params.set("transform", transform);
  }
  return `/api/image?${params.toString()}`;
}

export default function NovelScene(props: NovelSceneProps) {
  const {
    speakerName,
    dialogue,
    backgroundId,
    characterId,
    windowFrameId,
    nextArrowId,
  } = props;

  return (
    <div className="novel-scene">
      {/* 背景画像 - 1280x720 にフィットさせる */}
      <img
        src={getImageUrl(
          backgroundId,
          "c_fill,w_1280,h_720,q_auto,f_auto"
        )}
        alt="背景"
        className="novel-background"
        draggable={false}
      />

      {/* ヒロイン立ち絵 */}
      <img
        src={getImageUrl(characterId, "q_auto,f_auto")}
        alt="キャラクター"
        className="novel-character"
        draggable={false}
      />

      {/* テキストウィンドウエリア */}
      <div className="novel-text-window">
        <img
          src={getImageUrl(
            windowFrameId,
            "c_fill,w_1280,h_240,q_auto,f_auto"
          )}
          alt=""
          className="novel-window-frame"
          draggable={false}
          aria-hidden="true"
        />

        <div className="novel-text-content">
          <p className="novel-speaker-name">{speakerName}</p>
          <p className="novel-dialogue">{dialogue}</p>
        </div>

        {nextArrowId && (
          <img
            src={getImageUrl(nextArrowId, "q_auto,f_auto")}
            alt=""
            className="novel-next-arrow"
            draggable={false}
            aria-hidden="true"
          />
        )}
      </div>
    </div>
  );
}

:root {
  --novel-width: 1280px;
  --novel-aspect: 16 / 9;
  --text-window-height: 240px;
  --text-padding-x: 48px;
  --text-padding-y: 24px;
}

body {
  margin: 0;
  padding: 0;
  background: #0a0a0a;
}

/* 画面中央にノベルシーンを表示 */
.novel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  background: #000;
}

/* 本体 1280x720 相当 */
.novel-scene {
  position: relative;
  width: 100%;
  max-width: var(--novel-width);
  aspect-ratio: var(--novel-aspect);
  overflow: hidden;
  background: #101010;
}

/* 背景画像 */
.novel-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 立ち絵 */
.novel-character {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  height: auto;
}

/* テキストウィンドウ */
.novel-text-window {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--text-window-height);
}

/* フレーム画像 - 半透明 */
.novel-window-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

/* テキスト本体 */
.novel-text-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: var(--text-padding-y) var(--text-padding-x);
}

/* 話者名とセリフ */
.novel-speaker-name {
  margin: 0;
  font-weight: 700;
  color: #ffd700;
}

.novel-dialogue {
  margin: 0;
  color: #fff;
}

/* 文字送りアイコン */
.novel-next-arrow {
  position: absolute;
  right: 32px;
  bottom: 16px;
  width: 48px;
  height: auto;
}