Antigravity × Convex でリアルタイム協調 SaaS を構築する：型安全なデータ同期から Stripe 課金まで

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";
 
export default defineSchema({
  // ユーザーテーブル（Clerk から同期）
  users: defineTable({
    clerkId: v.string(),
    email: v.string(),
    name: v.string(),
    imageUrl: v.optional(v.string()),
    plan: v.union(v.literal("free"), v.literal("pro")),
    stripeCustomerId: v.optional(v.string()),
    stripeSubscriptionId: v.optional(v.string()),
    createdAt: v.number(),
  })
    .index("by_clerk_id", ["clerkId"])
    .index("by_email", ["email"]),
 
  // ワークスペーステーブル
  workspaces: defineTable({
    name: v.string(),
    ownerId: v.id("users"),
    plan: v.union(v.literal("free"), v.literal("pro")),
    memberIds: v.array(v.id("users")),
    createdAt: v.number(),
    updatedAt: v.number(),
  })
    .index("by_owner", ["ownerId"]),
 
  // ドキュメントテーブル
  documents: defineTable({
    title: v.string(),
    content: v.string(),       // JSON 文字列（エディタ内部フォーマット）
    workspaceId: v.id("workspaces"),
    authorId: v.id("users"),
    collaboratorIds: v.array(v.id("users")),
    storageId: v.optional(v.id("_storage")),  // 添付ファイル
    isPublic: v.boolean(),
    createdAt: v.number(),
    updatedAt: v.number(),
  })
    .index("by_workspace", ["workspaceId"])
    .index("by_author", ["authorId"]),
 
  // 操作履歴テーブル（OT / CRDT ベースの差分記録）
  documentOperations: defineTable({
    documentId: v.id("documents"),
    userId: v.id("users"),
    operation: v.string(),     // JSON 文字列（差分データ）
    version: v.number(),
    timestamp: v.number(),
  })
    .index("by_document", ["documentId"])
    .index("by_document_version", ["documentId", "version"]),
});

import { query, mutation } from "./_generated/server";
import { v } from "convex/values";
import { getCurrentUser } from "./users";
 
// ドキュメント一覧取得（リアルタイム同期）
export const listByWorkspace = query({
  args: { workspaceId: v.id("workspaces") },
  handler: async (ctx, args) => {
    const user = await getCurrentUser(ctx);
    if (!user) return [];
 
    const docs = await ctx.db
      .query("documents")
      .withIndex("by_workspace", (q) =>
        q.eq("workspaceId", args.workspaceId)
      )
      .order("desc")
      .collect();
 
    // アクセス権チェック
    return docs.filter(
      (doc) =>
        doc.isPublic ||
        doc.authorId === user._id ||
        doc.collaboratorIds.includes(user._id)
    );
  },
});
 
// ドキュメント作成
export const create = mutation({
  args: {
    title: v.string(),
    workspaceId: v.id("workspaces"),
  },
  handler: async (ctx, args) => {
    const user = await getCurrentUser(ctx);
    if (!user) throw new Error("認証が必要です");
 
    const now = Date.now();
    const docId = await ctx.db.insert("documents", {
      title: args.title,
      content: JSON.stringify({ type: "doc", content: [] }),
      workspaceId: args.workspaceId,
      authorId: user._id,
      collaboratorIds: [],
      isPublic: false,
      createdAt: now,
      updatedAt: now,
    });
 
    return docId;
  },
});
 
// コンテンツ更新（リアルタイム同期のコア）
export const updateContent = mutation({
  args: {
    documentId: v.id("documents"),
    content: v.string(),
    operation: v.string(),   // 差分データ
  },
  handler: async (ctx, args) => {
    const user = await getCurrentUser(ctx);
    if (!user) throw new Error("認証が必要です");
 
    const doc = await ctx.db.get(args.documentId);
    if (!doc) throw new Error("ドキュメントが見つかりません");
 
    // 権限チェック
    const canEdit =
      doc.authorId === user._id ||
      doc.collaboratorIds.includes(user._id);
    if (!canEdit) throw new Error("編集権限がありません");
 
    const now = Date.now();
 
    // ドキュメント更新
    await ctx.db.patch(args.documentId, {
      content: args.content,
      updatedAt: now,
    });
 
    // 操作履歴を記録
    const lastOp = await ctx.db
      .query("documentOperations")
      .withIndex("by_document", (q) =>
        q.eq("documentId", args.documentId)
      )
      .order("desc")
      .first();
 
    await ctx.db.insert("documentOperations", {
      documentId: args.documentId,
      userId: user._id,
      operation: args.operation,
      version: (lastOp?.version ?? 0) + 1,
      timestamp: now,
    });
  },
});

// app/workspace/[id]/page.tsx
"use client";
 
import { useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";
 
export default function WorkspacePage({
  params,
}: {
  params: { id: string };
}) {
  // このクエリはサーバー側でデータが変わると自動的に再実行される
  const documents = useQuery(api.documents.listByWorkspace, {
    workspaceId: params.id as Id<"workspaces">,
  });
 
  if (documents === undefined) {
    return <div className="animate-pulse">読み込み中...</div>;
  }
 
  return (
    <div className="grid gap-4 p-6">
      {documents.map((doc) => (
        <DocumentCard key={doc._id} document={doc} />
      ))}
    </div>
  );
}

// convex/auth.config.ts
export default {
  providers: [
    {
      domain: process.env.CLERK_JWT_ISSUER_DOMAIN!,
      applicationID: "convex",
    },
  ],
};

// convex/users.ts
import { internalMutation, query, QueryCtx } from "./_generated/server";
import { v } from "convex/values";
 
// 現在のユーザーを取得するヘルパー
export const getCurrentUser = async (ctx: QueryCtx) => {
  const identity = await ctx.auth.getUserIdentity();
  if (!identity) return null;
 
  return await ctx.db
    .query("users")
    .withIndex("by_clerk_id", (q) =>
      q.eq("clerkId", identity.subject)
    )
    .unique();
};
 
// Clerk Webhook からユーザーを同期
export const syncUser = internalMutation({
  args: {
    clerkId: v.string(),
    email: v.string(),
    name: v.string(),
    imageUrl: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    const existing = await ctx.db
      .query("users")
      .withIndex("by_clerk_id", (q) => q.eq("clerkId", args.clerkId))
      .unique();
 
    if (existing) {
      await ctx.db.patch(existing._id, {
        email: args.email,
        name: args.name,
        imageUrl: args.imageUrl,
      });
      return existing._id;
    }
 
    return await ctx.db.insert("users", {
      ...args,
      plan: "free",
      createdAt: Date.now(),
    });
  },
});

import { Webhook } from "svix";
import { headers } from "next/headers";
import { WebhookEvent } from "@clerk/nextjs/server";
import { ConvexHttpClient } from "convex/browser";
import { api } from "@/convex/_generated/api";
 
const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
export async function POST(req: Request) {
  const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
  if (!WEBHOOK_SECRET) {
    throw new Error("CLERK_WEBHOOK_SECRET が設定されていません");
  }
 
  const headerPayload = headers();
  const svix_id = headerPayload.get("svix-id");
  const svix_timestamp = headerPayload.get("svix-timestamp");
  const svix_signature = headerPayload.get("svix-signature");
 
  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response("Bad Request", { status: 400 });
  }
 
  const payload = await req.json();
  const body = JSON.stringify(payload);
 
  const wh = new Webhook(WEBHOOK_SECRET);
  let evt: WebhookEvent;
 
  try {
    evt = wh.verify(body, {
      "svix-id": svix_id,
      "svix-timestamp": svix_timestamp,
      "svix-signature": svix_signature,
    }) as WebhookEvent;
  } catch (err) {
    return new Response("Signature verification failed", { status: 400 });
  }
 
  if (evt.type === "user.created" || evt.type === "user.updated") {
    const { id, email_addresses, first_name, last_name, image_url } =
      evt.data;
 
    await convex.mutation(api.users.syncUser, {
      clerkId: id,
      email: email_addresses[0]?.email_address ?? "",
      name: `${first_name ?? ""} ${last_name ?? ""}`.trim(),
      imageUrl: image_url,
    });
  }
 
  return new Response("OK", { status: 200 });
}

// convex/files.ts
import { mutation, query } from "./_generated/server";
import { v } from "convex/values";
import { getCurrentUser } from "./users";
 
// アップロード URL の生成
export const generateUploadUrl = mutation({
  handler: async (ctx) => {
    const user = await getCurrentUser(ctx);
    if (!user) throw new Error("認証が必要です");
 
    return await ctx.storage.generateUploadUrl();
  },
});
 
// ファイルをドキュメントに紐付け
export const attachToDocument = mutation({
  args: {
    documentId: v.id("documents"),
    storageId: v.id("_storage"),
  },
  handler: async (ctx, args) => {
    const user = await getCurrentUser(ctx);
    if (!user) throw new Error("認証が必要です");
 
    await ctx.db.patch(args.documentId, {
      storageId: args.storageId,
      updatedAt: Date.now(),
    });
  },
});
 
// ファイル URL の取得
export const getFileUrl = query({
  args: { storageId: v.id("_storage") },
  handler: async (ctx, args) => {
    return await ctx.storage.getUrl(args.storageId);
  },
});

// components/FileUpload.tsx
"use client";
 
import { useMutation, useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";
import { useCallback, useState } from "react";
 
export function FileUpload({
  documentId,
}: {
  documentId: Id<"documents">;
}) {
  const [uploading, setUploading] = useState(false);
  const generateUploadUrl = useMutation(api.files.generateUploadUrl);
  const attachToDocument = useMutation(api.files.attachToDocument);
 
  const handleUpload = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0];
      if (!file) return;
 
      setUploading(true);
      try {
        // 1. アップロード URL を取得
        const uploadUrl = await generateUploadUrl();
 
        // 2. ファイルをアップロード
        const result = await fetch(uploadUrl, {
          method: "POST",
          headers: { "Content-Type": file.type },
          body: file,
        });
 
        const { storageId } = await result.json();
 
        // 3. ドキュメントに紐付け
        await attachToDocument({ documentId, storageId });
      } finally {
        setUploading(false);
      }
    },
    [generateUploadUrl, attachToDocument, documentId]
  );
 
  return (
    <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
      {uploading ? "アップロード中..." : "ファイルを添付"}
      <input
        type="file"
        className="hidden"
        onChange={handleUpload}
        disabled={uploading}
      />
    </label>
  );
}

// app/api/stripe/webhook/route.ts（このままでは動きません）
import Stripe from "stripe";
import { headers } from "next/headers";
import { ConvexHttpClient } from "convex/browser";
import { api } from "@/convex/_generated/api";
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
export async function POST(req: Request) {
  const body = await req.text();
  const sig = headers().get("stripe-signature")!;
 
  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return new Response("Signature verification failed", { status: 400 });
  }
 
  switch (event.type) {
    case "checkout.session.completed": {
      const session = event.data.object as Stripe.CheckoutSession;
      const clerkId = session.metadata?.clerkId;
      if (!clerkId) break;
 
      // ユーザーをアップグレード
      await convex.mutation(api.subscriptions.activate, {
        clerkId,
        stripeCustomerId: session.customer as string,
        stripeSubscriptionId: session.subscription as string,
      });
      break;
    }
 
    case "customer.subscription.deleted": {
      const subscription = event.data.object as Stripe.Subscription;
      await convex.mutation(api.subscriptions.deactivate, {
        stripeSubscriptionId: subscription.id,
      });
      break;
    }
  }
 
  return new Response("OK", { status: 200 });
}

// convex/subscriptions.ts
import { internalMutation } from "./_generated/server";
import { v } from "convex/values";
 
export const activate = internalMutation({
  args: {
    clerkId: v.string(),
    stripeCustomerId: v.string(),
    stripeSubscriptionId: v.string(),
  },
  handler: async (ctx, args) => {
    const user = await ctx.db
      .query("users")
      .withIndex("by_clerk_id", (q) => q.eq("clerkId", args.clerkId))
      .unique();
 
    if (!user) throw new Error("ユーザーが見つかりません");
 
    await ctx.db.patch(user._id, {
      plan: "pro",
      stripeCustomerId: args.stripeCustomerId,
      stripeSubscriptionId: args.stripeSubscriptionId,
    });
  },
});
 
export const deactivate = internalMutation({
  args: { stripeSubscriptionId: v.string() },
  handler: async (ctx, args) => {
    const user = await ctx.db
      .query("users")
      .filter((q) =>
        q.eq(q.field("stripeSubscriptionId"), args.stripeSubscriptionId)
      )
      .unique();
 
    if (!user) return;
 
    await ctx.db.patch(user._id, {
      plan: "free",
      stripeSubscriptionId: undefined,
    });
  },
});

// 誤り
const session = event.data.object as Stripe.CheckoutSession;
 
// 正しい
const session = event.data.object as Stripe.Checkout.Session;

const sig = (await headers()).get("stripe-signature")!;

// convex/http.ts
import { httpRouter } from "convex/server";
import { httpAction } from "./_generated/server";
import { internal } from "./_generated/api";
import Stripe from "stripe";
 
const http = httpRouter();
 
http.route({
  path: "/stripe/webhook",
  method: "POST",
  handler: httpAction(async (ctx, request) => {
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
    const body = await request.text();
    const sig = request.headers.get("stripe-signature");
    if (!sig) return new Response("Missing signature", { status: 400 });
 
    let event: Stripe.Event;
    try {
      // Workers ランタイムでは同期版ではなく Async 版を使います
      event = await stripe.webhooks.constructEventAsync(
        body,
        sig,
        process.env.STRIPE_WEBHOOK_SECRET!
      );
    } catch {
      return new Response("Signature verification failed", { status: 400 });
    }
 
    switch (event.type) {
      case "checkout.session.completed": {
        const session = event.data.object as Stripe.Checkout.Session;
        const clerkId = session.metadata?.clerkId;
        if (!clerkId) break;
 
        await ctx.runMutation(internal.subscriptions.activate, {
          clerkId,
          stripeCustomerId: session.customer as string,
          stripeSubscriptionId: session.subscription as string,
        });
        break;
      }
 
      case "customer.subscription.deleted": {
        const subscription = event.data.object as Stripe.Subscription;
        await ctx.runMutation(internal.subscriptions.deactivate, {
          stripeSubscriptionId: subscription.id,
        });
        break;
      }
    }
 
    // 200 を返さないと Stripe は再送を続けます
    return new Response(null, { status: 200 });
  }),
});
 
export default http;

// 修正前
const docs = useQuery(api.documents.listByWorkspace, {
  workspaceId: params.id,  // string 型
});
 
// 修正後
import { Id } from "@/convex/_generated/dataModel";
 
const docs = useQuery(api.documents.listByWorkspace, {
  workspaceId: params.id as Id<"workspaces">,  // 正しい型
});

// convex/ai.ts（Convex Action の例）
import { action } from "./_generated/server";
import { v } from "convex/values";
 
export const summarizeDocument = action({
  args: { content: v.string() },
  handler: async (ctx, args) => {
    // Action は外部 API 呼び出し可能
    const response = await fetch("https://generativelanguage.googleapis.com/v1beta/...", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{ parts: [{ text: `以下を要約してください:\n\n${args.content}` }] }],
      }),
    });
 
    const data = await response.json();
    return data.candidates[0].content.parts[0].text;
  },
});

# @cloudflare/next-on-pages をインストール
pnpm add -D @cloudflare/next-on-pages
 
# wrangler.toml を作成
cat > wrangler.toml << 'EOF'
name = "collabdocs"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]
 
[build]
command = "pnpm run build"
EOF

{
  "scripts": {
    "build": "next build",
    "pages:build": "npx @cloudflare/next-on-pages",
    "deploy": "pnpm pages:build && wrangler pages deploy .vercel/output/static"
  }
}

# Convex 本番環境のデプロイ
npx convex deploy
 
# 本番環境の Convex URL を取得して Cloudflare に設定

// convex/workspaces.ts（プラン制限付き）
export const create = mutation({
  args: { name: v.string() },
  handler: async (ctx, args) => {
    const user = await getCurrentUser(ctx);
    if (!user) throw new Error("認証が必要です");
 
    // Free プランの制限チェック
    if (user.plan === "free") {
      const existingWorkspaces = await ctx.db
        .query("workspaces")
        .withIndex("by_owner", (q) => q.eq("ownerId", user._id))
        .collect();
 
      if (existingWorkspaces.length >= 3) {
        throw new Error(
          "Free プランではワークスペースを3つまでしか作成できません。Pro にアップグレードしてください。"
        );
      }
    }
 
    const now = Date.now();
    return await ctx.db.insert("workspaces", {
      name: args.name,
      ownerId: user._id,
      plan: user.plan,
      memberIds: [user._id],
      createdAt: now,
      updatedAt: now,
    });
  },
});