💻 システム開発

01_scale-x_分離依頼

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

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

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

あなたが実行すること

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

重要な前提: 並行して別セッションが scale-base 全体を編集中。X 関連ファイル以外は 絶対に触らない こと。

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:* 許可。/data/<key> で KV 読み書き）
認証 lib/auth-context.tsx の DEMO_USERS でハードコード（大串/細川 等）
Tailwind tailwind.config.ts + app/globals.css でダーク基調

進捗チェックリスト（順番にチェックしながら進める）

  • [ ] ローカル ~/Library/CloudStorage/.../AI/scale-x/ 作成
  • [ ] Next.js 15+ 雛形 + Tailwind 同期
  • [ ] scale-base 共通設定（auth, globals.css, tailwind.config.ts）コピー
  • [ ] X 関連コード移植（app, components, lib, functions/api）
  • [ ] パスをトップレベル化（/x/generate → /generate 等）
  • [ ] 「← SCALE Base に戻る」ヘッダー実装
  • [ ] ローカル npm run dev で動作確認
  • [ ] Cloudflare Pages project scale-x 作成
  • [ ] 初回デプロイ → https://scale-x.pages.dev/ 確認
  • [ ] scale-base 側 lib/systems.ts で X に externalUrl 設定 + sections: []
  • [ ] scale-base から旧 X コードを _archived_apps/x/ 等へ移動
  • [ ] scale-base 再ビルド・再デプロイ
  • [ ] サイドバーから X クリック → scale-x が開く確認
  • [ ] 大串に Slack 完了報告

Step 1: 雛形作成

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

質問が来たら全部 default 推奨。

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

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

# Tailwind & globals
cp "$SRC/tailwind.config.ts" ./
cp "$SRC/app/globals.css" ./app/globals.css

# 認証コンテキスト（重要: SESSION_KEY='sb_user' を保持してログインを共通化）
mkdir -p lib
cp "$SRC/lib/auth-context.tsx" ./lib/

# 必要なら types
cp "$SRC/lib/tasks-api.tsx" ./lib/ 2>/dev/null || true

tsconfig.json の paths に "@/*": ["./*"] が入ってることを確認。

Step 3: X 関連コード移植

# Pages
mkdir -p app
cp -r "$SRC/app/(dashboard)/x/." ./app/

# Components
mkdir -p components
cp -r "$SRC/components/x" ./components/ 2>/dev/null || true

# Lib（X 関連だけ）
cp "$SRC"/lib/x-*.ts ./lib/ 2>/dev/null || true

# Functions API
mkdir -p functions/api
cp "$SRC"/functions/api/x-*.ts ./functions/api/ 2>/dev/null || true

Step 4: ルート調整

scale-base では /x/generate, /x/insight 等だったパスを トップレベル化：

旧: app/(dashboard)/x/page.tsx        → 新: app/page.tsx
旧: app/(dashboard)/x/generate/...    → 新: app/generate/...
旧: app/(dashboard)/x/schedule/...    → 新: app/schedule/...
旧: app/(dashboard)/x/insight/...     → 新: app/insight/...
旧: app/(dashboard)/x/leadgen/...     → 新: app/leadgen/...
旧: app/(dashboard)/x/account/...     → 新: app/account/...

コード内の URL も置換：

# /x/ → / に一括置換（dry run 後に実行）
grep -rn "'/x/" ./app ./components ./lib 2>/dev/null
# 確認したら sed で置換（macOS 用）
find ./app ./components ./lib -type f \( -name "*.tsx" -o -name "*.ts" \) -exec sed -i '' "s|'/x/|'/|g" {} \;
find ./app ./components ./lib -type f \( -name "*.tsx" -o -name "*.ts" \) -exec sed -i '' 's|"/x/|"/|g' {} \;

Step 5: ルートレイアウト

app/layout.tsx：

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

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

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 X</span>
          </header>
          <main className="p-4 md:p-6">{children}</main>
        </AuthProvider>
      </body>
    </html>
  );
}

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

各ページの先頭で useAuth() を使って未ログインなら https://scale-base.pages.dev/ にリダイレクト：

'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 を開いて X ダッシュボードが表示されれば OK

エラーは TS インポート漏れが大半。1つずつ解消。

Step 8: scripts/deploy.sh 作成

~/Library/CloudStorage/.../AI/scale-x/scripts/deploy.sh：

#!/bin/bash
set -e
ROOT="$(cd "$(dirname "$0")/.." && pwd)"
cd "$ROOT"

# Pre-deploy snapshot
TS=$(date +%Y-%m-%d_%H%M%S)
mkdir -p ~/scale-x-backups
mkdir -p "$ROOT/../scale-x-backups"
tar --exclude='node_modules' --exclude='.next' --exclude='out' --exclude='.wrangler' \
  -czf "$ROOT/../scale-x-backups/scale-x_${TS}_pre-deploy.tar.gz" -C "$ROOT" .

# Build
rm -rf .next out
NODE_OPTIONS="--max-old-space-size=8192" npx next build

# Deploy
npx wrangler pages deploy out --project-name=scale-x --branch=main --commit-message="scale-x deploy"

# Post-deploy snapshot
tar --exclude='node_modules' --exclude='.next' --exclude='out' --exclude='.wrangler' \
  -czf "$ROOT/../scale-x-backups/scale-x_${TS}_post-deploy.tar.gz" -C "$ROOT" .

echo "✓ Deploy complete → https://scale-x.pages.dev/"

chmod +x scripts/deploy.sh

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

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

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

Step 10: scale-base 側を更新（最後）

scale-base/lib/systems.ts の X エントリを external 化：

{
  id: 'x',
  name: 'X',
  shortName: 'X',
  icon: AtSign,
  color: '#a855f7',
  bgColor: 'rgba(168,85,247,0.15)',
  sections: [],                                       // ← 空に
  externalUrl: 'https://scale-x.pages.dev/',         // ← 追加
},

旧コードを移動：

cd ~/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base
mkdir -p _archived_apps
mv "app/(dashboard)/x" "_archived_apps/x_$(date +%Y%m%d)"
mv "components/x" "_archived_apps/components_x_$(date +%Y%m%d)" 2>/dev/null || true
# functions/api/x-*.ts と lib/x-*.ts も移動
mkdir -p _archived_apps/lib_x _archived_apps/functions_x
mv lib/x-*.ts _archived_apps/lib_x/ 2>/dev/null || true
mv functions/api/x-*.ts _archived_apps/functions_x/ 2>/dev/null || true

ビルド確認：

npx next build  # エラーがあれば import 漏れ等を修正

lib/changelog.ts の最上段に分離記録を追加：

{
  id: 'ce-2026-04-29-XX',
  date: '2026-04-29',
  time: 'HH:MM',
  title: 'X 機能を scale-x プロジェクトに分離',
  category: 'infra',
  scope: ['x'],
  summary: 'モノリス削減のため X 関連コードを scale-x.pages.dev に切り出し。サイドバー X は外部リンク化。',
  details: [
    'app/(dashboard)/x, components/x, lib/x-*, functions/api/x-* を _archived_apps/ に移動',
    'lib/systems.ts の X エントリに externalUrl を設定',
  ],
  files: ['lib/systems.ts'],
},

scale-base デプロイ：

bash scripts/deploy.sh

Step 11: 動作確認

  1. https://scale-base.pages.dev/home/ でログイン
  2. サイドバー左の X クリック → 新規タブで scale-x.pages.dev が開く
  3. ログインユーザー情報が引き継がれている（または再ログイン後正常動作）
  4. X ダッシュボード・各サブページが scale-x 側で動作

Step 12: Slack 完了報告

#system_scalebase に：

:white_check_mark: scale-x 分離完了
URL: https://scale-x.pages.dev/
旧コードは scale-base/_archived_apps/ に退避済み

重要ルール（守ってね）

  1. scale-base の X 関連以外のファイルは絶対に触らない（並行セッションが壊れる）
  2. デプロイ前に必ずスナップショット（scripts/deploy.sh が自動取得する）
  3. 共通の型定義（lib/tasks-api.tsx 等）を変更したい場合は大串に確認
  4. 完了報告まで他作業に手を広げない

依頼者: 大串 / 最終更新: 2026-04-29