1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

swagger-json(or yaml)を単一のhtmlに変換する

Posted at

ニッチかもしれませんが、
「Swagger形式のドキュメントをhtmlファイルに出力したい!」
というケースに対応する方法をまとめます。
自分のケースだと、

  • リッチなエディタとかツールとか不要でとりあえず今のAPI仕様をサクッと関係者に共有したい
  • ネットワーク的な問題で自分らのswagger-uiを先方に公開することはできない

というケースで必要になりました。

注意点

結果として生成されるhtmlは、swagger-uiから直接見るドキュメントよりもUX的にだいぶイケてません。
例)POSTとかPUTとかのアコーディオンが全部展開された状態で固定されていたり、など・・・

前提条件

  • swagger.jsonもしくはswagger.yamlはある
  • npmがローカルPCにインストールされている

ゴール

  • swagger.jsonもしくはswagger.yamlを単一のhtmlファイル(cssなし)にする

手順

# 必要なツール群をインストールする
npm install -g bootprint
npm install -g bootpring-openapi # openapi(swagger)のjson、yamlファイルをhtml、cssに変換するツール
npm install -g html-inline # html、cssファイル群を単一のhtmlファイルに変換するツール

# swagger.jsonをhtmlおよびcssファイルに変換する
bootprint openapi swagger.json ./bootprint_output_dir

# htmlファイルおよびcssファイルを、単一htmlに変換する
html-inline ./bootprint_output_dir/index.html > index.html

出力が成功したら、最後のコマンドで生成したindex.htmlをブラウザから開いて確認してください。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?