コンサル業務で毎回作る「機能要件一覧」。ゼロから手入力して、SharePointに手動アップ…この手間を Claude AI × Power Automate で自動化した実装記事です。セキュリティ設計も含めて解説します。
🛠 技術スタック
| レイヤー | 技術 |
|---|---|
| フロントエンド / BFF | Next.js 16（App Router） |
| データベース | Supabase（PostgreSQL） |
| 認証 | NextAuth v5 + Microsoft Entra ID（Azure AD） |
| AI | Anthropic Claude API |
| ホスティング | Vercel |
| SharePoint連携 | Power Automate（HTTPトリガー） |
🏗 アーキテクチャ全体図
🌐 ブラウザ（ユーザー）
↕
Vercel / Next.js 16
App Router
Server Components
Server Components
↔
API Routes
Serverless Functions
Serverless Functions
↓ ↙ ↘
🗄 Supabase
PostgreSQL DB
PostgreSQL DB
projects / features
schedules
schedules
🤖 Claude API
Anthropic
Anthropic
機能一覧を自動生成
⚡ Power Automate
HTTP Trigger
HTTP Trigger
↓
📊 SharePoint
Excel自動生成
Excel自動生成
↕
Microsoft 365
🔐 NextAuth v5
→
Microsoft Entra ID
Azure AD（テナント固定）
Azure AD（テナント固定）
1. 認証設計：2段階アクセス制御
1
Microsoftサインイン
Azure ADで組織アカウント認証
他テナントは遮断
他テナントは遮断
→
2
アクセスコード入力
アプリ独自の合言葉
HttpOnly Cookieで管理
HttpOnly Cookieで管理
→
3
案件一覧へ
8時間有効
再入力不要
再入力不要
1-1. Azure ADによる組織限定ログイン
issuer にテナントIDを固定することで、自社以外のMicrosoftアカウントでは認証が通りません。/common エンドポイントは使用しません。
src/lib/auth.ts
export const { handlers, auth, signIn, signOut } = NextAuth({ secret: process.env.AUTH_SECRET, providers: [ MicrosoftEntraID({ clientId: process.env.AZURE_AD_CLIENT_ID, clientSecret: process.env.AZURE_AD_CLIENT_SECRET, // テナントIDを固定 → 他組織のアカウントはログイン不可 issuer: `https://login.microsoftonline.com/${process.env.AZURE_AD_TENANT_ID}/v2.0`, }), ], pages: { signIn: '/', error: '/' }, })
1-2. アクセスコードによる二重ロック
Azure ADサインイン後でも、独自のアクセスコードを入力しないと案件一覧を見れません。状態は HttpOnly Cookie で管理するため、JavaScriptから読み取り不可です。
src/app/api/unlock/route.ts
export async function POST(req: NextRequest) { const { password } = await req.json() // 環境変数で管理 → ソースコードに値が入らない if (!password || password !== process.env.SITE_PASSWORD) { return NextResponse.json({ error: 'Invalid' }, { status: 403 }) } const res = NextResponse.json({ ok: true }) res.cookies.set('site_unlocked', 'true', { httpOnly: true, // JSから読み取り不可 secure: true, // HTTPS限定 sameSite: 'lax', // CSRF対策 maxAge: 60 * 60 * 8, // 8時間有効 }) return res }
💡 ポイント：Edge Runtime vs Node.js Runtimeの罠
NextAuthの auth() と cookies() をミドルウェア（Edge Runtime）で組み合わせると動作が不安定になる問題がありました。解決策： 認証チェックをEdge Runtimeから外し、Node.jsランタイムで動く
layout.tsx（Server Component）に移しました。2. Claude APIによる機能一覧自動生成
2-1. APIキーはサーバーサイドのみ
Claude APIのシークレットキーは API Route内でのみ参照 します。クライアントコンポーネントから直接呼び出す設計は取っていません。
src/app/api/features/parse/route.ts
const client = new Anthropic({ // ANTHROPIC_API_KEY はサーバー環境変数 → ブラウザに一切露出しない apiKey: process.env.ANTHROPIC_API_KEY, }) const message = await client.messages.create({ model: 'claude-opus-4-5', max_tokens: 4096, system: SYSTEM_PROMPT, messages: [{ role: 'user', content: text }], })
2-2. システムプロンプト：推測・水増し禁止
AIが勝手に機能を追加しないよう、明示的に制約をかけています。
システムプロンプト（抜粋）
const SYSTEM_PROMPT = ` あなたはシステム要件を機能一覧に変換するアシスタントです。 【厳守ルール】 - 入力から明示的に読み取れる内容だけを根拠にする - 推測・補完・水増しは厳禁 - 入力に書かれていない機能を追加しない 【出力形式】JSON配列で返すこと - category, title, description - priority: 'Must' | 'Should' | 'Could' - impl_type: '標準機能'|'設定'|'カスタム'|'外部連携'|'対象外' `
2-3. DB制約違反への対処：正規化関数
SupabaseのCHECK制約に通らない値をAIが返すことがあるため、INSERT前にサーバーサイドで正規化します。
impl_type 正規化関数
function normalizeImplType(val: string): string | null { const v = val?.trim() ?? '' if (v.includes('標準')) return '標準機能' if (v === '設定') return '設定' if (v.includes('外部') || v.includes('連携')) return '外部連携' if (v.includes('対象外')) return '対象外' if (v.includes('カスタム')) return 'カスタム' return null // DBエラーではなくバリデーションエラーとして処理 }
3. Power Automate連携：SharePoint Excel自動生成
3-1. 設計方針
SharePoint APIを直接呼ぶ場合、OAuthトークン取得・ファイル操作・テーブル書き込みを全て自前実装する必要があります。
Power AutomateのHTTPトリガーに委譲することで、SharePoint操作をノーコードで実現し、アプリ側のコードを最小化しました。
3-2. フロー構成
① HTTP 要求の受信時（HTTPトリガー）
アプリからPOSTされたJSONを受け取る。JSONスキーマで受信データの型を定義することで、後続ステップで各フィールドを参照可能にする。
② ファイルのコピー（SharePointコネクタ）
s_template.xlsx をコピーして日時名で新しいファイルを作成。concat('機能一覧_', convertTimeZone(utcNow(), 'UTC', 'Tokyo Standard Time', 'yyyyMMdd_HHmm'), '.xlsx')③ Apply to each → 表に行を追加（Excel Online Business）
featuresの配列をループし、コピーしたファイルのテーブルに1行ずつ書き込む。機能が50件あれば50回ループが回る。
3-3. アプリ側のコード（export API Route）
src/app/api/features/export/route.ts
export async function POST(req: NextRequest) { const { projectId, projectName } = await req.json() // Webhook URLは環境変数 → SASトークン付きURLがソースに入らない const url = process.env.POWER_AUTOMATE_URL if (!url) return NextResponse.json({ error: 'URL未設定' }, { status: 500 }) // Supabaseからデータ取得 const { data: features } = await supabase .from('features') .select('*') .eq('project_id', projectId) // Power AutomateにPOST（アプリはデータを渡すだけ） await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ projectId, projectName, features }), }) return NextResponse.json({ ok: true }) }
💡 ポイント：Power Automateを使う理由
SharePoint APIを直接叩く場合、OAuth 2.0トークンの取得・リフレッシュ、ファイルID管理、テーブルへの書き込みAPIなど実装コストが高い。Power AutomateのExcel Online Businessコネクタに任せることで、この部分を完全ノーコードで実現できます。4. 環境変数の管理
全てのシークレットをVercelのEnvironment Variablesに登録しています。ソースコード・.env.local・GitHubには一切含みません。
| 変数名 | 用途 | 公開範囲 |
|---|---|---|
| AUTH_SECRET | NextAuthセッション署名 | サーバーのみ |
| AZURE_AD_CLIENT_ID | Azure ADアプリID | サーバーのみ |
| AZURE_AD_CLIENT_SECRET | Azure ADシークレット | サーバーのみ |
| AZURE_AD_TENANT_ID | 自社テナントID | サーバーのみ |
| NEXT_PUBLIC_SUPABASE_URL | SupabaseプロジェクトURL | 公開可（RLS制御） |
| NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase匿名キー | 公開可（RLS制御） |
| SUPABASE_SERVICE_ROLE_KEY | Supabase管理者キー | サーバーのみ |
| ANTHROPIC_API_KEY | Claude APIキー | サーバーのみ |
| SITE_PASSWORD | アプリ独自アクセスコード | サーバーのみ |
| POWER_AUTOMATE_URL | Webhook URL（SASトークン含む） | サーバーのみ |
⚠️ NEXT_PUBLIC_ プレフィックスの使い分け
NEXT_PUBLIC_ が付いた変数はビルド時にバンドルされブラウザに露出します。Supabaseの匿名キーは仕様上公開可能（RLSで制御）ですが、それ以外のシークレットには絶対に NEXT_PUBLIC_ をつけないようにしています。5. ハマったポイントと対処法
🔥 Edge Runtime vs Node.js Runtime の罠
NextAuthの auth() と cookies() をミドルウェア（Edge Runtime）で組み合わせると、クッキーの読み取りが不安定になる問題がありました。
✅ 解決策： 認証チェックをEdge Runtimeのmiddlewareから完全に除外し、Node.jsランタイムで動くServer Component（
layout.tsx）に移しました。🔥 Power AutomateのApply to eachループ名参照エラー
新しいデザイナーでコードビューを手書きすると、ループ名が Apply_to_each ではなく それぞれに適用する_1 のような日本語名になり InvalidTemplate エラーが発生しました。
✅ 解決策： 式を手書きせず、動的コンテンツパネルから選択することで自動的に正しい名前が入ります。
🔥 AIのimpl_type出力がDB制約に違反する
Claude APIが 'カスタム開発' や 'JS実装' など、SupabaseのCHECK制約に含まれない値を返すことがありました。
✅ 解決策： サーバーサイドに正規化関数を実装し、INSERT前に必ず変換を通すようにしました。
6. セキュリティ設計まとめ
🔐 Claude APIキー
API Route内でのみ参照。
NEXT_PUBLIC_ なし。クライアントには一切露出しない。⚡ Power Automate URL
SASトークン付きURLを環境変数に格納。クライアントには渡さず、サーバーからのみPOST。
🏢 Azure ADシークレット
Vercel環境変数のみ。テナントID固定で他組織のアカウントを遮断。
🍪 アクセスコード
HttpOnly + Secure + SameSite=lax のCookieで管理。JSから読み取り不可。
まとめ
✦Claude AIに要件テキストを渡すだけで機能一覧が自動生成できる。推測・水増し禁止のプロンプト設計が重要。
✦Power AutomateのHTTPトリガーを使えば、SharePoint操作をノーコードで実現できる。SharePoint APIの自前実装コストを大幅削減。
✦Next.js App RouterのServer Components / API Routeの境界を活かすことで、シークレットをサーバーサイドに閉じ込めやすい。
✦全シークレットをVercel環境変数で管理し、ソースコード・GitHubには一切含まない設計が前提。
Next.jsのApp RouterはServer ComponentsとAPI Routeの境界が明確なので、セキュリティを保ちながらAIやSaaSと連携する構成を作りやすいと感じています。
「コードで書くべきか、ノーコードツールに任せるか」の判断軸も今後の開発で意識していきたいと思います。
