Level 9 実践: 週次記事生成・脆弱性監視を 24/7 自動化する

このチュートリアルについて

概念・仕組みを先に理解したい方は Level 9 の概念ガイドを参照してください。

Level 8 で並列実装の体制が整った。次は「自分がいなくてもポートフォリオサイトが育ち続ける」状態を目指す。GitHub Actions を使って2つの自動化パイプラインを構築する。

対象読者: Level 8 まで完了しており、GitHub Actions の基本（ワークフローファイルの書き方）を知っている方。

学習時間の目安: 読了 15分 + 実践 60分

前のレベルからの引き継ぎ

Level 8 で3機能の並列実装を完了した。my-portfolio はダークモード・プロジェクト一覧・RSS フィードを備え、PR ベースの開発フローが整っている。

自動化したい2つの課題:

週次ブログ記事生成: 毎週月曜の朝、先週のトレンドをもとにブログ記事を自動生成して PR を作成する
脆弱性監視: 毎日 npm audit を実行し、高リスクの脆弱性を検知したら Issue を作成して Slack に通知する

Step 1: ディレクトリ構成を確認する

my-portfolio/
├── .github/
│   └── workflows/           # ← ここに追加する
├── scripts/
│   ├── parallel_features.sh
│   ├── review_pr.sh
│   └── collect_and_blog.sh
└── ...

Step 2: 週次ブログ記事生成ワークフローを作成する

.github/workflows/weekly-blog.yml を作成します。毎週月曜の午前9時（JST）に Claude が記事を生成して PR を作成します。

name: Weekly Blog Generation

on:
  schedule:
    - cron: "0 0 * * 1"   # UTC 0:00 = JST 9:00 毎週月曜
  workflow_dispatch:        # 手動実行も可能

jobs:
  generate-blog:
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Claude Code をインストール
        run: npm install -g @anthropic-ai/claude-code

      - name: 週次ブログ記事を生成する
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          BRANCH="auto/blog-$(date +%Y%m%d)"
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git checkout -b "${BRANCH}"

          claude --print --dangerously-skip-permissions -p "
          my-portfolio の src/content/posts/ に今週のブログ記事を1件生成してください。

          要件:
          1. TypeScript・Next.js・React のいずれかに関する実践的なトピックを選ぶ
          2. ファイル名: src/content/posts/$(date +%Y-%m-%d)-weekly-tips.md
          3. frontmatter に title・date（本日の日付）・description・tags を含める
          4. 本文は 800〜1200 文字程度、コード例を必ず1つ含める
          5. 末尾に '---\n_この記事は Claude Code により自動生成されました。_' を追加する

          記事生成後、git add と git commit を実行してください。
          コミットメッセージ: 'feat: add weekly blog post $(date +%Y-%m-%d)'
          "

          git push origin "${BRANCH}"

          gh pr create \
            --title "Weekly Blog: $(date +%Y-%m-%d)" \
            --body "Claude Code による週次自動生成記事です。内容を確認してマージしてください。" \
            --base main \
            --head "${BRANCH}"

ワークフローを有効にするために ANTHROPIC_API_KEY を GitHub Secrets に登録します。

gh secret set ANTHROPIC_API_KEY --body "sk-ant-..."

Step 3: 脆弱性監視ワークフローを作成する

.github/workflows/vulnerability-check.yml を作成します。毎日午前8時（JST）に npm audit を実行し、高リスクの脆弱性を検知したら Claude が原因を分析して Issue を作成します。

name: Daily Vulnerability Check

on:
  schedule:
    - cron: "0 23 * * *"   # UTC 23:00 = JST 8:00 毎日
  workflow_dispatch:

jobs:
  audit:
    runs-on: ubuntu-latest
    permissions:
      issues: write

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: 依存関係をインストール
        run: npm ci

      - name: npm audit を実行して結果を保存
        id: audit
        run: |
          npm audit --json > audit-result.json || true
          HIGH=$(jq '.metadata.vulnerabilities.high // 0' audit-result.json)
          CRITICAL=$(jq '.metadata.vulnerabilities.critical // 0' audit-result.json)
          echo "high=${HIGH}" >> $GITHUB_OUTPUT
          echo "critical=${CRITICAL}" >> $GITHUB_OUTPUT

      - name: Claude Code をインストール
        if: ${{ steps.audit.outputs.high != '0' || steps.audit.outputs.critical != '0' }}
        run: npm install -g @anthropic-ai/claude-code

      - name: Claude が脆弱性を分析して Issue を作成する
        if: ${{ steps.audit.outputs.high != '0' || steps.audit.outputs.critical != '0' }}
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          AUDIT_SUMMARY=$(cat audit-result.json | jq '{
            high: .metadata.vulnerabilities.high,
            critical: .metadata.vulnerabilities.critical,
            advisories: [.advisories | to_entries[] | .value | {
              title: .title,
              severity: .severity,
              module_name: .module_name,
              recommendation: .recommendation
            }]
          }')

          ISSUE_BODY=$(claude --print --dangerously-skip-permissions -p "
          以下の npm audit の結果を分析してください。

          ${AUDIT_SUMMARY}

          以下の形式で Issue 本文を作成してください（Markdown）:
          1. 検出された脆弱性の概要（重大度別の件数）
          2. 各脆弱性の説明と影響範囲（パッケージ名・バージョン）
          3. 推奨される修正手順（npm update / npm audit fix コマンドを含む）
          4. 緊急度の評価（すぐに対応が必要か、次のスプリントで可能か）
          ")

          gh issue create \
            --title "🚨 脆弱性検出: high=${{ steps.audit.outputs.high }}, critical=${{ steps.audit.outputs.critical }} ($(date +%Y-%m-%d))" \
            --body "${ISSUE_BODY}" \
            --label "security,automated"

      - name: Slack に通知する
        if: ${{ steps.audit.outputs.critical != '0' }}
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
        run: |
          curl -X POST "${SLACK_WEBHOOK_URL}" \
            -H "Content-Type: application/json" \
            -d '{
              "text": "🚨 *my-portfolio に重大な脆弱性が検出されました*\ncritical: ${{ steps.audit.outputs.critical }} 件\nGitHub Issues を確認してください。"
            }'

Slack 通知を使わない場合は最後のステップを省略できます。

Step 4: ワークフローをプッシュして動作確認する

git add .github/workflows/weekly-blog.yml .github/workflows/vulnerability-check.yml
git commit -m "ci: add weekly blog generation and vulnerability check workflows"
git push origin main

手動でワークフローをテスト実行します。

# 週次ブログ生成を手動実行
gh workflow run weekly-blog.yml

# 脆弱性チェックを手動実行
gh workflow run vulnerability-check.yml

実行結果を確認します。

# 実行中のワークフローを確認
gh run list --limit 5

# 特定のランのログを確認
gh run view --log

Step 5: 生成された PR・Issue を確認する

ワークフローが成功すると、以下が自動生成されます。

週次ブログ PR:

gh pr list --label ""
# → "Weekly Blog: 2026-04-07" などの PR が表示される

脆弱性 Issue（脆弱性がある場合）:

gh issue list --label "security"
# → "🚨 脆弱性検出: ..." の Issue が表示される

PR の内容を確認して問題がなければマージします。脆弱性 Issue は内容に従って npm audit fix を実行します。

Step 6: 通知とレビューのフローを調整する

自動生成コンテンツは必ず人間がレビューする必要があります。以下のルールを CLAUDE.md に追記します。

## 自動化ルール

### 週次ブログ生成
- PR は毎週月曜に自動作成される
- レビューせずにマージしない
- 内容が不適切な場合は PR を閉じる

### 脆弱性監視
- critical の Issue は 24 時間以内に対応する
- high の Issue は今週中に対応する
- 誤検知の場合は Issue に "false-positive" ラベルを付けて閉じる

この時点の my-portfolio

GitHub Actions により2つの自動化パイプラインが稼働している
週次でブログ記事が生成され、PR としてレビュー待ちになる
毎日 npm audit が走り、脆弱性を検知したら Issue が自動作成される

my-portfolio/
├── .github/
│   └── workflows/
│       ├── weekly-blog.yml          # ← 新規追加
│       └── vulnerability-check.yml  # ← 新規追加
├── scripts/
│   ├── parallel_features.sh
│   ├── review_pr.sh
│   └── collect_and_blog.sh
└── ...

次のレベルへ

Level 10 実践: 次のプロダクトのエージェント群を Claude に設計させる