Swagger Editor のドキュメント
このページは現在の Swagger Editor に関するものです。Swagger Editor Next (ベータ版) (別名 SwaggerEditor@5
) のドキュメントをお探しの方は、Swagger Editor Next (ベータ版) をご覧ください。
Swagger Editor は、OpenAPI Specification で HTTP (RESTful) API を設計、定義、ドキュメント化するためのオープンソースエディタです。Swagger Editor のソースコードは GitHub で見つけることができます。
GitHub: https://github.com/swagger-api/swagger-editor
Swagger Editor Next のみが OpenAPI 3.1.0 をサポートしています。SwaggerEditor@4 は OpenAPI 3.1.0 のサポートを受けることはなく、現時点ではレガシーと見なされています。計画では、将来的に SwaggerEditor@5 に完全に移行し、SwaggerEditor@4 を非推奨とすることです。
Webでのエディタの使用
エディタはあらゆるウェブブラウザで動作し、ローカルでホストすることも、ウェブからアクセスすることもできます。
ローカルでの実行
前提条件
- git、どのバージョンでも
- このリポジトリが動作するための最低限必要なバージョンは Node.js >=20.3.0 と npm >=9.6.7 ですが、常に最新バージョンの Node.js を使用することをお勧めします。
1 $ npm i --legacy-peer-deps
Node.js と npm がインストールされている場合は、npm start
を実行して静的サーバーを起動できます。
それ以外の場合は、ブラウザでファイルシステムから直接 index.html
を開くことができます。
Swagger Editor にコード変更を加えたい場合は、npm run dev
を介して Webpack ホットリロード開発サーバーを起動できます。
ブラウザのサポート
Swagger Editor は、Chrome、Safari、Firefox、および Edge の最新バージョンで動作します。
既知の問題
移行を支援するために、現在判明している 3.X の問題点を以下に示します。このリストは定期的に更新され、以前のバージョンで実装されていなかった機能は含まれません。
- Swagger UI の既知の問題に記載されているすべて。
- codegen との統合はまだありません。
便利なスクリプト
以下のスクリプトは、プロジェクトのルートディレクトリで npm run
と入力することで実行できます。
開発
スクリプト名 | 説明 |
---|---|
dev | ポート 3200 でホットリロード開発サーバーを起動します。 |
deps-check | Swagger Editor の依存関係に関するサイズとライセンスのレポートを生成します。 |
lint | ESLint スタイルのエラーと警告を報告します。 |
lint-errors | 警告なしで ESLint スタイルのエラーを報告します。 |
lint-fix | スタイルエラーを自動的に修正しようとします。 |
watch | ソースコードが変更されたときに /dist のコアファイルを再構築します。npm link に役立ちます。 |
ビルド
スクリプト名 | 説明 |
---|---|
build | 新しい JS および CSS アセットのセットを構築し、/dist に出力します。 |
build:bundle | swagger-editor-bundle.js のみ (commonJS) をビルドします。 |
build:core | swagger-editor.(js|css) のみ (commonJS) をビルドします。 |
build:standalone | swagger-editor-standalone-preset.js のみ (commonJS) をビルドします。 |
build:stylesheets | swagger-editor.css のみビルドします。 |
build:es:bundle | swagger-editor-es-bundle.js のみ (es2015) をビルドします。 |
build:es:bundle:core | swagger-editor-es-bundle-core.js のみ (es2015) をビルドします。 |
テスト
スクリプト名 | 説明 |
---|---|
test | Node でユニットテストを実行し、Cypress エンドツーエンドテストを実行し、エラーのみモードで ESLint を実行します。 |
test:unit-mocha | Node で Mocha ベースのユニットテストを実行します。 |
test:unit-jest | Node で Jest ベースのユニットテストを実行します。 |
e2e | Cypress を使用してエンドツーエンドのブラウザテストを実行します。 |
lint | ESLint テストの実行 |
test:artifact | Jest でバンドルアーティファクトテストのリストを実行 |
test:artifact:umd:bundle | swagger-editor-bundle が Function としてエクスポートされることを確認するユニットテストを実行 |
test:artifact:es:bundle | swagger-editor-es-bundle が Function としてエクスポートされることを確認するユニットテストを実行 |
test:artifact:es:bundle:core | swagger-editor-es-bundle-core が Function としてエクスポートされることを確認するユニットテストを実行 |
Docker
DockerHub からのイメージの実行
docker.swagger.io レジストリに Docker イメージが公開されています。
これを使用するには、次を実行します。
1docker pull docker.swagger.io/swaggerapi/swagger-editor2docker run -d -p 80:8080 docker.swagger.io/swaggerapi/swagger-editor
これにより、Swagger Editor が (デタッチモードで) マシンのポート 80 で実行されるため、ブラウザで https://
にアクセスして開くことができます。
- API 定義を指す URL を指定できます (CSP や CORS などのセキュリティポリシーが強制されている場合は利用できない場合があります)。
1docker run -d -p 80:8080 -e URL="https://petstore3.swagger.io/api/v3/openapi.json" docker.swagger.io/swaggerapi/swagger-editor
- ローカルホストから独自の
json
またはyaml
定義ファイルを提供できます。
1docker run -d -p 80:8080 -v $(pwd):/tmp -e SWAGGER_FILE=/tmp/swagger.json docker.swagger.io/swaggerapi/swagger-editor
注: URL
と SWAGGER_FILE
の両方の環境変数が設定されている場合、URL
が優先され、SWAGGER_FILE
は無視されます。
BASE_URL
変数を使用して、アプリケーションにアクセスするための異なるベース URL を指定できます。たとえば、アプリケーションをhttps:///swagger-editor/
で利用できるようにしたい場合などです。
1docker run -d -p 80:8080 -e BASE_URL=/swagger-editor docker.swagger.io/swaggerapi/swagger-editor
PORT
変数を使用して、アプリケーションにアクセスするための異なるポートを指定できます。デフォルトは8080
です。
1docker run -d -p 80:80 -e PORT=80 docker.swagger.io/swaggerapi/swagger-editor
GTM
変数を使用して Google タグマネージャー ID を指定し、swagger-editor の使用状況を追跡できます。
1docker run -d -p 80:8080 -e GTM=GTM-XXXXXX docker.swagger.io/swaggerapi/swagger-editor
Swagger Editor で使用されるさまざまなエンドポイントを、以下の環境変数でカスタマイズすることもできます。例えば、独自の Swagger ジェネレーターサーバーがある場合に便利です。
環境変数 | デフォルト値 |
---|---|
URL_SWAGGER2_GENERATOR | https://generator.swagger.io/api/swagger.json |
URL_OAS3_GENERATOR | https://generator3.swagger.io/openapi.json |
URL_SWAGGER2_CONVERTER | https://converter.swagger.io/api/convert |
Codegen 機能 (サーバー生成とクライアント生成) なしで Swagger Editor をローカルで実行したい場合は、上記の環境変数を null
(URL_SWAGGER2_CONVERTER=null
) に設定できます。
ローカルでのイメージのビルドと実行
マシンでチェックアウトしたコードで Docker イメージをビルドして実行するには、プロジェクトのルートディレクトリから次を実行します。
1# Install npm packages (if needed)2npm install3
4# Build the app5npm run build6
7# Build an image8docker build -t swagger-editor .9
10# Run the container11docker run -d -p 80:8080 swagger-editor
その後、ブラウザで https://
にアクセスしてアプリを表示できます。
ドキュメンテーション
古いバージョンの React の使用
[!IMPORTANT] 古いバージョンとは、具体的には
React >=17 <18
を指します。
デフォルトでは、swagger-editor@4 npm パッケージは最新バージョンの React@18 とともに提供されます。swagger-editor@4 npm パッケージを古いバージョンの React とともに使用することも可能です。
私のアプリケーションが swagger-editor@4 npm パッケージと統合し、React@17.0.2 を使用しているとします。
npm
swagger-editor@4
npm パッケージに私の React バージョンを使用するよう要求するには、npm のオーバーライドを使用する必要があります。
1{2 "dependencies": {3 "react": "=17.0.2",4 "react-dom": "=17.0.2"5 },6 "overrides": {7 "swagger-editor": {8 "react": "$react",9 "react": "$react-dom",10 "react-redux": "^8"11 }12 }13}
[!NOTE] React と ReactDOM のオーバーライドは、依存関係への参照として定義されます。react-redux@9 は
React >= 18
のみをサポートするため、react-redux@8 を使用する必要があります。
yarn
swagger-editor@4
npm パッケージに私の特定の React バージョンを使用するよう要求するには、yarn の解決策を使用する必要があります。
1{2 "dependencies": {3 "react": "17.0.2",4 "react-dom": "17.0.2"5 },6 "resolutions": {7 "swagger-editor/react": "17.0.2",8 "swagger-editor/react-dom": "17.0.2",9 "swagger-editor/react-redux": "^8"10 }11}
[!NOTE] React と ReactDOM の解決策は、依存関係への参照として定義することはできません。残念ながら、yarn は npm のように
$react
や$react-dom
のようなエイリアシングをサポートしていません。正確なバージョンを指定する必要があります。
セキュリティに関する連絡先
セキュリティ関連の問題や脆弱性については、公開されている課題追跡システムを使用するのではなく、security@swagger.io までメールでご連絡ください。
匿名化された分析
Swagger Editor は Scarf を使用して匿名化されたインストール分析を収集します。これらの分析は、このライブラリのメンテナーをサポートするのに役立ち、インストール時にのみ実行されます。オプトアウトするには、プロジェクトの package.json
に scarfSettings.enabled
フィールドを false
に設定します。
1{2 // ...3 "scarfSettings": {4 "enabled": false5 }6 // ...7}
または、npm パッケージをインストールする環境の一部として、環境変数 SCARF_ANALYTICS
を false
に設定することもできます (例: SCARF_ANALYTICS=false npm install
)。