💻 システム開発

02_scale-seo_分離依頼

最終更新 2026年06月24日／ 31_システム開発部/分離プロジェクト依頼書/02_scale-seo_分離依頼.md

依頼書: SCALE Base から「SEO 機能」を独立プロジェクトに分離

新しい Claude Code セッション宛て。コピペでそのまま実行可能 な指示書。
不明点は完了後に Slack #system_scalebase で大串に確認。

あなたが実行すること

SCALE Base モノリス内の SEO 機能 を独立した Cloudflare Pages プロジェクト scale-seo に分離してください。
分離後は scale-base のサイドバー「SEO」をクリックすると新プロジェクト URL を新規タブで開く構成にします。

並行セッションでの SEO 開発は無いので落ち着いて作業 OK。

SCALE Base 全体情報（前提知識）

項目	内容
scale-base ローカル	`/Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base/`
scale-base 本番	`https://scale-base.pages.dev/`
Framework	Next.js 15+（App Router）。「This is NOT the Next.js you know」(scale-base/AGENTS.md)
デプロイ	Cloudflare Pages（`bash scripts/deploy.sh`）
共有データ Worker	`https://scale-task-cron.y-ogushi.workers.dev`（CORS:* 許可）
認証	`lib/auth-context.tsx` の DEMO_USERS（大串/細川等）ハードコード

進捗チェックリスト

[ ] ローカル ~/Library/CloudStorage/.../AI/scale-seo/ 作成
[ ] Next.js 15+ 雛形 + Tailwind 同期
[ ] scale-base 共通設定コピー
[ ] SEO 関連コード移植
[ ] パスをトップレベル化
[ ] レイアウト + 認証ガード実装
[ ] ローカル動作確認
[ ] Cloudflare Pages project scale-seo 作成
[ ] 初回デプロイ → https://scale-seo.pages.dev/
[ ] scale-base 側 systems.ts に externalUrl + 旧コード移動
[ ] scale-base 再デプロイ
[ ] サイドバー SEO クリック → scale-seo 開く確認
[ ] 大串に Slack 完了報告

Step 1: 雛形作成

cd ~/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/
npx create-next-app@latest scale-seo --typescript --tailwind --app --src-dir=false --import-alias="@/*" --no-eslint
cd scale-seo

Step 2: scale-base から共通設定をコピー

SRC=~/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base

cp "$SRC/tailwind.config.ts" ./
cp "$SRC/app/globals.css" ./app/globals.css
mkdir -p lib
cp "$SRC/lib/auth-context.tsx" ./lib/
cp "$SRC/lib/tasks-api.tsx" ./lib/ 2>/dev/null || true

Step 3: SEO 関連コード移植

mkdir -p app components functions/api
cp -r "$SRC/app/(dashboard)/seo/." ./app/
cp -r "$SRC/components/seo" ./components/ 2>/dev/null || true
cp "$SRC"/lib/seo-*.ts ./lib/ 2>/dev/null || true
cp "$SRC"/functions/api/seo-*.ts ./functions/api/ 2>/dev/null || true

Step 4: ルート調整

scale-base のパスをトップレベル化：

旧: app/(dashboard)/seo/page.tsx        → 新: app/page.tsx (ダッシュボード)
旧: app/(dashboard)/seo/keywords/...    → 新: app/keywords/...
旧: app/(dashboard)/seo/content/...     → 新: app/content/...
旧: app/(dashboard)/seo/audit/...       → 新: app/audit/...
旧: app/(dashboard)/seo/settings/...    → 新: app/settings/...

URL の一括置換：

find ./app ./components ./lib -type f \( -name "*.tsx" -o -name "*.ts" \) -exec sed -i '' "s|'/seo/|'/|g" {} \;
find ./app ./components ./lib -type f \( -name "*.tsx" -o -name "*.ts" \) -exec sed -i '' 's|"/seo/|"/|g' {} \;

Step 5: ルートレイアウト

app/layout.tsx：

import './globals.css';
import { AuthProvider } from '@/lib/auth-context';

export const metadata = { title: 'SCALE SEO', description: 'SEO 運用システム' };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body className="bg-bg text-text">
        <AuthProvider>
          <header className="sticky top-0 z-30 bg-bg2 border-b border-border px-4 py-2 flex items-center justify-between">
            <a href="https://scale-base.pages.dev/home/" className="text-xs text-text2 hover:text-text">← SCALE Base に戻る</a>
            <span className="text-sm font-bold text-text">SCALE SEO</span>
          </header>
          <main className="p-4 md:p-6">{children}</main>
        </AuthProvider>
      </body>
    </html>
  );
}

Step 6: 認証ガード（簡易）

各 page で：

'use client';
import { useEffect } from 'react';
import { useAuth } from '@/lib/auth-context';

export default function Page() {
  const { user, isLoading } = useAuth();
  useEffect(() => {
    if (!isLoading && !user) window.location.href = 'https://scale-base.pages.dev/';
  }, [user, isLoading]);
  // ...
}

Step 7: ローカル動作確認

npm run dev

http://localhost:3000 で SEO ダッシュボード表示 OK か確認。

Step 8: scripts/deploy.sh 作成

mkdir -p scripts
cat > scripts/deploy.sh <<'EOF'
#!/bin/bash
set -e
ROOT="$(cd "$(dirname "$0")/.." && pwd)"
cd "$ROOT"
TS=$(date +%Y-%m-%d_%H%M%S)
mkdir -p "$ROOT/../scale-seo-backups"
tar --exclude='node_modules' --exclude='.next' --exclude='out' --exclude='.wrangler' \
  -czf "$ROOT/../scale-seo-backups/scale-seo_${TS}_pre-deploy.tar.gz" -C "$ROOT" .
rm -rf .next out
NODE_OPTIONS="--max-old-space-size=8192" npx next build
npx wrangler pages deploy out --project-name=scale-seo --branch=main --commit-message="scale-seo deploy"
tar --exclude='node_modules' --exclude='.next' --exclude='out' --exclude='.wrangler' \
  -czf "$ROOT/../scale-seo-backups/scale-seo_${TS}_post-deploy.tar.gz" -C "$ROOT" .
echo "✓ Deploy complete → https://scale-seo.pages.dev/"
EOF
chmod +x scripts/deploy.sh

Step 9: Cloudflare Pages project 作成 + デプロイ

npx wrangler pages project create scale-seo --production-branch=main
bash scripts/deploy.sh

→ https://scale-seo.pages.dev/ で動作確認。

Step 10: scale-base 側を更新

scale-base/lib/systems.ts の SEO エントリ：

{
  id: 'seo',
  name: 'SEO',
  shortName: 'SEO',
  icon: Search,
  color: '#22c55e',
  bgColor: 'rgba(34,197,94,0.15)',
  sections: [],                                       // ← 空に
  externalUrl: 'https://scale-seo.pages.dev/',       // ← 追加
},

旧コード退避：

cd ~/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base
mkdir -p _archived_apps
mv "app/(dashboard)/seo" "_archived_apps/seo_$(date +%Y%m%d)"
mv "components/seo" "_archived_apps/components_seo_$(date +%Y%m%d)" 2>/dev/null || true
mkdir -p _archived_apps/lib_seo _archived_apps/functions_seo
mv lib/seo-*.ts _archived_apps/lib_seo/ 2>/dev/null || true
mv functions/api/seo-*.ts _archived_apps/functions_seo/ 2>/dev/null || true

npx next build  # 失敗したら import 漏れ修正

lib/changelog.ts 最上段に分離エントリ追加（id, date, title, scope: ['seo'] 等）。

bash scripts/deploy.sh

Step 11: 動作確認 → Slack 完了報告

サイドバー SEO → scale-seo.pages.dev が開く確認 → #system_scalebase に：

:white_check_mark: scale-seo 分離完了
URL: https://scale-seo.pages.dev/

重要ルール

scale-base の SEO 関連以外のファイルは触らない
デプロイ前後にスナップショット必須
共通の型定義変更は大串に確認

完了報告（2026-04-29）

ステータス: ✅ 完了

成果物

本番URL: https://scale-seo.pages.dev/
ローカルパス: /Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-seo/
Slack報告: #システム_scalebase に投稿済み

移植完了

page: 17 ファイル（dashboard / keywords / content / audit / rankings / competitors / backlinks / reports / tools / assistant / settings + サブページ）
lib: lib/seo-data.ts, lib/seo-types.ts
functions: functions/api/seo-audit.ts, seo-generate.ts
依存: recharts, lucide-react を追加インストール

scale-base 側の退避（_archived_apps/）

app/(dashboard)/seo/ → seo_20260429/
lib/seo-data.ts, lib/seo-types.ts → lib_seo_20260429/
functions/api/seo-audit.ts, seo-generate.ts → functions_seo_20260429/
lib/systems.ts: seo エントリを sections=[] + externalUrl=https://scale-seo.pages.dev/ に変更
lib/changelog.ts: ce-2026-04-29-27 として追記

認証構成

AuthGate コンポーネントで sessionStorage(sb_user) を共有
未ログイン時は https://scale-base.pages.dev/ にリダイレクト
ヘッダーに「← SCALE Base に戻る」リンク

動作確認済み

URL	HTTP
https://scale-seo.pages.dev/	200
/keywords/	200
/content/	200
/audit/	200
/settings/	200
scale-base 本番JS バンドルに `scale-seo.pages.dev` 反映	✓

ハマりどころ

日本語パス（マイドライブ）で Turbopack panic → /tmp/sb-seo-deploy/ に完全コピーしてビルド（scale-base/scripts/deploy.sh と同じパターン）
並行セッションが /tmp/scale-base-build/ を使用中 → 専用ディレクトリで衝突回避
Bot が #システム_scalebase 未参加 → MCP（個人OAuth）で投稿
Cloudflare project scale-seo は2週前作成済（古い空雛形）→ project create スキップして再デプロイ