feat: OGP の出し分け

Author: nakaterm

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .direnv
+CLAUDE.local.md

biome.jsonc

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": []
+    "ignore": ["dist", "node_modules"]
   },
   "formatter": {
     "enabled": true,

client/functions/[[path]].ts

@@ -0,0 +1,155 @@
+/// <reference types="@cloudflare/workers-types" />
+
+interface Env {
+  API_ENDPOINT: string;
+}
+
+interface ProjectData {
+  id: string;
+  name: string;
+  startDate: string;
+  endDate: string;
+  allowedRanges: Array<{
+    id: string;
+    projectId: string;
+    startTime: string;
+    endTime: string;
+  }>;
+}
+
+// og:title を書き換える HTMLRewriter
+class OGTitleRewriter {
+  private title: string;
+
+  constructor(title: string) {
+    this.title = title;
+  }
+
+  element(element: Element) {
+    if (element.getAttribute("property") === "og:title") {
+      element.setAttribute("content", this.title);
+    }
+  }
+}
+
+// og:description を書き換える HTMLRewriter
+class OGDescriptionRewriter {
+  private description: string;
+
+  constructor(description: string) {
+    this.description = description;
+  }
+
+  element(element: Element) {
+    if (element.getAttribute("property") === "og:description") {
+      element.setAttribute("content", this.description);
+    }
+  }
+}
+
+// 日付を YYYY/MM/DD 形式にフォーマット
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")}`;
+}
+
+// 時刻を HH:MM 形式にフォーマット
+function formatTime(dateString: string): string {
+  const date = new Date(dateString);
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+
+// プロジェクト情報を取得
+async function fetchProjectData(eventId: string, apiEndpoint: string): Promise<ProjectData | null> {
+  try {
+    const response = await fetch(`${apiEndpoint}/projects/${eventId}`);
+    if (!response.ok) {
+      return null;
+    }
+    return await response.json();
+  } catch (error) {
+    console.error("Failed to fetch project data:", error);
+    return null;
+  }
+}
+
+// eventId が有効かチェック（21文字のnanoid）
+function isValidEventId(path: string): boolean {
+  // パスが /eventId の形式で、eventId が21文字の英数字・ハイフン・アンダースコア
+  const match = path.match(/^\/([A-Za-z0-9_-]{21})$/);
+  return !!match;
+}
+
+// パスから eventId を抽出
+function extractEventId(path: string): string | null {
+  const match = path.match(/^\/([A-Za-z0-9_-]{21})$/);
+  return match ? match[1] : null;
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: This is a Cloudflare Worker context
+export async function onRequest(context: EventContext<Env, any, any>): Promise<Response> {
+  const { request, env, next } = context;
+  const url = new URL(request.url);
+  const path = url.pathname;
+
+  // 静的アセットや API ルートは通常通り処理
+  if (
+    path.startsWith("/assets/") ||
+    path.startsWith("/api/") ||
+    path.startsWith("/public/") ||
+    path.includes(".") // ファイル拡張子がある場合
+  ) {
+    return await next();
+  }
+
+  // eventId パターンをチェック
+  if (!isValidEventId(path)) {
+    return await next();
+  }
+
+  const eventId = extractEventId(path);
+  if (!eventId) {
+    return await next();
+  }
+
+  // 元のHTMLレスポンスを取得
+  const response = await next();
+
+  // HTMLでない場合はそのまま返す
+  const contentType = response.headers.get("content-type");
+
+  // 304 Not Modified の場合やHTMLでない場合はスキップ
+  if (response.status === 304 || (!contentType?.includes("text/html") && contentType !== null)) {
+    return response;
+  }
+
+  // プロジェクト情報を取得
+  const projectData = await fetchProjectData(eventId, env.API_ENDPOINT);
+
+  if (!projectData) {
+    return response;
+  }
+
+  // og:title を書き換え
+  const ogTitle = `${projectData.name} - イツヒマ`;
+
+  // og:description を作成
+  const startDate = formatDate(projectData.startDate);
+  const endDate = formatDate(projectData.endDate);
+  const dateRange = startDate === endDate ? startDate : `${startDate} - ${endDate}`;
+
+  let timeRange = "";
+  if (projectData.allowedRanges && projectData.allowedRanges.length > 0) {
+    const range = projectData.allowedRanges[0];
+    const startTime = formatTime(range.startTime);
+    const endTime = formatTime(range.endTime);
+    timeRange = `${startTime} - ${endTime}`;
+  }
+
+  const ogDescription = timeRange ? `日程: ${dateRange} | 時間: ${timeRange}` : `日程: ${dateRange}`;
+
+  return new HTMLRewriter()
+    .on('meta[property="og:title"]', new OGTitleRewriter(ogTitle))
+    .on('meta[property="og:description"]', new OGDescriptionRewriter(ogDescription))
+    .transform(response);
+}

client/index.html

@@ -7,7 +7,8 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta property="og:type" content="website" />
-  <meta property="og:title" content="イツヒマ - 「いつ暇？」で日程調整しよう" />
+  <meta property="og:title" content="イツヒマ" />
+  <meta property="og:description" content="「いつ暇？」で日程調整しよう" />
   <meta property="og:image" content="https://itsuhima.utcode.net/og-image.webp" />
   <meta property="og:site_name" content="イツヒマ" />
   <meta property="og:locale" content="ja_JP" />

client/package.json

@@ -33,6 +33,7 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250610.0",
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",

client/wrangler.toml

@@ -0,0 +1,14 @@
+name = "itsuhima"
+compatibility_date = "2024-12-01"
+
+[env.production.vars]
+API_ENDPOINT = "https://api.itsuhima.utcode.net"
+
+[env.preview.vars]
+API_ENDPOINT = ""
+
+[vars]
+API_ENDPOINT = "http://localhost:3000"
+
+[env.development.vars]
+API_ENDPOINT = "http://localhost:3000"

package-lock.json

@@ -1,3 +1,4 @@
+// @ts-nocheck FIXME: 駄目すぎる
 import { type Response, Router } from "express";
 import { nanoid } from "nanoid";
 import { z } from "zod";