Swagger仕様のJSONからHTMLドキュメントへの変換


88

PHPで記述された一部のRESTAPIについて、Swaggerドキュメントを作成するように依頼されましたが、既存のAPIに注釈を追加してそのようなドキュメントを作成する簡単な方法がわからなかったため、このエディターを使用して今のところいくつかを生成しました。

そのエディターを使用して作成されたJSONファイルとYAMLファイルを保存しました。次に、最終的なインタラクティブなSwaggerドキュメントを作成する必要があります(このステートメントは単純で曖昧に聞こえるかもしれません)。

誰かがSwaggerJSON仕様ファイルを実際のSwaggerドキュメントに変換する方法を教えてもらえますか?

私はWindowsプラットフォームを使用しており、Ant / Mavenについて何も知りません。


[ github.com/wordnik/swagger-ui](Swagger UI)を試しましたが、jsonがレンダリングされません。表示される唯一の警告は、「このAPIは非推奨バージョンのSwaggerを使用しています。詳細についてはgithub.com/wordnik/swagger-core/wikiを参照してください」です。
サリル2014

回答:


43

swagger-codegenこれを行うためのツールを探していたときは満足できなかったので、自分で作成しました。bootprint-swaggerを見てください

と比較した主な目標swagger-codegenは、簡単なセットアップを提供することです(ただし、nodejsが必要です)。また、ブートプリントプロジェクトのコア機能であるスタイリングとテンプレートを自分のニーズに簡単に適合させる必要があります。


9
警告:2016年11月の時点で、bootprint-swaggerの作成者はプロジェクトを放棄したようです。swagger-codegenはまだ十分にサポートされています。
ブレントマツェル2016年

22
私は著者であり、テキストには次のように書かれています。「近い将来、このプロジェクトの新機能を開発できなくなると申し訳ありません。しかし、プルリクエストについて話し合い、マージできるようになるでしょう。そして、新しいバージョンを公開します。」あなたはそれを放棄されたと呼ぶかもしれません、私はそれを「保留中」と呼ぶでしょう。また、プロジェクトへの貢献に興味のある方はどなたでもご参加いただけます。
Nils Knappmeier 2016年

1
spectacleSwagger JSONからはるかに見栄えの良いドキュメントを生成することが
わかりました

多くの苦労の末、私はこのツールが非常に便利であることに
気づきました

57

redoc-cliを使用してみてください。

私が使っていたbootprint-OpenAPIを私は(ファイルの束を生成したことでbundle.jsbundle.js.mapindex.htmlmain.cssおよびmain.css.map)をし、その後、あなたは、単一に変換することができます.html使用してファイルのhtml-インラインシンプル生成するindex.htmlファイルを。

次に、redoc-cliは非常に使いやすく、出力は本当に2つ、1つの美しいindex.htmlファイルであることがわかりました。

インストール

npm install -g redoc-cli

使用法

redoc-cli bundle -o index.html swagger.json

8
このツールは、言及されたすべてのツールの中で本当に最も美しい出力になります。
JakubMoravec18年

1
これはこれまでで最高のimoであり、デスクトップを使用している開発者向けにこれを構築しているため、出力サイズは問題になりません。
milosmns

3
直接実行可能ファイル名を使用するnpx redoc-cli ...と、常に機能するとは限りません。による実行の方が信頼性が高くなります。
しゃがむ子猫

2
非常に美しい出力。提案をありがとう。
Sahil Jain

1
これは素晴らしいツールです!素晴らしい提案をしてくれたVikasに深く感謝します!! bootstrap-openapiよりも間違いなくはるかに優れていて不器用ではありません!
Chaturvedi Saurabh

19

かなり盗品をチェックしください

それは持っています

  1. Swagger-Editorの右側のパネルに似ています
  2. 検索/フィルター
  3. スキーマの折りたたみ
  4. ライブフィードバック
  5. 単一のhtmlファイルとして出力

Swagger Editorを見ていて、プレビューペインをエクスポートできると思っていましたが、エクスポートできないことがわかりました。それで私はそれの私自身のバージョンを書きました。

完全開示:私はツールの作成者です。


1
私は、pretty-swagが、適切なCLIおよびAPIエントリポイントを備えた、単純で理想的なツールであることに気付きました。私の唯一の不満(そして代わりにswagger-uiの複雑さに対処することを余儀なくされたもの)は、オブジェクトの構成/拡張を正しく処理できなかったことでした。allOfドキュメントでを使用するとundefined、最も単純なシナリオ(単一のオブジェクトを「マージ」する、まったく使用allOfしないのと同じ)でも生成されます。
HonoredMule 2017年

3
ちょうどallOfあなたのために機能を展開しました。見てみな。
TLJ 2017年

2
SWAGGER / OpenAPIのV3をサポートするためには表示されません
SeinopSys

18

すべてが難しすぎるか、文書化が不十分だったため、次のように機能する単純なスクリプトswagger-yaml-to-html.pyを使用してこれを解決しました。

python swagger-yaml-to-html.py < /path/to/api.yaml > doc.html

これはYAML用ですが、JSONで動作するように変更することも簡単です。


これは純金です!
zemirco

16

GitHubのswagger-api / swagger-codegenプロジェクトを参照してください。プロジェクトREADMEは、静的HTMLを生成するためにそれを使用する方法を示しています。静的htmlAPIドキュメントの生成を参照してください。

swagger.jsonを表示する場合は、SwaggerUIをインストールして実行できます。Webサーバー(GitHubからリポジトリのクローンを作成した後のdistフォルダー)にデプロイし、ブラウザーでSwaggerUIを表示するだけです。JavaScriptアプリです。


ありがとう。私の問題は、swagger-uiが2.0仕様を受け入れていなかったことです。しかし、これは最も簡単な答えのように見えるので、私はこれを受け入れます(今のところ)。
サリル2015年

Swaggerツールは2.0用に進化しています。ただし、Swagger UIは、「swagger」で始まる2.0ファイルで機能することがわかりました。「2.0」
djb 2015年

また、SwaggerエディターからJSON仕様を(YAMLとしてではなくJSONとして)エクスポートでき、SwaggerUIはそれを読み取ることができるはずです。(注:swagger.jsonはSwagger UIアプリと同じホスト/ポート上にある必要があります。または、CORSを有効にする必要があります。GitHubのSwaggerエディターのREADME.mdを参照してください
djb

14

私は多くの時間を費やし、多くの異なる解決策を試しました-結局、私はそれをこのように行いました:

<html>
    <head>    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@3.17.0/swagger-ui.css">
        <script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
        <script>

            function render() {
                var ui = SwaggerUIBundle({
                    url:  `path/to/my/swagger.yaml`,
                    dom_id: '#swagger-ui',
                    presets: [
                        SwaggerUIBundle.presets.apis,
                        SwaggerUIBundle.SwaggerUIStandalonePreset
                    ]
                });
            }

        </script>
    </head>

    <body onload="render()">
        <div id="swagger-ui"></div>
    </body>
</html>

path / to / my /swagger.yamlを同じ場所から提供する必要があります
(またはCORSヘッダーを使用します)


素晴らしいです、ありがとう!<link rel = "stylesheet" href = " petstore.swagger.io/swagger-ui.css "> <script src = " petstore.swagger.io/swagger-ui-bundle.js "> </ script >を使用しました
Erando 2018

1
何もインストールせずに、これが最善の解決策であることがわかりました。
KurioZ7

非常に役に立ちました。あなたは多くの時間を節約しました。
kalpesh khule

7

https://github.com/swagger-api/swagger-uiからswaggeruiをダウンロードし、distフォルダーを取得し、index.htmlを変更することもできます。コンストラクターを変更します。

const ui = SwaggerUIBundle({
    url: ...,

const ui = SwaggerUIBundle({
    spec: YOUR_JSON,

これで、distフォルダーに必要なものがすべて含まれ、そのまま配布できます。


2

このリンクを見てください:http//zircote.com/swagger-php/installation.html

  1. pharファイルをダウンロードhttps://github.com/zircote/swagger-php/blob/master/swagger.phar
  2. Composerをインストールしますhttps://getcomposer.org/download/
  3. composer.jsonを作成します
  4. クローンの闊歩-php / library
  5. クローンswagger-ui / library
  6. APIのリソースクラスとモデルPHPクラスを作成します
  7. PHPファイルを実行してjsonを生成します
  8. api-doc.jsonでjsonのパスを指定します
  9. swagger-uidistフォルダー内のindex.phpにapi-doc.jsonのパスを指定します

別のサポートが必要な場合は、お気軽にお問い合わせください。


1
これを生成できるオンラインエディター(swagger-editor以外)はありますか?もっと簡単な方法があるのなら、PHPAPIに注釈を付けたくありません。問題は、swagger-editorがswagger仕様v2.0を生成し、swagger-uiが現時点ではそれを処理しないことです。
サリル2014

@Salil私が知っているのは、swaggerが独自のオンラインエディターを提供していることです。つまり、editor.swagger.wordnik.com他のオンラインエディターを知りません。共有している場合は、ありがとうございます:)
Syed Raza Mehdi 2014

2

yamlファイルからドキュメント(adocまたはmd)を生成する小さなJavaプログラムがあります。

Swagger2MarkupConfig config = new Swagger2MarkupConfigBuilder()
        .withMarkupLanguage(MarkupLanguage.ASCIIDOC)
        .withSwaggerMarkupLanguage(MarkupLanguage.ASCIIDOC)
        .withOutputLanguage(Language.DE)
        .build();

Swagger2MarkupConverter builder = Swagger2MarkupConverter.from(yamlFileAsString).withConfig(config).build();
return builder.toFileWithoutExtension(outFile);

残念ながら、それだけでサポートされていOpenAPIを2.0ではなくOpenAPIの3.0を


2

Swagger API 3.0の場合、オンラインのSwaggerEditorからHtml2クライアントコードを生成することは私にとって素晴らしいことです。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.