Swagger UI

Swagger UI

概要

OpenAPI 仕様を可視化し、インタラクティブな API Explorer を提供するためのスキル。配布形態とセキュリティ要件を整理し、安定した公開運用を支援する。

詳細は references/Level1_basics.md から段階的に参照する。

ワークフロー

Phase 1: 統合方式の整理

目的: 配布形態とアクセス制御を決定する。

アクション:

1. 静的/React/Next.js/サーバー統合の方式を選定する。
2. 認証・CORS・公開範囲の要件を整理する。
3. OpenAPI 互換性を確認する。

Phase 2: 実装

目的: 設定と埋め込みを実装する。

アクション:

1. assets/swagger-ui-standalone.html または React/Next.js テンプレートを適用する。
2. assets/swagger-ui-config.json に設定を反映する。
3. 必要に応じて scripts/setup-swagger-ui.sh を実行する。

Phase 3: 検証

目的: UI表示と設定の妥当性を確認する。

アクション:

1. scripts/validate-swagger-config.mjs で設定を検証する。
2. 認証や公開範囲の動作確認を行う。
3. 公開時の注意点を整理する。

Task仕様ナビ

ベストプラクティス

すべきこと

• url または urls を明示して仕様書の場所を固定する。
• 認証方式と公開範囲を事前に決める。
• 本番は CORS と CSP を確認する。
• OpenAPI のバージョン互換性を確認する。

避けるべきこと

• 認証なしで社内APIを公開しない。
• 設定ファイルの未検証のまま公開しない。
• 仕様書と UI の不整合を放置しない。

リソース/スクリプト参照

references/

• references/Level1_basics.md: 基礎指針
• references/Level2_intermediate.md: 実務パターン
• references/Level3_advanced.md: 高度な設計指針
• references/Level4_expert.md: 専門領域の注意点
• references/integration-options.md: 統合方式比較
• references/security-hardening.md: セキュリティ設計
• references/openapi-compatibility.md: OpenAPI互換性
• references/swagger-ui-configuration.md: Swagger UI設定
• references/cicd-integration.md: CI/CD統合
• references/redoc-configuration.md: ReDoc比較

assets/

• assets/swagger-ui-standalone.html: スタンドアロンテンプレート
• assets/swagger-ui-react.tsx: Reactテンプレート
• assets/swagger-ui-nextjs.tsx: Next.jsテンプレート
• assets/swagger-ui-config.json: 設定ファイル
• assets/swagger-config.json: 追加設定例

scripts/

• scripts/validate-swagger-config.mjs: 設定検証
• scripts/setup-swagger-ui.sh: セットアップ補助

変更履歴